<template>
  <div class="g-email ">
    <div class="g-email-left">
      <div class="g-email-left-header flex items-center">
        <slot name="header">
          <div class="g-email-left-header-email">{{ email }}</div>
          <slot name="main">
            <span class="g-email-left-header-tip main" v-if="isMail">默认</span>
            <span class="g-email-left-header-tip no-verify" v-if="!isVerify">未验证</span>
          </slot>
          <div class="g-email-right-text" v-if="!isVerify" @click.stop="emits('handleStar', props)">
            <span class="g-email-right-text-p">重新发送邮件确认</span>
          </div>
        </slot>
      </div>
    </div>
    <div v-if="!isMail" class="g-email-right">
      <slot name="right">
        <MoreList :moreOpts="moreOpts" :item="item"></MoreList>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import MoreList from '@/components/MoreList/index.vue';
const props = withDefaults(defineProps<{
  id?: string
  email: string
  isMail?: boolean
  isVerify?: boolean
  hideDeleted?: boolean
  hideStar?: boolean,
  moreOpts?: any,
  item?: any
}>(), {
  id: '',
  email: '',
  isMail: false,
  isVerify: false,
  hideDeleted: false,
  hideStar: false,
  moreOpts: () => [],
  item: () => ({
  })
});

const emits = defineEmits(['handleStar', 'handleDeleted']);

</script>

<style scoped lang="scss">
$g-email-border-color: var(--color-G300);

.g-email {
  border: 1px solid $g-email-border-color;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  &:last-of-type{
    // border-bottom: none;
  }
  &-left {
    align-self: center;
    &-header {
      &-email {
        width: 300px;
        font-size: 14px;
        color: var(--color-G900);
      }

      &-tip {
        padding-left: 16px;
        font-size: 14px;
        border-left: 1px solid var(--color-G400);
        &.main {
          color: var(--color-Y500);
        }

        &.no-verify {
          color: var(--color-O500);
        }
      }
    }

    &-content {
      margin-top: 8px;

      p {
        margin-top: 4px;
      }
    }
  }

  &-right {
    font-size: 16px;
    align-self: center;
    flex-shrink: 0;
    display: flex;
    :deep(.devui-button) {
      border-color: $g-email-border-color;
      margin-left: 24px;
    }

    &-text {
      align-self: center;
      display: inline-block;
      cursor: pointer;

      .devui-icon__container {
        vertical-align: middle;
      }

      &-p {
        margin-left: 4px;
        color: var(--color-CG600);
        font-size: 14px;
      }
    }
  }
}
</style>
