<template>
  <div class="w-[98%] mx-auto pb-15">
    <a-button type="primary" @click="router.go(-1)" class="my-4">返回</a-button>
    <!-- <div class="py-10 steps my-4">
      <a-steps progress-dot :current="current" class="w-[95%] mx-auto">
        <a-step v-for="v in steps" :key="v.title" :title="v.title" />
      </a-steps>
    </div> -->

    <!-- <a-collapse v-model:activeKey="activeKey" :expand-icon-position="expandIconPosition">
      <a-collapse-panel v-for="(value, k, index) in data" :key="index + 1" :header="getName(k, value)">
        <a-row v-for="(v, ind) in value.baseDetails" :key="ind">
          <a-col :span="24" class="border border-bt">
            <a-row>
              <a-col :span="6">
                <a-row>
                  <a-col :span="9" class="bg-[#F4F7F9] py-4 pl-4"> {{ getDownName(v, k, ind) }} </a-col>
                  <a-col :span="4" class="py-4 pl-4">
                    <a-button type="primary" size="small" @click="down(v.bgfjlj, getDownName(v, k, ind))">下载</a-button>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="9" v-if="v.jcbglj">
                <a-row>
                  <a-col :span="4" class="bg-[#F4F7F9] py-4 pl-4"> {{ getDownName(v, k, ind) }}检测报告 </a-col>
                  <a-col :span="4" class="py-4 pl-4">
                    <a-space>
                      <a-button type="primary" size="small" @click="down(v.jcbglj, getDownName(v, k, ind))">下载</a-button>
                    </a-space>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <template #extra> <a-button type="primary" @click="handleClick('地块调查')">基本信息</a-button> </template>
      </a-collapse-panel> -->
    <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">
              <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, '初步调查报告')">下载</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, '初步调查检测报告')">下载</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">
              <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, '详细调查报告')">下载</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.bgfjlj, '详细调查检测报告')">下载</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, '风险评估报告')" 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?.S6">
        <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, 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="效果评估" 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"> 效果评估报告 </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, '效果评估')" 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"> 效果评估检测报告 </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, '效果评估')">下载</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 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;

    // 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) {
    let fileExtension = url.split('.').pop();
    downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
  }
</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>
