<template>
  <div class="w-full h-full relative flex justify-between items-center">
    <!-- 左侧面板 -->
    <Panel>
      <CardTitle>安全问题状态</CardTitle>

      <div class="w-full h-200px flex gap-25px">
        <chart :options="getPieOptions(data)" />
        <div class="flex flex-col justify-center items-center pr-20px">
          <div
            v-for="item in data"
            :key="item.name"
            class="w-200px flex justify-between items-center border-b border-b-dashed border-b-[#ccc] h-40px"
          >
            <span
              :style="{ borderColor: item.color }"
              class="w-10px h-10px border-2 border-solid rounded-full mr-2 block"
            ></span>
            <span class="w-120px font-bold">{{ item.name }}</span>
            <span class="font-bold italic">{{ item.value }}</span>
          </div>
        </div>
      </div>

      <CardTitle>安全问题类型</CardTitle>
      <div class="w-full h-250px flex gap-10px p-10px box-border justify-between items-center">
        <div class="bg-[rgba(29,66,110,0.6)] text-white w-full h-full flex-col flex-1">
          <div
            class="h-30px flex items-center justify-center border-b border-b-solid border-b-[#ccc] text-17px"
          >
            总计
          </div>
          <div class="w-full flex flex-col justify-center items-center h-[calc(100%-30px)]">
            <img src="@/assets/images/bg-security.png" class="w-60px h-60px" />
            <!-- <span class="font-bold italic text-20px color-[#31E4CF] mt-30px">1132</span> -->
            <DigitalFlop :config="config5" />
          </div>
        </div>
        <div class="bg-[rgba(29,66,110,0.6)] text-white h-full w-260px left-board">
          <ScrollBoard :config="config" @mouseover="mouseoverHandler" @click="clickHandler" />
        </div>
      </div>

      <CardTitle>施工问题数量排名</CardTitle>
      <div class="text-white h-350px w-full pt-10px center-board right-top-board">
        <ScrollBoard :config="config1" @mouseover="mouseoverHandler" @click="clickHandler" />
      </div>
    </Panel>

    <!-- 中间区域 -->
    <div
      class="h-full box-border pr-10px pl-10px middle-content flex-1 flex flex-col gap-10px justify-center"
    >
      <div class="w-full flex-1">
        <Panel style="width: 100%; overflow: hidden; display: flex; flex-direction: column;">
          <CardTitle>安全总览</CardTitle>
          <div class="w-full flex-1" ref="barchart">
            <Chart :options="chartOptions" />
          </div>
        </Panel>
      </div>
      <div class="w-940px h-300px">
        <Panel style="width: 100%; overflow: hidden;">
          <CardTitle>现场问题图片</CardTitle>
          <el-scrollbar>
            <div class="img-list h-240px w-full flex items-center gap-12px overflow-auto">
              <img class="h-200px" v-for="item in dataSource?.xcwttp || []" :src="item.che_upload_photo" :alt="item.che_problem_typename"></img>
            </div>
          </el-scrollbar>
        </Panel>
      </div>
    </div>

    <!-- 右侧面板 -->
    <Panel>
      <CardTitle>安全问题通报</CardTitle>
      <div class="text-white h-400px w-full center-board right-top-board">
        <ScrollBoard :config="config3" @mouseover="mouseoverHandler" @click="clickHandler" />
      </div>

      <CardTitle>责任问题单位排名</CardTitle>
      <div class="w-full box-border p-10px h-450px">
        <ScrollRankingBoard :config="config4" />
      </div>
    </Panel>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject } from 'vue';
import { ScrollBoard, ScrollRankingBoard, DigitalFlop } from '@kjgl77/datav-vue3';
import Panel from '@/components/Panel.vue';
import CardTitle from '@/components/CardTitle.vue';
import Chart from '@/components/Chart/index.vue';
import type { EChartsOption } from 'echarts';
import { invoke } from '@/api';
import { useRequest } from 'vue-hooks-plus';
import type { Ref } from 'vue';

type DataItem = {
  name: string;
  value: number;
  color: string;
};

const projectCode = inject<Ref<string[]>>('projectCode');
const dataSource = ref<{
    // 安全问题状态
    "aqwtzt": {
      // 通过率
      "passRate": number,
      // 逾期数
      "overdueCount": number,
      // 检查总数
      "checkTotal": 13,
      // 未整数
      "unprocessedCount": 0,
      // 已整数
      "processedCount": number
    },
    // 安全问题类型
    "aqwtlx": {
      // 总数
      "total": number,
      "data": [
        {
          // 标题
          "title": string,
          // 数量
          "num": number
        }
      ]
    },
    // 安全问题通报
    "aqwttb": [
      {
        // 发起时间
        "creation_time": string,
        // 责任单位
        "part_abbreviation": string,
        // 问题描述
        "description": string
      }
    ],
    // 现场问题图片
    "xcwttp": [
      {
        // 整改状态 0未整改 1已整改
        "che_status": 0 | 1,
        // 图片id
        "che_upload_photo": string,
        // 问题类别
        "che_problem_typename": string
      }
    ],
    // 整改逾期单位排名
    "zgyqdwpm": [
      {
        // 单位名称
        "title": number,
        // 问题数量
        "num": number
      }
    ],
    // 分包问题数量统计
    "fbwtsltj": [
      {
        // 责任单位名称
        "title": string,
        // 责任单位数量
        "num": number,
        // 进度条
        "progress": number
      }
    ]
  }>();

  const chartOptions = computed((): EChartsOption => {
  const list = dataSource.value?.dtbfbl || [];
  return {
    tooltip: {
      trigger: 'item',
      textStyle: { color: '#000' },
    },
    xAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
    },
    yAxis: {
      type: 'category',
      data: list.map((item) => item.title),
      axisLabel: { color: '#fff' },
    },
    series: [
      {
        name: '进度',
        type: 'bar',
        data: list.map((item) => item.value),
        barWidth: 16,
        itemStyle: {
          color: 'rgba(42, 254, 255, 1)',
          borderRadius: [4, 4, 4, 4],
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 10,
        },
      },
    ],
    grid: {
      top: '5%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: 'slider',
        yAxisIndex: 0, 
      },
    ],
  }
});


const data = computed(() => {
  const data = dataSource.value?.aqwtzt;

  return [
    { name: '未整改', value: data?.unprocessedCount || 0, color: '#f56c6c' },
    { name: '整改中', value: data?.processedCount || 0, color: '#409EFF' },
    { name: '逾期数', value: data?.overdueCount || 0, color: '#67C23A' },
  ]
});

useRequest(invoke, {
  defaultParams: [
    {
      // 固定值
      interfaceCode: 'BigScreen.securityManagement',
      // 编号代码
      projectCode: projectCode?.value?.[1],
    },
  ],
  onSuccess(res: any) {
    dataSource.value = res;
  },
  pollingInterval: 10000
});
const getPieOptions = (data: DataItem[]): EChartsOption => {
  return {
    series: [
      // 外层主环
      {
        type: 'pie',
        radius: ['65%', '90%'],
        center: ['50%', '50%'],
        data: data.map((item) => ({
          value: item.value,
          name: item.name,
          itemStyle: { color: item.color },
        })),
        label: { show: false },
        labelLine: { show: false },
      },
      // 单条虚线环
      {
        type: 'pie',
        radius: ['59.5%', '70%'],
        center: ['50%', '50%'],
        silent: true,
        z: 1,
        itemStyle: {
          color: 'transparent',
          borderColor: '#00d9ff',
          borderWidth: 2,
          borderType: 'dashed',
        },
        label: { show: false },
        data: [{ value: 1 }],
      },
      // 中间数字
      {
        type: 'pie',
        radius: ['0%', '55%'],
        center: ['50%', '50%'],
        silent: true,
        label: {
          position: 'center',
          formatter: `{c|${dataSource.value?.aqwtzt.checkTotal || 0}}`,
          rich: {
            c: {
              fontSize: 36,
              fontWeight: 600,
              color: '#00d9ff',
            },
          },
        },
        data: [{ value: 1, itemStyle: { color: 'transparent' } }],
      },
    ],
  };
};

const config = computed(() => {
  const list = dataSource.value?.aqwtlx.data || [];
  return {
    header: ['名称', '数量'],
    data: list.map(item => ([item.title, item.num])),
    index: false,
    headerBGC: 'rgba(29, 66, 110, 0.6)',
    evenRowBGC: 'rgba(29, 66, 110, 0.6)',
    oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
    align: ['center', 'center'],
    headerHeight: 30,
    rowNum: 5,
    waitTime: 5000,
  }
});

const config1 = computed(() => {
  const list = dataSource.value?.zgyqdwpm || [];
  return {
    header: ['名称', '数量'],
    data: list.map(item => ([item.title, item.num])),
    index: false,
    headerBGC: 'rgba(29, 66, 110, 0.6)',
    evenRowBGC: 'rgba(52, 139, 199, 0.298039215686275)',
    oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
    align: ['left', 'center', 'center', 'center'],
    columnWidth: [200],
    headerHeight: 48,
    rowNum: 9,
    waitTime: 5000,
  }
});

// const config2 = reactive({
//   header: ['培训内容', '培训分部', '培训时间', '培训人数'],
//   data: [
//     ['《筑牢安全防线：施工安全基础1培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础2培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础3培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础4培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基234础培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础234培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础5培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础23培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础445培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础5培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础3培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基234础培训》', '部门一', '2023-12-11', '12'],
//     ['《筑牢安全防线：施工安全基础6培训》', '部门一', '2023-12-11', '12'],
//   ],
//   index: false,
//   headerBGC: 'rgba(29, 66, 110, 0.6)',
//   evenRowBGC: 'rgba(52, 139, 199, 0.298039215686275)',
//   oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
//   align: ['left', 'center', 'center', 'center'],
//   columnWidth: [500],
//   headerHeight: 48,
//   rowNum: 10,
//   waitTime: 5000,
// });

const config3 = computed(() => {
  const list = dataSource.value?.aqwttb || [];
  return {
    header: ['问题描述', '发起时间', '整改人'],
    data: list.map((item) => [item.description, item.creation_time, item.part_abbreviation]),
    index: false,
    headerBGC: 'rgba(29, 66, 110, 0.6)',
    evenRowBGC: 'rgba(52, 139, 199, 0.298039215686275)',
    oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
    align: ['left', 'center', 'center', 'center'],
    columnWidth: [200],
    headerHeight: 48,
    rowNum: 9,
    waitTime: 5000,
  }
});

const config4 = computed(() => {
  const list = dataSource.value?.fbwtsltj || [];
  return {
    data: list.map((item) => ({ name: item.title, value: item.num })),
    rowNum: 8,
    waitTime: 5000,
    color: '#fff',
    fontSize: 17,
  }
});

const config5 = computed(() => {
  return {
    number: [dataSource.value?.aqwtlx?.total || 0],
    content: '{nt}',
  }
});

const mouseoverHandler = (e: any) => {
  console.log(e);
};

const clickHandler = (e: any) => {
  console.log(e);
};
</script>

<style lang="less" scoped>
:deep(*) {
  .el-descriptions__body {
    background-color: transparent;
  }
  .el-descriptions__label {
    color: #fff;
  }
  .el-descriptions__content {
    color: #ccc;
  }
}
:deep(.left-board .dv-scroll-board .header) {
  height: 30px !important;
  color: #31e4cf;
}
:deep(.left-board .row-item) {
  font-size: 17px;
  font-weight: 400;
}
:deep(.left-board .header-item) {
  font-weight: 400;
  font-size: 17px;
}

:deep(.center-board .dv-scroll-board .header) {
  height: 48px !important;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
:deep(.left-bottom-board .dv-scroll-board .rows .ceil) {
  font-size: 17px;
  font-weight: 400;
}
:deep(.center-board .dv-scroll-board .rows .ceil) {
  font-size: 16px;
  color: rgba(247, 247, 247, 0.698039215686274);
}
:deep(.dv-scroll-ranking-board .ranking-info .rank) {
  width: auto !important;
  margin-right: 10px;
}
:deep(.dv-scroll-ranking-board .ranking-column) {
  height: 14px;
  border: none;
  background-color: rgba(232, 232, 232, 0.27843137254902);
}
:deep(.dv-scroll-ranking-board .ranking-column .inside-column) {
  height: 100%;
  background-color: rgba(115, 235, 233, 1);
}
</style>
