<script name="flowRecordDialog" setup>
import { watch, ref, reactive } from 'vue'
import FlowRecord from '@/pages/toDoCenter/components/flowRecord.vue'
import { changeRecordDetail } from '@/http/apis/toDoCenter/todoList'
import Accessory from '@/components/accessory/index.vue'
import store from '@/store'
import CustomModule from '@/pages/projectStoreManage/projectStore/projectDetail/components/customModule.vue'
import FinalInfo from '@/pages/projectStoreManage/projectStore/projectDetail/components/finalInfo.vue'
const { statusOptions, constructionLevel, cloudTypeOptions, fourSystem, businessTerritory } = store.dictStore.globalDicts || {},
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    flowData: {
      type: Array,
      default: undefined
    },
    id: {
      type: String,
      default: undefined
    }
  }),
  emits = defineEmits(['close']),
  column = [
    {
      label: '字段',
      key: 'fieldName',
      prop: 'fieldName',
      width: 180
    },
    {
      label: '调整前',
      key: 'oldData',
      slot: 'oldData'
    },
    {
      label: '调整后',
      key: 'newData',
      slot: 'newData'
    }
  ],
  column1 = reactive([
    {
      label: '依据项',
      key: 'title',
      prop: 'title'
    },
    {
      label: '依据文件名',
      key: 'fileName',
      prop: 'fileName'
    },
    {
      label: '附件',
      slot: 'file'
    }
  ]),
  column2 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '业务编号',
      key: 'oid',
      prop: 'oid'
    },
    {
      label: '业务名称',
      key: 'matterName',
      prop: 'matterName'
    },
    {
      label: '所属单位',
      key: 'orgName',
      prop: 'orgName'
    }
  ]),
  data = ref(),
  flowData = ref(),
  getData = async () => {
    const res = await changeRecordDetail(props.id)
    data.value = []
    res.data.changes && Object.keys(res.data.changes).forEach(i => {
      data.value.push({
        fieldName: i,
        newData: res.data.changes[i].new,
        oldData: res.data.changes[i].old,
        fieldKey: res.data.changes[i].fieldKey
      })
    })
    flowData.value = {
      processProgressVo: {
        ...res.data.process.processProgressVo,
        progressInfo: changeProgressInfo(res.data.process.processProgressVo.progressInfo)
      }
    }
  },
  changeProgressInfo = (data) => {
    data.forEach(res => {
      if (res.children) {
        const nodeIds = []
        const newChildren = []
        res.children.forEach(child => {
          if (!nodeIds.includes(child.nodeId)) {
            nodeIds.push(child.nodeId)
            newChildren.push({
              nodeId: child.nodeId,
              approvalMode: child.approvalMode,
              name: child.name,
              nodeType: child.nodeType,
              list: [{ ...child }],
              userIds: [child.userId]
            })
          } else {
            newChildren.find(i => i.nodeId === child.nodeId).list.push(child)
            newChildren.find(i => i.nodeId === child.nodeId).userIds.push(child.userId)
          }
        })

        res.children = newChildren
      } else {
        res['userIds'] = [res.userId]
      }
    })
    return data
  },
  isDataNames = ['isSuperOrg', 'isHigherSuperOrg', 'isFirst', 'isDigitalReform', 'isCloud', 'isTemporaryAugment', 'includeApplication'],
  filesName = ['preliminaryPlanFile', 'supportingMaterialsFile', 'calculationTotalInvestmentFile', 'mainResponsibilitiesApplicantFile', 'projectApplicationForm', 'constructionPlanFile']
watch(
  () => props.visible,
  async val => {
    if (val) {
      getData()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="调整信息及审核意见"
    width="90%"
    destroy-on-close
    @close="emits('close')"
  >
    <div style="max-height: 800px" class="overflow-y-auto">
      <h2 class="mb-8 bold text-16">调整的信息</h2>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :pagination="false"
        class="mb-16"
      >
        <template #oldData="{scope}">
          <template v-if="scope.row.fieldKey==='buildBasis'">
            <table-list
              :column="column1"
              :pagination="false"
              :empty-temp="false"
              :data="JSON.parse(scope.row.oldData)"
            >
              <template #file="fileData">
                <p v-for="(item,fileIndex) in fileData.scope.row.fileList" :key="fileIndex" class="mb-4">
                  <accessory :file-name="item.originalFileName" :file-id="item.id" :is-down-load="true" />
                </p>
              </template>
            </table-list>
          </template>
          <template v-else-if="scope.row.fieldKey==='isInnovateWholeProvinceShare'">{{ scope.row.oldData==='true'?'是':'否' }}</template>
          <template v-else-if="scope.row.fieldKey==='status'">{{ statusOptions[scope.row.oldData]?.name }}</template>
          <template v-else-if="isDataNames.includes(scope.row.fieldKey)">{{ scope.row.oldData==='1'?'是':'否' }}</template>
          <template v-else-if="scope.row.fieldKey==='projectType'">{{ scope.row.oldData==='01'?'首次建设':scope.row.oldData==='02'?'迭代升级':scope.row.oldData==='03'?'结转建设':'-' }}</template>
          <template v-else-if="scope.row.fieldKey==='buildLevel'">{{ constructionLevel[scope.row.oldData] }}</template>
          <template v-else-if="scope.row.fieldKey==='bizDomain'">{{ businessTerritory[scope.row.oldData] }}</template>
          <template v-else-if="scope.row.fieldKey==='cloudType'">{{ scope.row.oldData.split(',').map(i=>cloudTypeOptions[i]).join('、')|| '-' }}</template>
          <template v-else-if="scope.row.fieldKey==='fourSystems'">{{ fourSystem[scope.row.oldData] }}</template>
          <template v-else-if="scope.row.fieldKey==='safetyInputDescribe'">
            <el-descriptions
              v-for="(item,index) in JSON.parse(scope.row.oldData)"
              :key="index"
              :column="1"
              border
              class="mb-16"
            >
              <el-descriptions-item label="投入项">
                {{ item.safetyInputTitle||'-' }}
              </el-descriptions-item>
              <el-descriptions-item label="内容描述：">
                {{ item.safetyInputDescribe ||'-' }}
              </el-descriptions-item>
              <el-descriptions-item label="金额（万元）：">
                {{ item.safetyInputAmount }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <template v-else-if="filesName.includes(scope.row.fieldKey)">
            <p v-for="(item,index) in scope.row.oldData&&JSON.parse(scope.row.oldData)" :key="index" class="mb-4">
              <accessory :file-name="item.originalFileName" :file-id="item.id" />
            </p>
          </template>
          <template v-else-if="scope.row.fieldKey==='coreBusiness'">
            <table-list
              :column="column2"
              :data="scope.row.oldData?JSON.parse(scope.row.oldData):[]"
              :pagination="false"
              :small="true"
            />
          </template>
          <template v-else-if="scope.row.fieldKey==='safetyInputModular'">
            <div v-for="(item , moduleNum) in scope.row.oldData&&JSON.parse(scope.row.oldData)" :key="moduleNum">
              <custom-module
                :data="item"
                :module-num="moduleNum"
              />
            </div>
          </template>
          <template v-else-if="scope.row.fieldKey==='finalAcceptanceMaterials'">
            <final-info :detail-data="{finalAcceptanceMaterials:scope.row.oldData}" :is-show-app="false" />
          </template>
          <p v-else>{{ scope.row.oldData }}</p>
        </template>
        <template #newData="{scope}">
          <template v-if="scope.row.fieldKey==='buildBasis'">
            <table-list
              :column="column1"
              :pagination="false"
              :empty-temp="false"
              :data="JSON.parse(scope.row.newData)"
            >
              <template #file="fileData">
                <p v-for="(item,fileIndex) in fileData.scope.row.fileList" :key="fileIndex" class="mb-4">
                  <accessory :file-name="item.originalFileName" :file-id="item.id" :is-down-load="true" />
                </p>
              </template>
            </table-list>
          </template>
          <template v-else-if="scope.row.fieldKey==='isInnovateWholeProvinceShare'">{{ scope.row.newData==='true'?'是':'否' }}</template>
          <template v-else-if="scope.row.fieldKey==='status'">{{ statusOptions[scope.row.newData]?.name }}</template>
          <template v-else-if="isDataNames.includes(scope.row.fieldKey)">{{ scope.row.newData==='1'?'是':'否' }}</template>
          <template v-else-if="scope.row.fieldKey==='projectType'">{{ scope.row.newData==='01'?'首次建设':scope.row.newData==='02'?'迭代升级':scope.row.newData==='03'?'结转建设':'-' }}</template>
          <template v-else-if="scope.row.fieldKey==='buildLevel'">{{ constructionLevel[scope.row.newData] }}</template>
          <template v-else-if="scope.row.fieldKey==='bizDomain'">{{ businessTerritory[scope.row.newData] }}</template>
          <template v-else-if="scope.row.fieldKey==='cloudType'">{{ scope.row.newData.split(',').map(i=>cloudTypeOptions[i]).join('、')|| '-' }}</template>
          <template v-else-if="scope.row.fieldKey==='fourSystems'">{{ fourSystem[scope.row.newData] }}</template>
          <template v-else-if="scope.row.fieldKey==='safetyInputDescribe'">
            <el-descriptions
              v-for="(item,index) in JSON.parse(scope.row.newData)"
              :key="index"
              :column="1"
              border
              class="mb-16"
            >
              <el-descriptions-item label="投入项">
                {{ item.safetyInputTitle||'-' }}
              </el-descriptions-item>
              <el-descriptions-item label="内容描述：">
                {{ item.safetyInputDescribe ||'-' }}
              </el-descriptions-item>
              <el-descriptions-item label="金额（万元）：">
                {{ item.safetyInputAmount }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <template v-else-if="scope.row.fieldKey==='safetyInputModular'">
            <div v-for="(item , moduleNum) in scope.row.newData&&JSON.parse(scope.row.newData)" :key="moduleNum">
              <custom-module
                :data="item"
                :module-num="moduleNum"
              />
            </div>
          </template>
          <template v-else-if="filesName.includes(scope.row.fieldKey)">
            <p v-for="(item,index) in scope.row.newData&&JSON.parse(scope.row.newData)" :key="index" class="mb-4">
              <accessory :file-name="item.originalFileName" :file-id="item.id" />
            </p>
          </template>
          <template v-else-if="scope.row.fieldKey==='coreBusiness'">
            <table-list
              :column="column2"
              :data="scope.row.newData?JSON.parse(scope.row.newData):[]"
              :pagination="false"
              :small="true"
            />
          </template>
          <template v-else-if="scope.row.fieldKey==='finalAcceptanceMaterials'">
            <final-info :detail-data="{finalAcceptanceMaterials:scope.row.newData}" :is-show-app="false" />
          </template>
          <p v-else>{{ scope.row.newData }}</p>
        </template>
      </table-list>
      <h2 class="mb-8 bold text-16">流程记录</h2>
      <flow-record :flow-data="flowData?.processProgressVo?.progressInfo||[]" />
    </div>
  </el-dialog>
</template>
