<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 class="flex">
          <span class="text-20px font-bold inline-block w-180px shrink-0">项目名称</span>
          <span class="text-#ccc text-16px truncate">{{ dataSource?.gckk?.prj_name }}</span>
        </li>
        <li class="flex">
          <span class="text-20px font-bold inline-block w-180px shrink-0">项目经理</span>
          <span class="text-#ccc text-16px truncate">{{ dataSource?.gckk?.prj_manager_name }}</span>
        </li>
        <li class="flex">
          <span class="text-20px font-bold inline-block w-180px shrink-0">项目类型</span>
          <span class="text-#ccc text-16px truncate">{{ dataSource?.gckk?.prjs_type_desc }}</span>
        </li>
        <li class="flex">
          <span class="text-20px font-bold inline-block w-180px shrink-0">项目地点</span>
          <span class="text-#ccc text-16px truncate">{{ dataSource?.gckk?.prjs_address }}</span>
        </li>
        <li class="flex">
          <span class="text-20px font-bold inline-block w-180px shrink-0">项目规模</span>
          <span class="text-#ccc text-16px truncate">{{ dataSource?.gckk?.prjs_scale }}</span>
        </li>
        <li class="flex">
          <span class="text-20px font-bold inline-block w-180px shrink-0">项目投资额(万元)</span>
          <span class="text-#ccc text-16px truncate">{{ dataSource?.gckk?.prjs_amount }}</span>
        </li>
      </ul>

      <CardTitle>技术指标</CardTitle>
      <el-descriptions size="large" :column="2" class="mt-20px">
        <el-descriptions-item label="用地面积(㎡)">{{
          dataSource?.jszb?.prjs_area
        }}</el-descriptions-item>
        <el-descriptions-item label="建筑占地面积(㎡)">{{
          dataSource?.jszb?.build_area
        }}</el-descriptions-item>
        <el-descriptions-item label="地上总建筑面积(㎡)">{{
          dataSource?.jszb?.ongrd_area
        }}</el-descriptions-item>
        <el-descriptions-item label="地下总建筑面积(㎡)">{{
          dataSource?.jszb?.ungrd_area
        }}</el-descriptions-item>
        <el-descriptions-item label="计容面积(㎡)">{{
          dataSource?.jszb?.calc_area
        }}</el-descriptions-item>
        <el-descriptions-item label="建筑密度(%)">{{
          dataSource?.jszb?.build_density
        }}</el-descriptions-item>
        <el-descriptions-item label="容积率">{{
          dataSource?.jszb?.plot_ratio
        }}</el-descriptions-item>
        <el-descriptions-item label="机动车停车位(个)">{{
          dataSource?.jszb?.park_space
        }}</el-descriptions-item>
        <el-descriptions-item label="绿化面积(㎡)">{{
          dataSource?.jszb?.gree_area
        }}</el-descriptions-item>
        <el-descriptions-item label="绿化率(%)">{{
          dataSource?.jszb?.gree_rate
        }}</el-descriptions-item>
      </el-descriptions>

      <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">{{ dataSource?.rysj.num }}</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(
                  (dataSource?.rysj.data || []).map((item) => ({
                    label: item.title,
                    value: item.num,
                  })),
                )
              "
            />
          </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"
              v-for="item in dataSource?.rysj.data || []"
              :key="item.title"
            >
              <span class="text-right"
                ><span class="point" style="background: #6ec44e"></span>{{ item.title }}</span
              >
              <span class="text-#6ec44e"
                ><span class="text-20px inline-block mr-8px">{{ item.num }}</span
                >人</span
              >
            </div>
          </div>
        </div>
      </div>
    </Panel>

    <!-- 中间区域 -->
    <div class="h-full box-border px-10px middle-content flex-1 flex flex-col gap-10px">
      <CardTitle>
        <div class="w-full flex justify-between items-center">
          <span>全景预览</span>
          <span class="flex gap-8px">
            <el-switch />
            <el-button type="text" @click="setPanoUrl">
              <el-icon size="26px" style="color: #fff"><Tools /></el-icon>
            </el-button>
          </span>
        </div>
      </CardTitle>
      <iframe :src="dataSource?.drone" frameborder="0" class="w-full flex-1"></iframe>
      <div class="flex gap-8px">
        <div class="flex-1">
          <Panel>
            <CardTitle>管理目标</CardTitle>
            <ul class="list-none m-0 p-0 px-20px py-10px flex flex-col gap-y-10px">
              <li class="flex">
                <span class="text-20px font-bold inline-block w-200px shrink-0">工期目标</span>
                <span class="text-#ccc text-16px truncate">{{
                  dataSource?.glmb?.prjs_duration
                }}</span>
              </li>
              <li class="flex">
                <span class="text-20px font-bold inline-block w-200px shrink-0">文明工地目标</span>
                <span class="text-#ccc text-16px truncate">{{
                  dataSource?.glmb?.prjs_worksite
                }}</span>
              </li>
              <li class="flex">
                <span class="text-20px font-bold inline-block w-200px shrink-0">创新目标</span>
                <span class="text-#ccc text-16px truncate">{{
                  dataSource?.glmb?.prjs_innovation
                }}</span>
              </li>
              <li class="flex">
                <span class="text-20px font-bold inline-block w-200px shrink-0">质量目标</span>
                <span class="text-#ccc text-16px truncate">{{
                  dataSource?.glmb?.prjs_quality
                }}</span>
              </li>
              <li class="flex">
                <span class="text-20px font-bold inline-block w-200px shrink-0">绿色施工目标</span>
                <span class="text-#ccc text-16px truncate">{{
                  dataSource?.glmb?.prjs_safety
                }}</span>
              </li>
              <li class="flex">
                <span class="text-20px font-bold inline-block w-200px shrink-0">安全目标</span>
                <span class="text-#ccc text-16px truncate">{{ dataSource?.glmb?.prjs_green }}</span>
              </li>
            </ul>
          </Panel>
        </div>
        <div class="flex-1">
          <Panel>
            <CardTitle>参建单位</CardTitle>
            <div class="w-full h-200px">
              <ScrollBoard :config="cjdwConfig" />
            </div>
          </Panel>
        </div>
      </div>
    </div>

    <!-- 右侧面板 -->
    <Panel>
      <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">{{
                dataSource?.aqgl?.checkTotal
              }}</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">{{
                dataSource?.aqgl?.overdueCount
              }}</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">{{
                dataSource?.aqgl?.processedCount
              }}</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">{{
                dataSource?.aqgl?.unprocessedCount
              }}</span
              >项</span
            >
          </div>
        </div>
        <div class="flex-1 relative">
          <Chart
            :options="
              getPieOptions([
                { label: '已整改', value: dataSource?.aqgl?.processedCount || 0 },
                { label: '未整改', value: dataSource?.aqgl?.unprocessedCount || 0 },
              ])
            "
          />
          <div
            class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center"
          >
            <div class="text-24px mb-10px">{{ dataSource?.aqgl?.passRate }}%</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">{{
                dataSource?.zlgl?.checkTotal
              }}</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">{{
                dataSource?.zlgl?.overdueCount
              }}</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">{{
                dataSource?.zlgl?.processedCount
              }}</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">{{
                dataSource?.zlgl?.unprocessedCount
              }}</span
              >项</span
            >
          </div>
        </div>
        <div class="flex-1 relative">
          <Chart
            :options="
              getPieOptions([
                { label: '已整改', value: dataSource?.zlgl?.processedCount || 0 },
                { label: '未整改', value: dataSource?.zlgl?.unprocessedCount || 0 },
              ])
            "
          />
          <div
            class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center"
          >
            <div class="text-24px mb-10px">{{ dataSource?.zlgl?.passRate }}%</div>
            <div class="text-#ccc">整改通过率</div>
          </div>
        </div>
      </div>

      <CardTitle>进度管理</CardTitle>
      <div class="w-full box-border pt-30px px-10px">
        <ScrollBoard :config="processConfig" />
      </div>
    </Panel>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, type Ref, 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 { Tools } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ScrollBoard } from '@kjgl77/datav-vue3';

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

const projectCode = inject<Ref<string[]>>('projectCode');

const dataSource = ref<{
  // 无人机数据
  drone: string;
  // 人员数据
  rysj: {
    // 在册人数
    num: number;
    data: [
      {
        // 用户数量
        num: number;
        // 角色名称
        title: string;
      },
    ];
  };
  // 技术指标
  jszb: {
    // 用地面积(㎡)
    prjs_area: number;
    // 建筑占地面积(㎡)
    build_area: number;
    // 机动车停车位(个)
    park_space: number;
    // 计容面积(㎡)
    calc_area: 240000.0;
    // 绿化面积(㎡)
    gree_area: number;
    // 地下总建筑面积(㎡)
    ungrd_area: number;
    // 绿化率(%):
    gree_rate: number;
    // 容积率
    plot_ratio: number;
    // 地上总建筑面积(㎡)
    ongrd_area: number;
    // 建筑密度(%)
    build_density: number;
  };
  // 参建单位
  cjdw: [
    {
      // 单位名称
      unit_name: string;
      // 参建单位
      part_notes: string;
    },
  ];
  // 安全管理
  aqgl: {
    // 检查总数
    checkTotal: number;
    // 未整数
    unprocessedCount: number;
    // 已整数
    processedCount: number;
    // 通过率
    passRate: number;
    // 逾期数
    overdueCount: number;
  };
  // 管理目标
  glmb: {
    // 安全目标
    prjs_safety: string;
    // 文明工地目标
    prjs_worksite: string;
    // 创新目标
    prjs_innovation: string;
    // 质量目标
    prjs_quality: string;
    // 绿色施工目标
    prjs_green: string;
    // 工期目标
    prjs_duration: string;
  };
  // 工程概况
  gckk: {
    // 项目规模
    prjs_scale: string;
    // 项目投资额(万元)
    prjs_amount: number;
    // 项目类型
    prjs_type_desc: string;
    // 项目地点
    prjs_address: string;
    // 项目名称
    prj_name: string;
    // 项目经理
    prj_manager_name: string;
  };
  // 质量管理
  zlgl: {
    // 检查总数
    checkTotal: number;
    // 未整数
    unprocessedCount: number;
    // 已整数
    processedCount: number;
    // 通过率
    passRate: number;
    // 逾期数
    overdueCount: number;
  };
}>();

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

// 进度管理配置
const processConfig = computed(() => {
  const list = [];
  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 cjdwConfig = computed(() => {
  const list = dataSource.value?.cjdw || [];
  return {
    header: ['序号', '单位名称'],
    data: list.map((item, index) => [index, item.unit_name]),
    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 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' } },
        ],
      },
    ],
  };
};

const setPanoUrl = () => {
  ElMessageBox.prompt('请输入无人机链接', '提示', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    inputPattern:
      /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/, // 链接正则
    inputErrorMessage: '地址校验失败',
    inputValue: dataSource.value?.drone,
  })
    .then(({ value }) => {
      invoke({
        interfaceCode: 'BigScreen.drone',
        projectCode: projectCode?.value?.[1],
        droneUrl: value,
      }).then(() => {
        ElMessage({
          type: 'success',
          message: '修改成功',
        });
        if (dataSource.value) {
          dataSource.value.drone = value;
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    });
};
</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;
  }
}

: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>
