<template>
  <PageWrapper :class="prefixCls">
    <!-- <div class="btn-box">
      <a-button
        type="primary"
        @click="closePage"
        class="ml-2"
        danger
        >关闭
      </a-button>
    </div> -->
    <div class="maper-container" v-if="mapConfig?.isShowMap">
      <MapboxMap
        :mapConfig="mapConfig"
        @handlerDrawComplete="handlerDrawComplete"
        @mapOnLoad="onMapboxLoad"
        ref="MapboxComponent"
      />
    </div>

    <div :class="mapConfig?.isShowMap ? 'form-container' : ''">
      <a-layout>
        <a-layout>
          <a-layout-content>
            <a-tabs v-model:activeKey="activeName" @change="changeActive" type="card">
              <a-tab-pane
                key="form"
                :tab="
                  designerData.formCurrentNode.formTitle
                    ? designerData.formCurrentNode.formTitle
                    : '表单信息'
                "
                v-if="formVisble"
              >
                <div>
                  <ImagePreview
                    v-if="isShowImagePreview"
                    :globalImagePreviewUrl="globalImagePreviewUrl"
                    @closeImagePreview="closeImagePreview"
                  ></ImagePreview>
                  <FormViewer
                    ref="formBoxRef"
                    :formConfig="formConfig"
                    :processId="designerData.process.id"
                    :formVerison="designerData.formCurrentNode.formVerison"
                    :formRelationId="designerData.formCurrentNode.formRelationId"
                    :instanceInfo="designerData.process.instanceInfo"
                    :issueId="designerData.formCurrentNode.issueId"
                    :isDetail="true"
                    @getFormSuccess="getFormSuccess"
                    v-if="formVisble"
                  />
                </div>
              </a-tab-pane>
              <a-tab-pane key="flow" tab="流程模板" force-render>
                <div class="process-design" :style="'display: flex; height:' + designerData.height">
                  <process-viewer
                    v-if="processVisble"
                    :key="`designer-${id}`"
                    :events="['element.click']"
                    @element-click="elementClick"
                    :xml="flowContent"
                    :flowViewer="flowViewer"
                  />
                </div>
              </a-tab-pane>
              <a-tab-pane key="record" tab="操作记录" force-render>
                <div :style="'padding:10px 0 40px 0;overflow:auto; height:' + designerData.height">
                  <a-timeline>
                    <a-timeline-item
                      v-for="(item, index) in designerData.logs"
                      :key="index"
                      :color="item.type"
                    >
                      <div class="title">{{ item.time }}</div>
                      <a-card hoverable size="small">
                        <div class="type-title">{{ item.name }}</div>
                        <div class="content">
                          <span
                            class="link"
                            v-for="(userName, index2) in item.userNames"
                            :key="index2"
                            >{{ userName }}</span
                          >
                          {{ item.des }}
                        </div>
                      </a-card>
                    </a-timeline-item>
                  </a-timeline>
                </div>
              </a-tab-pane>
            </a-tabs>
          </a-layout-content>
          <div v-if="designerData.userLogs.length > 0" :style="footerStyle">
            <a-tabs v-model:activeKey="auditName">
              <a-tab-pane key="audit" tab="审批信息">
                <div class="approval-info">
                  <auditInfo :data="designerData.userLogs" />
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
          <!-- <a-layout-sider :style="footerStyle" v-if="designerData.userLogs.length > 0">
            <a-tabs v-model:activeKey="auditName">
              <a-tab-pane key="audit" tab="审批信息">
                <div class="approval-info">
                  <auditInfo :data="designerData.userLogs" />
                </div>
              </a-tab-pane>
            </a-tabs>
          </a-layout-sider> -->
        </a-layout>
      </a-layout>
    </div>

    <!-- 节点记录信息 -->
    <div class="info-box" v-if="designerData.nodeLogs.length > 0">
      <a-drawer v-model:open="infoOpen" class="custom-class" title="记录信息" placement="right">
        <a-timeline>
          <a-timeline-item
            v-for="(item, index) in designerData.nodeLogs"
            :key="index"
            :color="item.type"
          >
            <div class="title">{{ item.time }}</div>
            <a-card hoverable size="small">
              <div class="type-title">{{ item.name }}</div>
              <div class="content">
                <span class="link" v-for="(userName, index2) in item.userNames" :key="index2">{{
                  userName
                }}</span>
                {{ item.des }}
              </div>
            </a-card>
          </a-timeline-item>
        </a-timeline>
      </a-drawer>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive, onBeforeMount, defineAsyncComponent, watch } from 'vue';
  import { FormViewer } from '@/components/FormViewer';
  import { ProcessViewer } from '@/components/ProcessViewer';
  import { PageWrapper } from '@/components/Page';
  import { getBPMN } from '@/api/sys/WFProcess';
  import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
  import { dateFormat } from '@/utils/base';
  import { designerDataType, logsType } from './processModel';
  import { auditInfo } from './page';
  import { getGeom } from '@/api/sys/layerManagement';
  import { storeToRefs } from 'pinia';
  import ImagePreview from '@/components/Upload/src/components/image_preview.vue';
  import { userFormFileStore } from '@/store/modules/formFileUrl';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
  const mapConfig = ref({ isShowMap: false });
  const MapboxComponent = ref();
  const props = defineProps({
    processId: String,
  });
  const prefixCls = 'preview-box';
  const flowContent = ref('');
  const flowViewer = ref({});
  const infoOpen = ref(true);
  const formBoxRef = ref<any>();
  const formVisble = ref(false);
  const processVisble = ref(false);
  // 表单数据
  const formConfig = ref<IFormConfig>({
    // 表单配置
    schemas: [],
    layout: 'horizontal',
    labelLayout: 'flex',
    labelWidth: 100,
    labelCol: {},
    wrapperCol: {},
    currentItem: {
      component: '',
      componentProps: {},
    },
    activeKey: 1,
  });
  const designerData: designerDataType = reactive({
    loading: false,
    xmlString: '',
    height: document.documentElement.clientHeight - 300.5 + 'px;',
    midVisible: false,
    isCustmerTitle: false,
    nodeUsers: [],
    selectUsersVisible: false,
    selectTUserVisible: false,
    tUserType: 1, // 1 转移 2 加签,
    isDraft: false,
    delegateUsers: [],
    task: {},
    process: {},
    logs: [], // 流程日志信息
    nodeMap: {}, // 需要处理的任务
    userLogs: [], // 人员日志信息
    nodeLogs: [],
    taskBtns: [],
    currentNode: {},
    stampList: [],
    currentBtn: {
      code: '',
      name: '',
      isNextAuditor: false,
    },
    wfData: [],
    selectRejectNodeVisible: false,
    selectSignVisible: false,
    formCurrentNode: {},
  });
  const activeName = ref('form');
  const auditName = ref('audit');
  const footerStyle = ref({
    height: '220px',
    width: '100%',
    overFlow: 'auto',
    color: '#fff',
    backgroundColor: '#ffffff',
    zIndex: '123',
    padding: '0px 0px',
    position: 'fixed',
    bottom: '0px',
    right: '0px',
  });

  function changeActive(activeKey) {
    if (activeKey == 'flow') {
      processVisble.value = true;
    } else {
      processVisble.value = false;
    }
  }
  function elementClick(element: { id: string | number }) {
    if (element) {
      designerData.nodeLogs = designerData.nodeMap[element.id] || [];
      infoOpen.value = true;
    } else {
      designerData.nodeLogs = [];
    }
  }
  async function getDetailInfo() {
    let query: any = {
      id: props.processId,
    };
    let data = await getBPMN(query);
    flowContent.value = data.flowContent;
    flowViewer.value = data.flowViewer;
    designerData.process = data.process;
    designerData.task = data.task;
    let content = JSON.parse(data.scheme.content);
    let wfData = content.wfData;
    let currentNode;
    const auditNode = wfData.find((t) => t.id == data.flowViewer.unfinishedTaskSet[0]);
    // 流程已结束
    if (data.process.isFinished == 1) {
      data.flowViewer.finishedTaskSet.forEach((finishElement) => {
        wfData.forEach((element) => {
          if (element.type == 'bpmn:StartEvent') {
            currentNode = element;
          }
          if (finishElement == element.id && element.type == 'bpmn:Task') {
            if (!element.isInherit) {
              currentNode = element;
            }
          }
        });
      });
      mapConfig.value = currentNode.mapConfig;
    } else {
      if (auditNode && auditNode.isInherit) {
        currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
        mapConfig.value = currentNode.mapConfig;
        footerStyle.value.width = mapConfig.value?.isShowMap ? '60%' : '100%';
      } else {
        currentNode = auditNode;
        var currentMapNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
        mapConfig.value = currentMapNode.mapConfig;
        footerStyle.value.width = mapConfig.value?.isShowMap ? '60%' : '100%';
      }
    }
    if (currentNode && currentNode.authFields.length > 0) {
      formVisble.value = true;
    } else {
      activeName.value = 'flow';
      processVisble.value = true;
    }
    designerData.formCurrentNode = currentNode;
    formConfig.value = currentNode.authFields;
    setLogsAndTasks(data.logs, data.tasks);
    // getBtns();
  }

  function setLogsAndTasks(logs: any[], tasks: any[]) {
    const res: logsType[] = [];
    const taskMap = {};
    const nodeMap = {};
    const userLogs: any[] = [];

    tasks.forEach(
      (task: {
        unitId: string | number;
        unitName: any;
        createDate: any;
        type: number;
        userId: any;
        userName: any;
      }) => {
        nodeMap[task.unitId] = nodeMap[task.unitId] || [
          {
            unitId: task.unitId,
            name: task.unitName,
            userIds: [],
            userNames: [],
            des: '正在审核',
            time: `当前-创建时间:${dateFormat(task.createDate)}`,
            type: 'blue',
            isFinish: false,
          },
        ];

        if (task.type == 2) {
          taskMap[task.unitId + task.type] = taskMap[task.unitId + task.type] || {
            unitId: task.unitId,
            name: task.unitName,
            userIds: [],
            userNames: [],
            des: '正在查阅',
            time: `当前-创建时间:${dateFormat(task.createDate)}`,
            type: 'blue',
          };
          taskMap[task.unitId + task.type].userIds.push(task.userId);
          taskMap[task.unitId + task.type].userNames.push(task.userName);

          if (nodeMap[task.unitId].length == 1) {
            nodeMap[task.unitId].push({
              unitId: task.unitId,
              name: task.unitName,
              userIds: [],
              userNames: [],
              des: '正在查阅',
              time: `当前-创建时间:${dateFormat(task.createDate)}`,
              type: 'blue',
              isFinish: true,
            });
          }
          nodeMap[task.unitId][1].userIds.push(task.userId);
          nodeMap[task.unitId][1].userNames.push(task.userName);
        } else {
          taskMap[task.unitId] = taskMap[task.unitId] || {
            unitId: task.unitId,
            name: task.unitName,
            userIds: [],
            userNames: [],
            des: '正在审核',
            time: `当前-创建时间:${dateFormat(task.createDate)}`,
            type: 'blue',
          };
          taskMap[task.unitId].userIds.push(task.userId);
          nodeMap[task.unitId][0].userIds.push(task.userId);
          taskMap[task.unitId].userNames.push(task.userName);
          nodeMap[task.unitId][0].userNames.push(task.userName);
        }
      },
    );

    for (let key in taskMap) {
      res.push(taskMap[key]);
    }

    for (let key in nodeMap) {
      nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
    }
    logs.reverse();
    logs.forEach(
      (log: {
        unitId: string;
        unitName: any;
        userId: string;
        userName: string;
        des: string;
        operationName: string;
        createDate: any;
        taskType: number;
        operationCode: string;
        stampImg: any;
      }) => {
        res.push({
          unitId: log.unitId,
          name: log.unitName,
          userIds: [log.userId],
          userNames: [log.userName],
          des: log.des ? log.des : log.operationName,
          time: dateFormat(log.createDate),
          type: 'gray',
        });

        nodeMap[log.unitId] = nodeMap[log.unitId] || [];
        nodeMap[log.unitId].push({
          unitId: log.unitId,
          name: log.unitName,
          userIds: [log.userId],
          userNames: [log.userName],
          time: dateFormat(log.createDate),
          des: log.des ? log.des : log.operationName,
          type: 'gray',
          isFinish: true,
        });
        if (log.taskType == 1 && !['sign'].includes(log.operationCode)) {
          // 右侧显示审核记录
          // const userLogIndex = userLogs.findIndex((t) => t.id == log.unitId);
          // if (userLogIndex == -1) {
          userLogs.push({
            id: log.unitId,
            name: log.unitName,
            user: log.userName,
            time: dateFormat(log.createDate),
            des: log.des,
            img: log.stampImg,
          });
          // }
        }
      },
    );

    designerData.logs = res;
    designerData.nodeMap = nodeMap;
    designerData.userLogs = userLogs.sort(function (a, b) {
      return a.time < b.time ? -1 : 1;
    });
  }
  // function closePage() {
  //   tabStore.closeTabByKey('/dashboard/task_look_preview/detail?processId=' + processId, router);
  // }
  // 解析组件获取图斑组件
  const chooseLayer = ref<string>('');
  const geomfield = ref<string>('');

  function findValue(obj, targetKey) {
    for (var key in obj) {
      if (typeof obj[key] === 'object') {
        // 如果当前值是对象，则递归调用findValue
        var result = findValue(obj[key], targetKey);
        if (result !== undefined && result == 'MapGeom') {
          return result;
        }
      } else if (key === targetKey && obj[key] == 'MapGeom') {
        // 如果当前键等于目标键，则返回对应的值
        chooseLayer.value = obj['mapSetData'].chooseLayer;
        geomfield.value = obj['field'];
        return obj[key];
      }
    }
  }

  function getFormSuccess(formData) {
    if (mapConfig.value.isShowMap) {
      handlerShowGeomtrys(designerData.formCurrentNode, formData);
    }
  }

  async function handlerShowGeomtrys(currentNode, formData) {
    findValue(currentNode.authFields, 'component');
    let layer: string = chooseLayer.value;
    if (!layer) {
      createMessage.error('图斑未绑定图层服务！');
      return;
    }
    let geomfiledValue = geomfield.value;
    let gids = '';
    try {
      geomfiledValue = geomfiledValue.toLowerCase();
      gids = formData[geomfiledValue];
      // 根据ids获取图斑
      if (gids) {
        try {
          let getGeomPrams = {
            TableName: layer,
            FieldName: 'gid',
            FieldValue: gids?.split(","),
            page: 1,
            limit: 999,
            key: null,
          };
          getGeom(getGeomPrams).then((res) => {
            let geoms = [];
            if (res) {
              if (res.items?.length > 0) {
                res.items.forEach((item, index) => {
                  let geom = {
                    key: item.gid,
                    mapgeom: item.geometry,
                  };
                  geoms.push(geom);
                });
              }
              // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
              MapboxComponent.value.handlerDraw('Details', geoms, false);
            } else {
              createMessage.error('当前数据没有图斑！');
            }
          });
        } catch (e) {
          createMessage.error('当前数据没有图斑！');
        }
      } else {
        createMessage.error('当前数据没有图斑！');
      }
    } catch {
      createMessage.error('获取图斑数据失败！');
    }
  }
  function onMapboxLoad() {}

  // 图片预览
  const isShowImagePreview = ref<Boolean>(false);
  const closeImagePreview = () => {
    isShowImagePreview.value = false;
  };
  const globalImagePreviewUrl = ref<String>();
  const formFileStore = userFormFileStore();
  const formFileState = storeToRefs(formFileStore);
  watch(formFileState.url, (newValue, oldValue) => {
    isShowImagePreview.value = true;
    globalImagePreviewUrl.value = newValue;
  });

  onBeforeMount(() => {
    getDetailInfo();
  });
</script>
<style lang="less" scoped>
  ::v-deep .ant-tabs-nav-wrap {
    padding-left: 10px;
  }
  ::v-deep .ant-layout {
    height: 100%;
    background-color: @component-background;
  }
  ::v-deep .ant-layout-sider-children {
    border-left: 1px solid rgba(5, 5, 5, 0.06);
  }
  ::v-deep .ant-divider-vertical {
    height: 100%;
  }
  .info-box {
    display: inline-block;
    width: 300px;
    position: absolute;
    right: 0;
    margin-top: 40px;
  }

  .ant-timeline-item-content {
    .title {
      color: #909399;
      line-height: 1;
      margin-bottom: 8px;
      font-size: 13px;
    }

    .type-title {
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .link {
      color: #409eff;
    }
  }

  .preview-box {
    height: 100%;

    .btn-box {
      padding: 10px;
      justify-content: flex-end;
      display: flex;
    }
  }
  ::v-deep .vben-page-wrapper-content {
    height: 100%;
    margin: 0 0 0 16px;
  }
  .form-box {
    width: 480px;
  }

  .approval-column {
    padding: 10px;
  }
  ::v-deep .ant-layout .ant-layout-sider {
    padding-left: 10px;
    background-color: @component-background;
    flex: 0 0 360px !important;
    max-width: 360px !important;
    min-width: 360px !important;
    width: 360px !important;
  }
  ::v-deep .vben-page-wrapper .vben-page-wrapper-content {
    height: 98%;
  }
  .l-task-btns {
    .ant-btn {
      margin: 0;
      margin-top: 8px;
      margin-right: 8px;
    }
  }
  ::v-deep .ant-modal-footer {
    display: none !important;
    height: 0px !important;
  }
  ::v-deep .ant-layout-footer {
    padding: 0px 20px !important;
    overflow: auto !important;
  }
  .form-container {
    float: left;
    width: 60%;
  }
  .maper-container {
    float: left;
    width: 40%;
    padding: 20px;
    height: 100%;
  }

  .l-from-body {
    padding: 10px 30px;
  }
  ::v-deep .ant-layout-footer {
    background-color: @component-background;
    height: 230px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    .ant-tabs {
      height: 230px;
    }

    .ant-tabs-nav {
    }
    .ant-tabs-content-holder {
      height: 200px;
      padding-bottom: 10px;
      width: 100%;
      overflow: auto;
    }
  }
</style>
