<template>
  <ele-modal
    :width="400"
    :visible="visible"
    :title="`分享工单`"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    ok-text="复制链接"
    @ok="save"
  >
    <div
      class="qrcode-list"
      style="display: flex; justify-content: space-around"
    >
      <div>
        <ele-qr-code
          :value="
            domain + '/oa/task/detail/' + data.taskId + '&tid=' + data.tenantId
          "
          :size="300"
          level="M"
          :margin="1"
          :image-settings="logo"
        />
        <div
          style="
            display: flex;
            justify-content: center;
            font-size: 26px;
            padding-top: 20px;
          "
          >使用微信扫一扫</div
        >
      </div>
    </div>
  </ele-modal>
</template>
<script lang="ts" setup>
  import { User } from '@/api/system/user/model';
  import { reactive } from 'vue';
  import { copyText } from '@/utils/common';
  import { domain } from '@/config/setting';
  import { ImageSettings } from 'ele-admin-pro/es/ele-qr-code/types';
  import { Task } from '@/api/oa/task/model';

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    data: Task;
  }>();

  const emit = defineEmits<{
    (e: 'done', user: User): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  const logo = reactive<ImageSettings>({
    src: 'https://oss.wsdns.cn/20230722/5e7d3ea18c7f43acae8b7ea82bab7cbc.png',
    width: 36,
    height: 36,
    excavate: true
  });

  const save = () => {
    copyText(
      domain +
        '/oa/task/detail?id=' +
        props.data.taskId +
        '&tid=' +
        props.data.tenantId
    );
  };

  // taskQRCode({ taskId: props.data?.taskId }).then((text) => {
  //   qrcode.value = String(text);
  // });
</script>
<style scoped lang="less"></style>
