<template>
  <div style="margin: 1% 1% 1% 1%">
    <div style="margin: 2% 0 2% 0">
      <el-button type="primary" round @click="handleProjectBoardInfo" :loading="btnLoading1">
        导出晾晒看报</el-button
      >
      <el-button type="primary" round @click="handleTimeOutInfo" :loading="btnLoading2">
        导出晾晒比分评分表</el-button
      >
      <el-button type="primary" round @click="handleProjectResult" :loading="btnLoading3">
        导出项目成果</el-button
      >
      <el-button type="primary" style="float: right; margin-right: 2%" @click="getInfo">
        查询</el-button
      >
    </div>
    <div>
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :loading="tableLoading"
        bordered
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column && record && column.dataIndex === 'reformName'">
            {{ getReformName(record.reformName) }}
          </template>
          <template v-if="column && record && column.dataIndex === 'superLeader'">
            {{ getSuperLeader(record.superLeader) }}
          </template>
          <template v-if="column && record && column.dataIndex === 'redFlagCount'">
            <div style="display: flex; justify-content: center">
              <div v-for="(item,index) in getRedFlag(record.redFlagCount)" :key="index">
                <img src="@/assets/images/红旗.png" alt="" class="redFlag" />
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  //ts语法
  import { queryBoardInfo, projectBoardInfo, timeOutInfo, projectResult } from './api';
  import { onMounted, ref, nextTick, computed } from 'vue';
  import { downloadFile } from '@/api/common/api';
  import dayjs from 'dayjs';
  import { message } from 'ant-design-vue';
  const tableLoading = ref(false);
  const btnLoading1 = ref(false);
  const btnLoading2 = ref(false);
  const btnLoading3 = ref(false);
  const dataSource = ref([]);
  const columns = [
    {
      title: '湖州市公立医院改革与高质量发展示范项目各任务信息化项目建设推进晾晒表',
      children: [
        {
          title: '任务名称',
          width: 250,
          dataIndex: 'reformName',
          customCell: (_, index) => {
            return {
              rowSpan: getRowSpanMap('reformName')[index],
            };
          },
        },

        {
          title: '指导处室',
          width: 150,
          dataIndex: 'superLeader',
          customCell: (_, index) => {
            return {
              rowSpan: getRowSpanMap('superLeader')[index],
            };
          },
        },
        {
          title: '项目名称',
          width: 150,
          dataIndex: 'projectName',
        },
        {
          title: '项目所处阶段',
          width: 250,
          dataIndex: 'currentStage',
        },

        {
          title: '项目整体进度(%)',
          width: 150,
          dataIndex: 'totalPercent',
        },
        {
          title: '上级资金执行(%)',
          width: 200,
          dataIndex: 'superiorFundPayRate',
        },
        {
          title: '总分',
          width: 200,
          dataIndex: 'score',
        },
        {
          title: '红旗数量',
          width: 200,
          dataIndex: 'redFlagCount',
        },
      ],
    },
  ];
  const getInfo = async () => {
    tableLoading.value = true;
    const res = await queryBoardInfo();
    tableLoading.value = false;
    console.log(res);
    dataSource.value = res;
  };
  const nowTime = computed(() => {
    return dayjs().format('YYYY-MM-DD HH:mm:ss');
  });
  function handleProjectBoardInfo() {
    btnLoading1.value = true;
    downloadFile('/export/projectBoardInfo', `晾晒看报${nowTime.value}.xlsx`, {}).then((_) => {
      btnLoading1.value = false;
    });
  }
  function handleTimeOutInfo() {
    btnLoading2.value = true;
    downloadFile('/export/timeOutInfo', `评分表${nowTime.value}.xlsx`, {})
      .then((_) => {
        btnLoading2.value = false;
      })
      .catch((err) => {
        message.error(err.message);
      });
  }
  function handleProjectResult() {
    btnLoading3.value = true;
    downloadFile('/export/projectResult', `项目成果${nowTime.value}.xlsx`, {}).then((_) => {
      btnLoading3.value = false;
    });
  }
  //合并行
  const getRowSpanMap = (name) => {
    const spans = [];
    let k = 0; // 当前位置索引

    while (k < dataSource.value.length) {
      const current = dataSource.value[k][name];
      let count = 1;

      while (k + count < dataSource.value.length && dataSource.value[k + count][name] === current) {
        count++;
      }

      // 设置当前位置的 rowSpan 为计数，后续位置设为 0
      spans[k] = count;
      for (let i = 1; i < count; i++) {
        spans[k + i] = 0;
      }

      k += count; // 移动到下一个不同元素的位置
    }
    return spans;
  };
  //显示文本
  const getReformName = (name: any) => {
    let text = '';
    switch (name) {
      case '1':
        text = '2+N紧密型城市医疗集团建设';
        break;
      case '2':
        text = '9+9+N县域医共体建设';
        break;
      case '3':
        text = '市县公立医院妇幼能力建设';
        break;
      case '4':
        text = '打造长三角市域医学高地';
        break;
      case '5':
        text = '高水平县级医院建设';
        break;
      case '6':
        text = '公立医院院前急救与院内救治服务融合发展';
        break;
      case '7':
        text = '医共体下三医联动改革';
        break;
      case '8':
        text = '智慧医院服务能力提档升级';
        break;
      case '9':
        text = '数字健康大脑建设';
        break;
      case '10':
        text = '高层次人才引育';
        break;
      case '11':
        text = '舒心就医';
        break;
      case '12':
        text = '中医药固本培元';
        break;
      case '13':
        text = '公立医院运营管理';
        break;
      case '14':
        text = '公立医院党建全行业引领改革工程';
        break;
      case '15':
        text = '高质量临床重点专科建设';
        break;
      default:
        text = '未知';
    }
    return text;
  };
  const getSuperLeader = (name: any) => {
    let text = '';
    switch (name) {
      case '1':
        text = '医政处';
        break;
      case '2':
        text = '妇幼处';
        break;
      case '3':
        text = '科教处';
        break;
      case '4':
        text = '体改处';
        break;
      case '5':
        text = '规信处';
        break;
      case '6':
        text = '中医处';
        break;
      case '7':
        text = '财审处';
        break;
      case '8':
        text = '机关党委';
        break;
      case '9':
        text = '组织人事处';
        break;
      default:
        text = '未知';
    }
    return text;
  };
  const getRedFlag = (length:any)=>{
  if(length){
    return Array.from({ length }, (_, i) => i);
  }else{
    return 
  }
  }
  onMounted(() => {
    getInfo();
  });
</script>

<style scoped>
  .redFlag {
    height: 20px;
  }
</style>
