<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(data)" />
          <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">920</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">320</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">320</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">320</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">320</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">320</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">920</div>
          </div>
        </div>
        <div class="flex-1">
          <el-table stripe>
            <el-table-column align="center" label="数量"></el-table-column>
            <el-table-column align="center" label="名称"></el-table-column>
          </el-table>
        </div>
      </div>

      <CardTitle>问题预期单位排名</CardTitle>
      <ul class="quality-sort h-310px overflow-auto list-none p-10px m-0 flex flex-col gap-y-4px">
        <li
          v-for="item in 10"
          class="w-full h-30px bg-#348bc730 flex justify-between pr-12px leading-30px"
        >
          <span class="no inline-block w-30px h-30px text-center bg-#348bc730 mr-10px">1</span>
          <span class="name flex-1">施工单位名称</span>
          <span class="value text-#77bef9">300</span>
        </li>
      </ul>
    </Panel>

    <!-- 中间区域 -->
    <div class="h-full box-border px-10px middle-content flex-1 flex flex-col justify-end">
      <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 5" src="https://picsum.photos/400/300" alt=""></img>
          </div>
          </el-scrollbar>
          
        </Panel>
      </div>
    </div>

    <!-- 右侧面板 -->
    <Panel>
      <CardTitle>质量问题通报</CardTitle>
      <el-table height="400" stripe>
        <el-table-column align="center" label="问题描述"></el-table-column>
        <el-table-column align="center" label="发起时间"></el-table-column>
        <el-table-column align="center" label="责任单位"></el-table-column>
      </el-table>

      <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 in 20"
          class="w-full h-50px"
        >
          <div class="flex items-center justify-between mb-4px">
            <span class="no">NO.1 责任单位1</span>
            <span class="value">500</span>
          </div>
          <div class="w-full h-15px bg-#e8e8e847 relative">
            <div class="h-15px bg-#73ebe9" :style="{width: `${50}%`}"></div>
          </div>
        </li>
      </ul>
    </Panel>
  </div>
</template>

<script setup lang="ts">
import Panel from '@/components/Panel.vue';
import CardTitle from '@/components/CardTitle.vue';
import Chart from '@/components/Chart/index.vue';
import type { EChartsOption } from 'echarts';

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

const data = [
  { label: '已整改', value: 320 },
  { label: '未整改', value: 320 },
];
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;
    }
  }
}
</style>
