<template>
  <div class="w-full h-full relative flex justify-between items-center">
    <!-- 左侧面板 -->
    <Panel>
      <CardTitle>工程概况</CardTitle>
      <ul class="list-none m-0 p-0 px-20px py-10px flex flex-col gap-y-10px">
        <li>
          <span class="text-20px font-bold inline-block w-200px">项目名称</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">项目经理</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">项目类型</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">项目地点</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">项目规模</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">项目投资额(万元)</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
      </ul>

      <CardTitle>安全管理</CardTitle>
      <div class="w-full h-300px flex gap-20px">
        <div class="flex-1 flex flex-col items-center justify-center gap-y-10px">
          <div class="flex items-center text-16px">
            <span class="w-120px text-right">检查总数：</span>
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
          <div class="flex items-center text-16px">
            <span class="w-120px text-right">合格数：</span>
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
          <div class="flex items-center text-16px">
            <span class="w-120px text-right"><span class="point"></span>已整改：</span>
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
          <div class="flex items-center text-16px">
            <span class="w-120px text-right"
              ><span class="point" style="background: #e86525"></span>未整改：</span
            >
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
        </div>
        <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"
          >
            <div class="text-24px mb-10px">80.2%</div>
            <div class="text-#ccc">整改通过率</div>
          </div>
        </div>
      </div>

      <CardTitle>质量管理</CardTitle>
      <div class="w-full h-300px flex gap-20px">
        <div class="flex-1 flex flex-col items-center justify-center gap-y-10px">
          <div class="flex items-center text-16px">
            <span class="w-120px text-right">检查总数：</span>
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
          <div class="flex items-center text-16px">
            <span class="w-120px text-right">合格数：</span>
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
          <div class="flex items-center text-16px">
            <span class="w-120px text-right"><span class="point"></span>已整改：</span>
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
          <div class="flex items-center text-16px">
            <span class="w-120px text-right"
              ><span class="point" style="background: #e86525"></span>未整改：</span
            >
            <span
              ><span class="text-20px inline-block w-50px text-#3efafa mr-8px">320</span>项</span
            >
          </div>
        </div>
        <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"
          >
            <div class="text-24px mb-10px">50.9.2%</div>
            <div class="text-#ccc">整改通过率</div>
          </div>
        </div>
      </div>
    </Panel>

    <!-- 中间区域 -->
    <div class="h-full box-border px-10px middle-content flex-1 flex flex-col gap-10px">
      <CardTitle>全景概况</CardTitle>
      <iframe
        src="https://www.720yun.com/t/adejerhnzy3?scene_id=15644029"
        frameborder="0"
        class="w-full flex-1"
      ></iframe>
      <div>
        <CardTitle>参建单位</CardTitle>
        <el-table height="200">
          <el-table-column label="序号"> </el-table-column>
          <el-table-column label="单位名称"> </el-table-column>
          <el-table-column label="单位地址"> </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 右侧面板 -->
    <Panel>
      <CardTitle>管理目标</CardTitle>
      <ul class="list-none m-0 p-0 px-20px py-10px flex flex-col gap-y-10px">
        <li>
          <span class="text-20px font-bold inline-block w-200px">项目目标</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">文明工地目标</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">创新目标</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">质量目标</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
        <li>
          <span class="text-20px font-bold inline-block w-200px">安全目标</span>
          <span class="text-#ccc text-16px">xxxx</span>
        </li>
      </ul>

      <CardTitle>人员数据</CardTitle>
      <div class="w-full box-border pt-30px px-10px">
        <div class="w-full flex justify-between px-20px box-border">
          <div class="text-center">
            <div class="text-#ccc text-14px mb-8px">在册人数</div>
            <div class="text-20px font-bold">2550</div>
          </div>
          <div class="text-center">
            <div class="text-#ccc text-14px mb-8px">今日未出勤人数</div>
            <div class="text-20px font-bold">2550</div>
          </div>
          <div class="text-center">
            <div class="text-#ccc text-14px mb-8px">今日出勤人数</div>
            <div class="text-20px font-bold">2550</div>
          </div>
        </div>
        <div class="flex h-260px">
          <div class="flex-1">
            <Chart :options="getPieOptions(data)" />
          </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>
        </div>
      </div>

      <CardTitle>技术指标</CardTitle>
      <el-descriptions size="large" :column="2" class="mt-20px">
        <el-descriptions-item label="用地面积(㎡)">80000</el-descriptions-item>
        <el-descriptions-item label="建筑占地面积(㎡)">50000</el-descriptions-item>
        <el-descriptions-item label="地上总建筑面积(㎡)">50.9.2%</el-descriptions-item>
        <el-descriptions-item label="地下总建筑面积(㎡)">50.9.2%</el-descriptions-item>
        <el-descriptions-item label="计容面积(㎡)">50.9.2%</el-descriptions-item>
        <el-descriptions-item label="建筑密度(%)">50.9.2%</el-descriptions-item>
        <el-descriptions-item label="容积率">50.9.2%</el-descriptions-item>
        <el-descriptions-item label="机动车停车位(个)">50.9.2%</el-descriptions-item>
        <el-descriptions-item label="绿化面积(㎡)">50.9.2%</el-descriptions-item>
        <el-descriptions-item label="绿化率(%)">50.9.2%</el-descriptions-item>
      </el-descriptions>
    </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;
}
:deep(*) {
  .el-descriptions__body {
    background-color: transparent;
  }
  .el-descriptions__label {
    color: #fff;
  }
  .el-descriptions__content {
    color: #ccc;
  }
}
</style>
