<template>
  <div class="modalDetail">
    <a-descriptions
      :column="2"
      bordered
      size="small"
      :contentStyle="{
        'text-align': 'center',
        'min-width': '400px',
        'word-break': 'break-all',
      }"
    >
      <a-descriptions-item label="任务名称">
        {{ props.modalDetail.taskName }}
      </a-descriptions-item>
      <a-descriptions-item label="AI解释成果">
        {{ props.modalDetail.shpName }}
        <a-button type="link" @click="copyToClipboard(props.modalDetail.shpName)">复制</a-button>
      </a-descriptions-item>
      <a-descriptions-item label="前时相">
        <p
          v-for="nextPhase in props.modalDetail.nextPhaseList"
          :key="nextPhase"
          :style="{ 'margin-bottom': 0 }"
        >
          {{ nextPhase }}
          <a-button type="link" @click="copyToClipboard(nextPhase)">复制</a-button>
        </p>
      </a-descriptions-item>
      <a-descriptions-item label="后时相">
        <p
          v-for="prePhase in props.modalDetail.prePhaseList"
          :key="prePhase"
          :style="{ 'margin-bottom': 0 }"
        >
          {{ prePhase }}
          <a-button type="link" @click="copyToClipboard(prePhase)">复制</a-button>
        </p>
      </a-descriptions-item>
      <a-descriptions-item label="任务创建时间">
        {{ props.modalDetail.taskCreateTime }}
      </a-descriptions-item>
      <a-descriptions-item label="任务说明">
        {{ props.modalDetail.taskRemark }}
      </a-descriptions-item>
      <a-descriptions-item label="任务状态">
        <a-tag color="red" v-if="props.modalDetail.taskIsCompleted == 0">进行中</a-tag>
        <a-tag color="green" v-if="props.modalDetail.taskIsCompleted == 1">已完成</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="领取状态">
        <a-tag color="orange" v-if="props.modalDetail.taskState == 0">待领取</a-tag>
        <a-tag color="blue" v-if="props.modalDetail.taskState == 1">领取中</a-tag>
        <a-tag color="green" v-if="props.modalDetail.taskState == 2">已领完</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="领取人">
        {{ props.modalDetail.reciveUser }}
      </a-descriptions-item>
      <a-descriptions-item label="分属小组">
        {{ props.modalDetail.groupName }}
      </a-descriptions-item>
      <a-descriptions-item label="领取任务状态">
        <a-tag color="red" v-if="props.modalDetail.isComplate == 0">进行中</a-tag>
        <a-tag color="green" v-if="props.modalDetail.isComplate == 1">已完成</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="领取图斑数量">
        {{ props.modalDetail.tubanNum }}
        （{{ props.modalDetail.beginNum }}-{{ props.modalDetail.endNum }}）
      </a-descriptions-item>
      <a-descriptions-item label="领取时间">
        {{ props.modalDetail.reciveTime }}
      </a-descriptions-item>
      <a-descriptions-item label="领取人备注">
        {{ props.modalDetail.remark }}
      </a-descriptions-item>
      <a-descriptions-item label="创建人">
        {{ props.modalDetail.createUserName }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ props.modalDetail.createTime }}
      </a-descriptions-item>
    </a-descriptions>
    <div style="height: 10px" />
  </div>
</template>
<script lang="ts" setup>
  import { defineProps } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const props = defineProps(['modalDetail']);

  // 复制到剪贴板
  const copyToClipboard = async (record) => {
    try {
      await navigator.clipboard.writeText(record);
      createMessage.success('文本已复制到剪贴板');
    } catch (err) {
      createMessage.error('无法复制文本');
    }
  };
</script>
<style lang="less">
  .modalDetail {
    margin: 10px;
  }
</style>
