<template>
  <div class="w-[98%] mx-auto pb-15">
    <a-button type="primary" @click="router.go(-1)" class="my-4">返回</a-button>

    <a-collapse v-model:activeKey="activeKey" :expand-icon-position="expandIconPosition">
      <a-collapse-panel key="1" header="地块调查">
        <a-row>
          <a-col :span="24" class="border border-bt" v-for="v in data?.S2?.baseDetails">
            <a-row :key="v.bgfjlj" v-if="v.cbdc && data.dkxx.dclx != 2">
              <a-col :span="6">
                <a-row>
                  <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4"> 初步调查报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4" v-if="v.bgfjlj == null || v.bgfjlj == ''"><span>未上传</span></a-col>
                  <a-col :span="4" class="py-4 pl-4" v-else
                    ><a-button type="primary" size="small" @click="down(v.bgfjlj, v.bgfjljmc, '初步调查报告')">下载</a-button></a-col
                  >
                </a-row>
              </a-col>
              <a-col :span="9">
                <a-row>
                  <a-col :span="4" class="bg-[#F4F7F9] py-4 pl-4"> 初步调查检测报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4" v-if="v.jcbglj == null || v.jcbglj == ''">
                    <a-space>
                      <span>未上传</span>
                    </a-space>
                  </a-col>
                  <a-col :span="4" class="py-4 pl-4" v-else>
                    <a-space>
                      <a-button type="primary" size="small" @click="down(v.jcbglj, v.jcbgljmc, '初步调查检测报告')">下载</a-button>
                    </a-space>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" class="border" v-for="v in data?.S2?.baseDetails">
            <a-row :key="v.bgfjlj" v-if="v.xxdc && data.dkxx.dclx != 1">
              <a-col :span="6">
                <a-row>
                  <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4"> 详细调查报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4"
                    ><a-button type="primary" size="small" @click="down(v.bgfjlj, v.bgfjljmc, '详细调查报告')">下载</a-button></a-col
                  >
                </a-row>
              </a-col>
              <a-col :span="9">
                <a-row>
                  <a-col :span="4" class="bg-[#F4F7F9] py-4 pl-4"> 详细调查检测报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4">
                    <a-space>
                      <a-button type="primary" size="small" @click="down(v.jcbglj, v.jcbgljmc, '详细调查检测报告')">下载</a-button>
                    </a-space>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <template #extra> <a-button type="primary" @click.prevent="handleClick($event, 'S2')">基本信息</a-button> </template>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="风险评估" v-if="data?.S3">
        <a-row>
          <a-col :span="24" class="border">
            <a-row>
              <a-col :span="6">
                <a-row>
                  <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4"> 风险评估报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4"
                    ><a-button type="primary" @click="down(data?.S3?.baseDetails?.bgfjlj, data?.S3?.baseDetails?.bgfjljmc, '风险评估报告')" size="small">下载</a-button></a-col
                  >
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <template #extra> <a-button type="primary" @click.prevent="handleClick($event, 'S3')">基本信息</a-button> </template>
      </a-collapse-panel>
      <a-collapse-panel key="3" :header="getName()" v-if="data?.S4 || data?.S5 || data?.S10">
        <a-row>
          <a-col :span="24" class="border">
            <a-row>
              <a-col :span="6">
                <a-row>
                  <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4"> {{ getName() }} </a-col>
                  <a-col :span="4" class="py-4 pl-4">
                    <a-space>
                      <template v-for="v in S?.baseDetails" :key="v.bgfjlj">
                        <a-button v-if="v?.bgfjlj" type="primary" size="small" @click="down(v?.bgfjlj, v.bgfjljmc, getName())">下载</a-button>
                      </template>
                    </a-space>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <template #extra> <a-button type="primary" @click.prevent="handleClick($event, 'S')">基本信息</a-button> </template>
      </a-collapse-panel>
      <a-collapse-panel key="4" :header="`${isNumber}效果评估`" v-if="data?.S6">
        <a-row>
          <a-col :span="24" class="border boder-br">
            <a-row v-if="S6bzshow.length > 0">
              <a-col :span="6">
                <a-row>
                  <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4 min-w-250px">{{ isNumber }}效果评估报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4">
                    <a-space>
                      <template v-for="v in data.S6?.baseDetails">
                        <a-button v-if="v?.bgfjlj" @click="down(v?.bgfjlj, v.bgfjljmc, `${isNumber}效果评估报告`)" type="primary" size="small">下载</a-button>
                      </template>
                    </a-space>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="9" v-if="S6jcshow.length > 0">
                <a-row>
                  <a-col :span="4" class="bg-[#F4F7F9] py-4 pl-4 min-w-250px"> {{ isNumber }}效果评估检测报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4">
                    <a-space>
                      <template v-for="v in data.S6?.baseDetails">
                        <a-button v-if="v?.jcbglj" type="primary" size="small" @click="down(v?.jcbglj, v.jcbgljmc, `${isNumber}效果评估检测报告`)">下载</a-button>
                      </template>
                    </a-space>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <template #extra> <a-button type="primary" @click.prevent="handleClick($event, 'S6')">基本信息</a-button> </template>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import type { CollapseProps } from 'ant-design-vue';
  import { getDkDetail } from '@/api/common/api';
  import { downloadFile } from '/@/api/common/api';
  import { useRouter } from 'vue-router';

  let router = useRouter();
  const param = ref<any>(router.currentRoute.value.query);
  const isNumber = ref('');
  // const current = ref(1);
  const data = ref();
  const S6bzshow = ref<any>();
  const S6jcshow = ref<any>();

  const emit = defineEmits(['handClick']);
  const activeKey = ref(['1', '2', '3', '4']);
  // const steps = ref([
  //   {
  //     title: '地块调查',
  //   },
  //   {
  //     title: '风险评估',
  //   },
  //   {
  //     title: '',
  //   },
  //   {
  //     title: '',
  //   },
  // ]);
  const S = ref<any>();

  const expandIconPosition = ref<CollapseProps['expandIconPosition']>('left');

  async function init() {
    const res = await getDkDetail({ wrdkid: param.value.wrdkid });
    // 排序
    // const sortedKeys = Object.keys(res).sort();
    // const sortedData = {};
    // sortedKeys.forEach((key) => {
    //   sortedData[key] = res[key];
    // });

    // data.value = sortedData;
    data.value = res;
    isNumber.value =
      data.value.S6.pgtype === '1' ? '风险管控' : data.value.S6.pgtype === '2' ? '修复' : data.value.S6.pgtype === '3' ? '风险管控及修复' : '';
    // Object.keys(res).forEach((v) => {
    //   if (v == 'S4') {
    //     current.value = 3;
    //     steps.value[2].title = '风险管控';
    //   } else if (v == 'S5') {
    //     current.value = 3;
    //     steps.value[2].title = '修复';
    //   } else if (v == 'S10') {
    //     current.value = 3;
    //     steps.value[2].title = '风险管控及修复';
    //   } else if (v == 'S6') {
    //     current.value = 4;
    //     steps.value[3].title = '效果评估';
    //   }
    // });
    if (data?.value?.S6?.baseDetails) {
      S6bzshow.value = [];
      S6jcshow.value = [];
      data?.value?.S6?.baseDetails.forEach((item) => {
        if (item.jcbglj) S6jcshow.value.push(1);
        if (item.bgfjlj) S6bzshow.value.push(1);
      });
    }
  }
  init();

  // 获取字段名称
  function getName() {
    if (Object.keys(data.value).includes('S4')) {
      S.value = data.value.S4;
      return '风险管控';
    }
    if (Object.keys(data.value).includes('S5')) {
      S.value = data.value.S5;
      return '修复';
    }
    if (Object.keys(data.value).includes('S10')) {
      S.value = data.value.S10;
      return '风险管控及修复';
    }
  }

  function handleClick(event, v) {
    event.stopPropagation();
    emit('handClick', v, data);
  }
  function down(url, name, type) {
    let arr = url.split(',');
    let arrmc = name.split(',');
    if (arr.length > 0) {
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        let fileExtension = element.split('.').pop();
        downloadFile('/sys/common/static' + element, `${arrmc[index]}-${type}.${fileExtension}`);
      }
      return;
    }
  }
</script>

<style lang="less" scoped>
  :deep(.steps) {
    box-shadow: 0 2px 7px 0 #bfc1c4;
  }

  :deep(.ant-steps) {
    width: 95%;
    margin: 0 auto;
  }

  :deep(.border) {
    border: 1px solid #e6e6e6;
    padding-left: 0 !important;
  }

  :deep(.border-bt) {
    border-bottom: 0 !important;
  }

  :deep(.boder-br) {
    border-right: 0;
  }
</style>
