<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>基础数据</div>
          </div>
          <div class="home-bg-content">
            <el-row :gutter="20">
              <el-col :span="12"
                ><div class="home-bg-content-item">
                  <div class="home-bg-content-item-icon">
                    <img src="@/assets/images/home/carame.png" alt="" />
                  </div>
                  <div class="home-bg-content-item-content">
                    <div class="home-bg-content-item-title">摄像头数量</div>
                    <div class="home-bg-content-item-value">3</div>
                  </div>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="home-bg-content-item">
                  <div class="home-bg-content-item-icon">
                    <img src="@/assets/images/home/warn.png" alt="" />
                  </div>
                  <div class="home-bg-content-item-content">
                    <div class="home-bg-content-item-title">预警信息总量</div>
                    <div class="home-bg-content-item-value">1972</div>
                  </div>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="home-bg-content-item">
                  <div class="home-bg-content-item-icon">
                    <img src="@/assets/images/home/handle.png" alt="" />
                  </div>
                  <div class="home-bg-content-item-content">
                    <div class="home-bg-content-item-title">处理意见提交</div>
                    <div class="home-bg-content-item-value">40</div>
                  </div>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="home-bg-content-item">
                  <div class="home-bg-content-item-icon">
                    <img src="@/assets/images/home/participation.png" alt="" />
                  </div>
                  <div class="home-bg-content-item-content">
                    <div class="home-bg-content-item-title">参与安防教师</div>
                    <div class="home-bg-content-item-value">22</div>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>今日预警情况</div>
          </div>
          <div class="home-bg-content">
            <div ref="chart1" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>今日处理情况</div>
          </div>
          <div class="home-bg-content">
            <div ref="chart2" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>高危预警信息统计</div>
          </div>
          <div class="home-bg-content handleBox">
            <ProTable ref="proTable" title="视频列表" :toolButton="false" :pagination="false" :columns="columns" :data="tableData"> </ProTable>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="16">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>统计分析</div>
          </div>
          <div class="home-bg-content handleBox">
            <div ref="chart3" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import { monitorLIVEApi } from "@/api";
import { ZJRQ } from "@/api/interface";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { useDictStore } from "@/stores/modules";
import { statistionApi } from "@/api";
import * as echarts from "echarts";

const value = ref(true);
const chart1 = ref(null);
const chart2 = ref(null);
const chart3 = ref(null);

onMounted(() => {
  getDataChart();
  getWeekData();
});
function getDataChart() {
  setTimeout(async () => {
    await statistionApi.warnstatistion({}).then(res => {
      let { code, data } = res;

      if (code == 200) {
        let chartData1 = data.alarm.map(item => {
          return {
            value: item.count,
            name: item.name
          };
        });
        let chartData2 = data.hand.map(item => {
          return {
            value: item.count,
            name: item.name
          };
        });
        // let chartData = [
        //   {
        //     name: "1",
        //     value: 100
        //   },
        //   {
        //     name: "2",
        //     value: 200
        //   }
        // ];
        getCharts1(chartData1);
        getCharts2(chartData2);
      }
    });
  });
}
function getCharts1(data: any) {
  const chart = echarts.init(chart1.value);
  const option = {
    tooltip: {
      trigger: "item"
    },
    // legend: {
    //   top: "5%",
    //   left: "center"
    // },
    legend: {
      orient: "vertical",
      left: "right",
      top: "middle"
    },
    series: [
      {
        name: "今日预警情况",
        type: "pie",
        radius: ["60%", "90%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}
function getCharts2(data: any) {
  const chartstation = echarts.init(chart2.value);
  const option = {
    tooltip: {
      trigger: "item"
    },
    // legend: {
    //   top: "5%",
    //   left: "center"
    // },
    legend: {
      orient: "vertical",
      left: "right",
      top: "middle"
    },
    series: [
      {
        name: "今日处理情况",
        type: "pie",
        radius: ["60%", "90%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  };

  chartstation.setOption(option);
  window.addEventListener("resize", function () {
    chartstation.resize();
  });
}

function getWeekData() {
  setTimeout(async () => {
    await statistionApi.weekstatistion({}).then((res: any) => {
      let { code, data } = res;

      if (code == 200) {
        // let chartData = data;
        let time = data.dataX;
        let chartData = data.dataY.map((item: any) => {
          return {
            data: item.data,
            name: item.name,
            type: "bar",
            barWidth: "12px", // 设置柱子粗细
            itemStyle: {
              // normal: {
              borderRadius: [30, 30, 0, 0]
              // }
            }
          };
        });
        getCharts3(time, chartData);
      }
    });
  });
}
function getCharts3(time: any, data: any) {
  const chartstation3 = echarts.init(chart3.value);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, 0.01]
    },
    xAxis: {
      type: "category",
      data: time
    },
    series: data
  };

  chartstation3.setOption(option);
  window.addEventListener("resize", function () {
    chartstation3.resize();
  });
}

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
const dictStore = useDictStore();

// 表格配置项
const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
  {
    prop: "type",
    label: "数据类型"
    //   render: () => {
    //     return "楼道";
    //   }
  },
  {
    prop: "warntotal",
    label: "预警总量"
    //   render: () => {
    //     return "楼道";
    //   }
  },
  {
    prop: "lowrisk",
    label: "低危信息	"
  },
  {
    prop: "highrisk",
    label: "高危信息"
  }
];
const tableData = ref([
  {
    type: "今日",
    warntotal: "20",
    lowrisk: "10",
    highrisk: "10"
  },
  {
    type: "本周",
    warntotal: "50",
    lowrisk: "20",
    highrisk: "30"
  },
  {
    type: "本月",
    warntotal: "198",
    lowrisk: "176",
    highrisk: "22"
  },
  {
    type: "上月",
    warntotal: "10",
    lowrisk: "5",
    highrisk: "5"
  },

  {
    type: "环比",
    warntotal: "-9.07%",
    lowrisk: "0%",
    highrisk: "0%"
  }
]);
const tableLoading = ref(false);
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
