<!--
 * @Author: Mm
 * @Date: 2025-05-12 15:04:43
 * @LastEditors: Mm
 * @LastEditTime: 2025-08-19 09:48:46
 * 不写bug的程序员不是一个好程序员!
-->
<template>
  <Page :auto-content-height="true">
    <div class="h100 w-full">
      <Row :gutter="20" class="h100">
        <Col :span="detail.groupId ? 16 : 24" class="h100">
          <Spin :spinning="spinning">
            <AnalysisChartCard
              style="position: relative"
              :title="detail.formData.field4997982661951"
            >
              <div class="right-top flex">
                <Tag color="#f50" v-if="detail.bizTask.redo == 1">重办</Tag>
                <DictTag
                  v-if="isdb"
                  :dicts="dictStatus"
                  :value="detail.bizStatus"
                ></DictTag>
                <span v-else>
                  <Tag color="#006be6" v-if="detail.status === '审批进行中'"
                    >审批进行中</Tag
                  >
                  <Tag color="#87d068" v-else>审批通过</Tag>
                </span>
                <DictTag
                  :dicts="dictInfo"
                  :value="detail.formData.field9166682677829[0]"
                ></DictTag>
              </div>
              <Descriptions
                class="mm-des"
                layout="vertical"
                size="small"
                :contentStyle="{ color: 'rgb(17,24,39)', fontSize: '16px' }"
                :labelStyle="{ paddingBottom: '0' }"
              >
                <DescriptionsItem label="发起人">{{
                  detail.staterUser.name
                }}</DescriptionsItem>
                <DescriptionsItem label="发起单位">{{
                  detail.starterDept
                }}</DescriptionsItem>
                <DescriptionsItem label="发起时间">{{
                  detail.startTime
                }}</DescriptionsItem>
                <DescriptionsItem label="任务内容" :span="3">{{
                  detail.formData.field4812283627149
                }}</DescriptionsItem>
                <DescriptionsItem
                  label="任务附件"
                  :span="3"
                  v-if="
                    detail.formData.field3232724933592 ||
                    detail.formData.field4385824969331
                  "
                >
                  <div class="flex-column">
                    <div class="imgs">
                      <ImagePreviewGroup>
                        <Image
                          v-for="item in detail.formData.field3232724933592"
                          :key="item.id"
                          :height="100"
                          :src="item.url"
                        />
                      </ImagePreviewGroup>
                    </div>
                    <div class="files flex-column">
                      <a
                      target="_blank"
                        :href="item.url"
                        v-for="item in detail.formData.field4385824969331"
                        :key="item.id"
                        ><CloudDownloadOutlined />{{ item.name }}</a
                      >
                    </div>
                  </div>
                </DescriptionsItem>
                <DescriptionsItem label="重办原因" :span="2" v-if="detail.bizTask.redo == 1">{{
                  detail.bizTask.redoReason
                }}</DescriptionsItem>
                <DescriptionsItem label="重办时间" v-if="detail.bizTask.redo == 1">{{
                  detail.bizTask.redoTime
                }}</DescriptionsItem>
              </Descriptions>
            </AnalysisChartCard>
            <AnalysisChartCard class="mt-5" title="任务进度">
              <Progress :percent="detail.processPercent" :size="15" :show-info="false" />
              当前进度：{{detail.processPercent}}%
            </AnalysisChartCard>
            <AnalysisChartCard class="mt-5" title="协作单列表">
              <Table
                size="small"
                :dataSource="xzdList"
                :columns="columns"
                :pagination="false"
                bordered
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'status'">
                    <Tag
                      :title="record.spContent"
                      color="red"
                      v-if="record.status == 5"
                      >被中心驳回</Tag
                    >
                    <DictTag
                      v-else
                      :dicts="dictInfo1"
                      :value="record.status"
                    ></DictTag>
                  </template>

                  <template v-else-if="column.key === 'action'">
                    <span>
                      <Button
                        type="link"
                        style="padding: 0 5px"
                        @click.stop="handleXzdDetail(record)"
                        >详情</Button
                      >
                      <Button
                        type="link"
                        style="padding: 0 5px"
                        @click.stop="handleXzdAgree(record)"
                        v-if="
                          userRoles?.includes('hezhanleader') &&
                          record.status == 3
                        "
                        >签收</Button
                      >
                      <Button
                        type="link"
                        style="padding: 0 5px"
                        v-if="
                          userRoles?.includes('hezhanleader') &&
                          record.status == 3
                        "
                        @click.stop="handleXzdReturn(record)"
                        >退回</Button
                      >
                    </span>
                  </template>
                </template>
              </Table>
            </AnalysisChartCard>
            <AnalysisChartCard
              class="mt-5"
              title="任务动态"
              v-if="detail.taskLogVos.length > 0"
            >
              <Timeline>
                <TimelineItem v-for="item in detail.taskLogVos" :key="item.id">
                  <template #dot
                    ><clock-circle-outlined style="font-size: 16px"
                  /></template>
                  <div class="timeLineItems">
                    <div class="timeline-top flex-space-between">
                      <span class="timeline-top-title">{{ item.remark }}</span>
                      <span class="timeline-top-time">{{ item.optime }}</span>
                    </div>
                    <p class="timeline-con">
                      {{ item.deptName + item.remark }}
                    </p>
                    <p class="timeline-top-time">
                      操作人：{{
                        item.userName + ' 【' + item.policeNum + '】'
                      }}
                    </p>
                    <div
                      class="imgs"
                      style="margin-top: 10px"
                      v-if="item.imageUrl"
                    >
                      <ImagePreviewGroup>
                        <Image
                          v-for="(imgs, index) in item.imageUrl.split(',')"
                          :key="index"
                          :height="100"
                          :src="imgs"
                        />
                      </ImagePreviewGroup>
                    </div>
                    <div class="files" v-if="item.fileUrl">
                      <a
                        :href="files"
                        v-for="(files, index) in item.fileUrl.split(',')"
                        :key="index"
                        style="margin-right: 10px; font-style: italic"
                        ><CloudDownloadOutlined />附件{{ index + 1 }}</a
                      >
                    </div>
                  </div>
                </TimelineItem>
              </Timeline>
            </AnalysisChartCard>
          </Spin>
        </Col>
        <Col :span="8" class="h100" v-if="detail.groupId">
          <div class="blue h100">
            <iframe
              v-if="isShowIframe"
              style="width: 100%; height: 100%"
              :src="srcValue"
              frameborder="0"
            ></iframe>
          </div>
        </Col>
      </Row>
      <!-- 协作单详情弹框 -->
      <XzdDetailModal @reload="getPageAll()" />
      <!-- 协作单退回弹框 -->
      <Modal
        v-model:open="open"
        title="协作单退回"
        @ok="handleOk"
        width="600px"
      >
        <Textarea
          v-model:value="xzdForm.spContent"
          :rows="6"
          placeholder="请输入退回意见"
        />
      </Modal>
    </div>
  </Page>
</template>
<script setup lang="ts">
import {
  Page,
  useVbenModal,
  type VbenFormProps,
  AnalysisChartCard,
} from '@vben/common-ui';
import {
  Row,
  Col,
  Tag,
  Spin,
  Descriptions,
  DescriptionsItem,
  ImagePreviewGroup,
  Image,
  Progress,
  Timeline,
  TimelineItem,
  Modal,
  message,
  Button,
  Table,
  Textarea,
} from 'ant-design-vue';
import xzdDetailModal from './xzd-detail-modal.vue';

import {
  ClockCircleOutlined,
  CloudDownloadOutlined,
} from '@ant-design/icons-vue';
import {
  tasksDetail,
  getXzdList,
  agreeXzd,
  returnXzd,
} from '#/api/tasks/index';
import { useRoute } from 'vue-router';
import { computed, onBeforeMount, onMounted, ref } from 'vue';
import { getDictOptions } from '#/utils/dict';
import { DictTag } from '#/components/dict';
const dictInfo = getDictOptions('tasks_type');
const dictInfo1 = getDictOptions('biz_task_work_status');
const dictStatus = getDictOptions('biz_task_status');
const route = useRoute();
const instanceId: any = route.query.instanceId;
const nodeId: any = route.query.nodeId;
const isdb: any = route.query.isdb;
const im_refresh_token = localStorage.getItem('im_refresh_token');
const im_access_token = localStorage.getItem('im_access_token');
const srcValue = ref('');
const isShowIframe = ref(false);
// 详情数据
const detail = ref<any>({
  formData: {
    field4997982661951: '', //任务名称
    field9166682677829: ['1'], //任务类型
    field4812283627149: '', //任务内容
    field4385824969331: [], //文件
    field3232724933592: [], //图片
  },
  staterUser: {}, //发起人
  startTime: '', //发起时间
  starterDept: '', //发起人部门
  status: '', //任务状态
  taskLogVos: [], //任务日志
  bizStatus: '-1',
  groupId: undefined,
  bizTask:{
    redo:0,
    redoReason:'',
    redoTime:'',
  },
  processPercent:0,
});

import { useUserStore } from '@vben/stores';

const userStore = useUserStore();
const userRoles = computed(() => {
  return userStore.userInfo?.roles;
});
const chatUrl = computed(() => {
  return import.meta.env.VITE_APP_CHAT_SERVER_URL
});

const columns: any = [
  {
    title: '协作单位',
    dataIndex: 'deptName',
    key: 'deptName',
    width: 280,
    align: 'center',
  },
  {
    title: '协作人员',
    dataIndex: 'sponsorName',
    key: 'sponsorName',
    width: 150,
    align: 'center',
  },
  {
    title: '当前状态',
    dataIndex: 'status',
    width: 150,
    key: 'status',
    align: 'center',
  },
  {
    title: '协作内容',
    dataIndex: 'workContent',
    key: 'workContent',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '操作',
    key: 'action',
    width: 130,
    align: 'center',
  },
];

const spinning = ref<boolean>(true);
async function getTaksDetail(id: string | number, nodeId: string | number) {
  detail.value = await tasksDetail(id, nodeId);
  console.log(detail.value, '---------detail');
  if (im_refresh_token && im_access_token) {
    // srcValue.value = `${chatUrl.value}/#/login?refresh_token=${im_refresh_token}&access_token=${im_access_token}&isDetail=true`
    srcValue.value = `${chatUrl.value}/#/homegroup/detail?groupId=${detail.value.groupId}`;
  } else {
    srcValue.value = `${chatUrl.value}/#/homegroup/detail?groupId=${detail.value.groupId}`;
  }
  spinning.value = false;
}

const xzdList = ref<any>([]);
//  获取协作单列表getXzdList
async function fetclList(id: string | number) {
  xzdList.value = await getXzdList({ taskNo: id });

  console.log(xzdList.value, '---------xzdList');
}

function getPageAll() {
  getTaksDetail(instanceId, nodeId);
  fetclList(instanceId);
}

// 协作单详情弹窗
const [XzdDetailModal, xzdDetailModalApi] = useVbenModal({
  connectedComponent: xzdDetailModal,
});
// 协作单详情
async function handleXzdDetail(row: any) {
  xzdDetailModalApi.setData({
    id: row.id,
  });
  xzdDetailModalApi.open();
}
// 协作单弹框显示
const open = ref(false);
const xzdForm = ref<any>({
  spContent: '',
  id: '',
  taskNo: '',
});
// 协作单退回确认按钮
async function handleOk() {
  if (xzdForm.value.spContent) {
    await returnXzd(xzdForm.value);
    open.value = false;
    await getPageAll();
  } else {
    message.warning('请填写退回意见');
  }
}
// 协作单退回
async function handleXzdReturn(row: any) {
  xzdForm.value = {
    spContent: '',
    id: row.id,
    taskNo: row.taskNo,
  };
  open.value = true;
}
// 协作单签收
async function handleXzdAgree(row: any) {
  Modal.confirm({
    title: '提示',
    content: '确认要签收当前协作单的反馈吗？',
    okText: '确定',
    cancelText: '取消',
    centered: true,
    async onOk() {
      await agreeXzd({ id: row.id, taskNo: row.taskNo });
      await getTaksDetail(instanceId, nodeId);
      await fetclList(instanceId);
    },
    onCancel() {},
  });
}



onBeforeMount(() => {
  getPageAll();
});

onMounted(() => {
  isShowIframe.value = true;

});

</script>
<style lang="scss" scoped>
.h100 {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }

  &:hover {
    &::-webkit-scrollbar {
      display: block;
    }
  }
}

.blue {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.25rem;
}
.right-top {
  position: absolute;
  top: 1.4rem;
  right: 1.25rem;
}
.imgs {
  display: flex;
  flex-wrap: wrap;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.files {
  margin-top: 10px;

  a {
    font-size: 14px;
  }
}
.timeLineItems {
  background-color: rgb(249 250 251);
  padding: 1rem;
  border-radius: 10px;
  .timeline-top-title {
    color: #111827;
    font-size: 16px;
  }
  .timeline-top-time {
    font-size: 12px;
    color: #6b7280;
  }
  .timeline-con {
    color: #4b5563;
    margin: 10px 0;
  }
}
.flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
<style lang="scss">
.mm-des {
  .ant-descriptions-view {
    .ant-descriptions-row {
      .ant-descriptions-item {
        padding-bottom: 0 !important;
      }
      .ant-descriptions-item-content {
        padding-bottom: 16px !important;
      }
    }
  }
}
.mm-des .ant-descriptions-item-label::after {
  content: '' !important;
}
</style>
