import { defineComponent, ref, watch } from 'vue';
import CloseSvg from '@/assets/svg/dialog/close.svg';
import './index.less';
import { getUserInfo } from '@/utils/api/BlindBox';
import { useFoxWallet } from '@/store/FoxWallet';
import useCopy from '@/hook/useCopy';
import { useI18n } from 'vue-i18n';
export default defineComponent({
  props: {
    modelValue: Boolean,
    id: Number,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { doCopy } = useCopy();
    const { t } = useI18n();
    const visible = ref(props.modelValue);
    const resObj = ref<any>({});
    const { $state: FoxWallet } = useFoxWallet();
    const closeIcon = () => {
      return <CloseSvg></CloseSvg>;
    };
    // 获取用户邀请码
    const getUser = async () => {
      try {
        let res: any = await getUserInfo({
          address: FoxWallet.address,
          id: props.id,
        });
        resObj.value = res.data;
      } catch (e) {
        console.log(e);
      }
    };
    watch(
      () => props.modelValue,
      (v) => {
        visible.value = v;
        if (v) {
          getUser();
        }
      }
    );
    watch(
      () => visible.value,
      (v) => {
        emit('update:modelValue', v);
      }
    );
    return () => (
      <t-dialog
        v-model:visible={visible.value}
        placement="center"
        attach="body"
        class="custom-invite-dialog"
        footer={false}
        header={false}
        closeBtn={closeIcon}
      >
        <div class="invite-dialog-body">
          <div class="title">{t('invite.yourCode')}</div>
          <div class="invite-box">
            <div class="url">{resObj.value.invitation_link}</div>
            <div
              class="copy-button"
              onClick={doCopy.bind(this, resObj.value.invitation_link ?? '')}
            >
              {t('header.copy')}
            </div>
          </div>
          <div class="current-invite-address">
            <div class="label">{t('invite.Currentblind')}：</div>
            <div class="value">
              {resObj.value.invite_list
                ? resObj.value.invite_list.map((item: any) => (
                    <span>{item}</span>
                  ))
                : ''}
            </div>
          </div>
          <div class="current-invite-address margin">
            <div class="label">{t('invite.probability')}</div>
            <div class="value">{resObj.value.rate}%</div>
          </div>
        </div>
      </t-dialog>
    );
  },
});
