<template>
  <!-- 项目管控过程资料 -->
  <div class="xmgkzlPage" v-loading="loadingData">
    <div class="projectMb">
      <span class="title">立项阶段</span>
    </div>
    <div class="box" v-for="(item, index) in projectApprovalFileList" :key="index">
      <el-form-item :label="`${item.name}:`">
        <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" />
        <!-- 文件列表展示 -->
        <div class="ggFileListShow">
          <div class="part flex" v-for="(img, index) in item.fileList" :key="index">
            <div class="name ellipsis" :title="img.name" @click="previewFile(img.url)">{{ img.name || '--' }}</div>
          </div>
        </div>
      </el-form-item>
    </div>

    <div class="projectMb">
      <span class="title">规划许可</span>
    </div>
    <div class="box" v-for="(item, index) in planningStageList" :key="index">
      <el-form-item :label="`${item.name}:`">
        <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" />
        <!-- 文件列表展示 -->
        <div class="ggFileListShow">
          <div class="part flex" v-for="(img, index) in item.fileList" :key="index">
            <div class="name ellipsis" :title="img.name" @click="previewFile(img.url)">{{ img.name || '--' }}</div>
          </div>
        </div>
      </el-form-item>
    </div>

    <div class="projectMb">
      <span class="title">施工许可</span>
    </div>
    <div class="box" v-for="(item, index) in constructionPermitsList" :key="index">
      <el-form-item :label="`${item.name}:`">
        <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" />
        <!-- 文件列表展示 -->
        <div class="ggFileListShow">
          <div class="part flex" v-for="(img, index) in item.fileList" :key="index">
            <div class="name ellipsis" :title="img.name" @click="previewFile(img.url)">{{ img.name || '--' }}</div>
          </div>
        </div>
      </el-form-item>
    </div>

    <div class="projectMb">
      <span class="title">竣工验收</span>
    </div>
    <div class="box" v-for="(item, index) in acceptanceMaterialList" :key="index">
      <el-form-item :label="`${item.name}:`">
        <el-input v-model="item.filieDescription" :disabled="true" style="width: 200px" />
        <!-- 文件列表展示 -->
        <div class="ggFileListShow">
          <div class="part flex" v-for="(img, index) in item.fileList" :key="index">
            <div class="name ellipsis" :title="img.name" @click="previewFile(img.url)">{{ img.name || '--' }}</div>
          </div>
        </div>
      </el-form-item>
    </div>
  </div>
</template>

<script setup>
import { getProjectFiles } from '@/api/sponeScreen/gcpjApi';
import bus from '@/bus';
import { onBeforeUnmount } from 'vue';

const { proxy } = getCurrentInstance();
const loadingData = ref(true);
const projectApprovalFileList = ref([]);
const { pro_project_approval } = proxy.useDict('pro_project_approval');
const planningStageList = ref([]);
const { planning_stage } = proxy.useDict('planning_stage');
const constructionPermitsList = ref([]);
const { construction_permits } = proxy.useDict('construction_permits');
const acceptanceMaterialList = ref([]);
const { acceptance_material } = proxy.useDict('acceptance_material');

// 获取项目过程资料
async function getDataList(projectNo) {
  loadingData.value = true;
  let res = await getProjectFiles({ projectNo: projectNo });
  if (res && res.code == 200) {
    let datas = res.data;
    // 立项资料
    projectApprovalFileList.value = [];
    getProjectTypeFileList(datas, 'pro_project_approval', projectApprovalFileList.value, pro_project_approval);

    // 规划许可
    planningStageList.value = [];
    getProjectTypeFileList(datas, 'planning_stage', planningStageList.value, planning_stage);

    // 施工许可
    constructionPermitsList.value = [];
    getProjectTypeFileList(datas, 'construction_permits', constructionPermitsList.value, construction_permits);

    // 竣工验收
    acceptanceMaterialList.value = [];
    getProjectTypeFileList(datas, 'acceptance_material', acceptanceMaterialList.value, acceptance_material);
  }
  loadingData.value = false;
}

// 转换
const getProjectTypeFileList = async (fileGroup, type, list, filterList) => {
  for (const key in fileGroup) {
    if (key === type) {
      if (Object.hasOwnProperty.call(fileGroup, key)) {
        const element = fileGroup[key];
        for (const item of element) {
          const info = filterList.value.find(it => it.value === item.dictData);
          if (!info) continue;
          const dictDatas = list.map(it => it.dictData);
          if (dictDatas.includes(item.dictData)) continue;
          list.push({
            fileList: item.fileList,
            dictData: item.dictData,
            dictType: item.dictType,
            filieDescription: item.filieDescription,
            projectNo: item.projectNo,
            name: info.label,
          });
        }
      }
    }
  }
};

// 预览
function previewFile(url) {
  window.open(url);
}

onMounted(() => {
  bus.on('getProjectData', v => {
    getDataList(v.projectNo);
  });
});
onBeforeUnmount(() => {
  bus.off('getProjectData');
});
</script>

<style lang="scss">
.xmgkzlPage {
  width: 100%;
  .projectMb {
    margin: 10px 0px;
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-indent: 24px;
    background: rgba(23, 180, 231, 0.5);
    .title {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
  }
  .box {
    .el-form-item__label {
      color: #c6c6c6;
      width: 270px;
    }
  }
}
</style>