<template>
  <BasicModal
    v-bind="$attrs"
    @cancel="handleCancel"
    @register="register"
    title="分享场景"
    @ok="handleOk"
  >
    <div class="pt-3px pr-3px"> </div>
    <div v-for="item in lists" :key="item.sceneName" class="pt-8">
      <div class="flex flex-nowrap flex-row justify-between py-2">
        <div> {{ item.sceneName }}</div>
        <a-button size="small" type="link" @click="handleCopy(item.webSite)">复制链接</a-button>
      </div>
      <Input :value="item.webSite" :disabled="true" />
    </div>
    <div v-if="empty" class="flex justify-center items-center" style="min-height: 200px">
      暂无数据
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  // import { UpdateApi } from '/@/api/scene/list';
  import { getShareListApi } from '/@/api/scene/list';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Input } from 'ant-design-vue';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  // import { BasicForm, FormSchema } from '/@/components/Form/index';
  // import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  // const { t } = useI18n();

  interface ShareItemType {
    sceneName: string;
    webSite: string;
  }
  export default defineComponent({
    components: { BasicModal, Input },
    props: {
      userData: { type: Object },
    },
    emits: ['reload', 'register'],
    setup() {
      const lists = ref<ShareItemType[]>([]);
      const empty = ref<boolean>(false);
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      async function onDataReceive(data) {
        // data = unref(data);
        const res = await getShareListApi({
          sceneNum: data.num,
        });
        console.log('res', res);

        if (res.result?.length as ShareItemType[]) {
          const data: ShareItemType[] = res.result;
          lists.value = data;
        } else {
          empty.value = true;
          lists.value = [];
        }

        // console.log('demoData', demoData);
      }

      async function handleOk() {
        closeModal();
        empty.value = false;
      }
      async function handleCancel() {
        closeModal();
        empty.value = false;
      }

      function handleCopy(text) {
        const { isSuccessRef } = useCopyToClipboard(text);
        unref(isSuccessRef) && createMessage.success('复制成功！');
      }

      return { register, handleOk, closeModal, lists, handleCopy, empty, handleCancel };
    },
  });
</script>
