<template>
  <div class="w-full h-full relative flex justify-between items-center">
    <!-- 左侧面板 -->
    <Panel>
      <CardTitle>质量问题状态</CardTitle>
      <div class="flex h-260px">
        <div class="flex-1 relative">
          <Chart :options="getPieOptions([
            { label: '已整改', value: dataSource?.zlwtzt.processedCount || 0 },
            { label: '未整改', value: dataSource?.zlwtzt.unprocessedCount || 0 },
          ])" />
          <div
            class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center"
          >
            <img class="w-110px h-110px" src="@/assets/images/circle-dashboard.svg" alt="" />
            <div class="text-28px font-bold text-#31e4cf absolute italic">{{ dataSource?.zlwtzt.checkTotal || '-' }}</div>
          </div>
        </div>
        <div class="flex-1 flex flex-col items-center justify-center gap-y-10px">
          <div class="w-full flex items-center justify-between text-16px">
            <span class="text-right"
              ><span class="point" style="background: #6ec44e"></span>检查数量</span
            >
            <span class="text-#6ec44e"><span class="text-20px inline-block mr-8px">{{ dataSource?.zlwtzt.checkTotal }}</span></span>
          </div>
          <div class="w-full flex items-center justify-between text-16px">
            <span class="text-right"
              ><span class="point" style="background: #f4982c"></span>整改数量</span
            >
            <span class="text-#f4982c"><span class="text-20px inline-block mr-8px">{{ dataSource?.zlwtzt.processedCount }}</span></span>
          </div>
          <div class="w-full flex items-center justify-between text-16px">
            <span class="text-right"
              ><span class="point" style="background: #14cee6"></span>未整改数量</span
            >
            <span class="text-#14cee6"><span class="text-20px inline-block mr-8px">{{ dataSource?.zlwtzt.unprocessedCount }}</span></span>
          </div>
          <div class="w-full flex items-center justify-between text-16px">
            <span class="text-right"
              ><span class="point" style="background: #14cee6"></span>逾期数量</span
            >
            <span class="text-#14cee6"><span class="text-20px inline-block mr-8px">{{ dataSource?.zlwtzt.overdueCount }}</span></span>
          </div>
          <div class="w-full flex items-center justify-between text-16px">
            <span class="text-right"
              ><span class="point" style="background: #14cee6"></span>通过率</span
            >
            <span class="text-#14cee6"><span class="text-20px inline-block mr-8px">{{ dataSource?.zlwtzt.passRate }}%</span></span>
          </div>
        </div>
      </div>

      <CardTitle>质量问题类型</CardTitle>
      <div class="flex gap-8px my-10px">
        <div class="w-120px h-200px bg-#348bc74c flex flex-col">
          <div class="text-center leading-30px border-b-1 border-b-solid border-b-#999">总计</div>
          <div class="flex-1 flex flex-col items-center justify-center gap-12px">
            <img src="@/assets/images/quality.svg" alt="" />
            <div class="text-28px font-bold text-#31e4cf italic">{{ dataSource?.zlwtlx.total }}</div>
          </div>
        </div>
        <div class="flex-1">
          <ScrollBoard :config="zlwtlxConfig" />
        </div>
      </div>

      <CardTitle>施工问题数量排名</CardTitle>
      <div class="w-full h-310px">
        <ScrollBoard :config="zgyqdwpmConfig" />
      </div>
    </Panel>

    <!-- 中间区域 -->
    <div class="h-full box-border px-10px middle-content flex-1 flex flex-col justify-end gap-20px">
      <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="w-full h-400px">
        <ScrollBoard :config="zlwttbConfig" />
      </div>

      <CardTitle>责任问题单位排名</CardTitle>
      <ul class="quality-statistics h-420px overflow-auto list-none p-10px m-0 flex flex-col gap-y-8px">
        <li
          v-for="(item, index) in dataSource?.fbwtsltj || []"
          class="w-full h-50px"
        >
          <div class="flex items-center justify-between mb-4px">
            <span class="no">NO.{{ index + 1 }} {{ item.title }}</span>
            <span class="value">{{ item.num }}</span>
          </div>
          <div class="w-full h-15px bg-#e8e8e847 relative">
            <div class="h-15px bg-#73ebe9" :style="{width: `${item.progress}%`}"></div>
          </div>
        </li>
      </ul>
    </Panel>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, computed } from 'vue';
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';
import { ScrollBoard } from '@kjgl77/datav-vue3';

type DataItem = {
  label: string;
  value: number;
};

const projectCode = inject<Ref<string[]>>('projectCode');
const dataSource = ref<{
    // 质量问题状态
    "zlwtzt": {
      // 通过率
      "passRate": number,
      // 逾期数
      "overdueCount": number,
      // 检查总数
      "checkTotal": number,
      // 未整数
      "unprocessedCount": number,
      // 已整数
      "processedCount": number
    },
    // 质量问题类型
    "zlwtlx": {
      // 总数
      "total": number,
      "data": [
        {
          // 标题
          "title": string,
          // 数量
          "num": number
        }
      ]
    },
    // 质量问题通报
    "zlwttb": [
      {
        // 发起时间
        "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": string,
        // 问题数量
        "num": number
      }
    ],
    // 分包问题数量统计
    "fbwtsltj": [
      {
        // 责任单位名称
        "title": string,
        // 责任单位数量
        "num": number,
        // 进度条
        "progress": number
      }
    ]
  }>();

// 质量问题
const zlwtlxConfig = computed(() => {
  const list = dataSource.value?.zlwtlx.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 zgyqdwpmConfig = 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(29, 66, 110, 0.6)',
  }
})

// 质量问题通报
const zlwttbConfig = computed(() => {
  const list = dataSource.value?.zlwttb || [];

  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(29, 66, 110, 0.6)',
  }
})

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, 
      },
    ],
  }
});

useRequest(invoke, {
  defaultParams: [
    {
      // 固定值
      interfaceCode: 'BigScreen.qualityManagement',
      // 编号代码
      projectCode: projectCode?.value?.[1],
    },
  ],
  onSuccess(res: any) {
    dataSource.value = res;
  },
  pollingInterval: 10000
});

const getPieOptions = (data: DataItem[]): EChartsOption => {
  return {
    series: [
      {
        type: 'pie',
        radius: ['56%', '70%'],
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: data[0].value, name: data[0].label, itemStyle: { color: '#3efafa' } },
          { value: data[1].value, name: data[1].label, itemStyle: { color: '#e86525' } },
        ],
      },
    ],
  };
};
</script>

<style lang="less" scoped>
.point {
  width: 8px;
  height: 8px;
  background: #3efafa;
  border-radius: 50%;
  margin-right: 10px;
  display: inline-block;
}
.quality-sort {
  // 第一个li
  li:nth-child(1) {
    background: #c7343426;
    .no {
      color: #f66a6a;
      background: #c7343426;
    }
    .value {
      color: #f66a6a;
    }
  }
  // 第二个li
  li:nth-child(2) {
    background: #c7653433;
    .no {
      color: #f8ca35;
      background: #c7653433;
    }
    .value {
      color: #f8ca35;
    }
  }
  // 第三个li
  li:nth-child(3) {
    .no {
      color: #18ff98;
    }
    .value {
      color: #18ff98;
    }
  }
}
.quality-statistics {
  // 第一个li
  li:nth-child(1) {
    .no {
      color: #f66a6a;
    }
    .value {
      color: #f66a6a;
    }
  }
  // 第二个li
  li:nth-child(2) {
    .no {
      color: #f8ca35;
    }
    .value {
      color: #f8ca35;
    }
  }
  // 第三个li
  li:nth-child(3) {
    .no {
      color: #18ff98;
    }
    .value {
      color: #18ff98;
    }
  }
}

:deep(.left-bottom-board .dv-scroll-board .header) {
  height: 35px;
}
:deep(.left-bottom-board .dv-scroll-board .header-item) {
  font-size: 17px !important;
  color: #31e4cf !important;
}

:deep(.dv-scroll-board .header) {
  height: 30px !important;
  color: #31e4cf; 
}
:deep(.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>
