<!-- 真正的首页 -->
<template>
  <div class="static">
    <div class="left_tree">
      <tree ref="treeRef" />
    </div>
    <!-- <span class="new_span">测试scss颜色</span> -->
    <div class="right_container">
      <div class="container_charts">
        <div class="charts_info">
          <pie
            :customData="{
              title: '检测状态',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData1"
            ref="pieRef1"
          ></pie>
        </div>
        <div class="charts_info">
          <pie
            :customData="{
              title: '检测结果',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData2"
            ref="pieRef2"
          ></pie>
        </div>
        <div class="charts_info">
          <pie
            :customData="{
              title: '报告状态',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData3"
            ref="pieRef3"
          ></pie>
        </div>
      </div>
      <div class="container_title">
        <el-form :model="form" label-width="80px" :inline="true">
          <el-form-item label="功能选择">
            <el-select v-model="form.activeTabs" @change="changeSelect">
              <el-option
                v-for="(item, index) in tabsList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测状态" v-if="form.activeTabs != 5">
            <el-select v-model="form.checkStatus" @change="changeSelect">
              <el-option
                v-for="(item, index) in checkStatusList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报告状态" v-if="form.activeTabs != 5">
            <el-select v-model="form.checkReportStatus" @change="changeSelect">
              <el-option
                v-for="(item, index) in checkReportStatusList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测结果" v-if="form.activeTabs != 5">
            <el-select v-model="form.checkResult" @change="changeSelect">
              <el-option
                v-for="(item, index) in checkResultList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定状态" v-if="form.activeTabs == 5">
            <el-select v-model="form.deviceBindStatus" @change="changeSelect">
              <el-option
                v-for="(item, index) in deviceBindStatusList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型" v-if="form.activeTabs == 5">
            <el-select v-model="form.deviceType" @change="changeSelect">
              <el-option
                v-for="(item, index) in deviceTypeList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制造厂商" v-if="form.activeTabs == 5">
            <el-select v-model="form.manufacturer" @change="changeSelect">
              <el-option
                v-for="(item, index) in manufacturerList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button
              type="primary"
              @click="handleDetection"
              v-if="form.activeTabs === 0"
              >启动自动检测</el-button
            >
            <el-button
              type="primary"
              @click="handleDetection"
              v-if="form.activeTabs === 1"
              >启动手动检测</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 2"
              >报告生成</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 5"
              >设备导入</el-button
            >
            <el-button type="primary">计划详情</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="container_table">
        <Table></Table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getStaticTreeData } from "@/api/plan/static";
import pie from "@/components/echarts/pie/default.vue";
import { useRouter } from "vue-router";
import tree from "../components/tree.vue";
import Table from "../components/table.vue";
const treeRef = ref();
const form: any = ref({
  activeTabs: 0, //功能选择
  checkStatus: 0, //检测状态
  checkReportStatus: 0, //检测报告状态
  checkResult: 0, //检测结果
  deviceBindStatus: 0, //绑定状态
  deviceType: 0, //设备类型
  manufacturer: 0, //制造厂商
});
const router = useRouter();
localStorage.setItem("color", "red");
//功能选择数据
const tabsList = [
  {
    label: "自动检测",
    value: 0,
  },
  {
    label: "手动检测",
    value: 1,
  },
  {
    label: "报告生成",
    value: 2,
  },
  {
    label: "设备归档",
    value: 3,
  },
  {
    label: "设备浏览",
    value: 4,
  },
  {
    label: "设备导入",
    value: 5,
  },
];
//检测状态数据
const checkStatusList = [
  {
    label: "未检测",
    value: 0,
  },
  {
    label: "检测中",
    value: 1,
  },
  {
    label: "检测完成",
    value: 2,
  },
  {
    label: "归档",
    value: 3,
  },
];
//检测报告状态数据
const checkReportStatusList = [
  {
    label: "未生成报告",
    value: 0,
  },
  {
    label: "已生成报告",
    value: 1,
  },
];
//检测结果数组
const checkResultList = [
  {
    label: "/",
    value: null,
  },
  {
    label: "不合格",
    value: 0,
  },
  {
    label: "合格",
    value: 1,
  },
];
//绑定状态数组
const deviceBindStatusList = [
  {
    label: "未绑定",
    value: 0,
  },
  {
    label: "已绑定",
    value: 1,
  },
];
//设备类型数组
const deviceTypeList = [
  {
    label: "PQS882A",
    value: 0,
  },
  {
    label: "PQS882B4",
    value: 1,
  },
  {
    label: "PQS882B5",
    value: 2,
  },
  {
    label: "PQS882B6",
    value: 3,
  },
  {
    label: "PQS882B7",
    value: 4,
  },
  {
    label: "PQS882B8",
    value: 5,
  },
];
//制造厂商数组
const manufacturerList = [
  {
    label: "南京灿能电力",
    value: 0,
  },
  {
    label: "南瑞继保",
    value: 1,
  },
  {
    label: "中电",
    value: 2,
  },
];
form.value.activeTabs = tabsList[0].value;
const pieRef1 = ref(),
  pieRef2 = ref(),
  pieRef3 = ref();
const changeSelect = () => {
  console.log(form.value.activeTabs);
  getPieData();
};
const chartsData1: any = ref([]),
  chartsData2: any = ref([]),
  chartsData3: any = ref([]);
const getPieData = () => {
  chartsData1.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "未检测" },
    { value: Math.floor(Math.random() * 100) + 1, name: "检测中" },
    { value: Math.floor(Math.random() * 100) + 1, name: "检测完成" },
    { value: Math.floor(Math.random() * 100) + 1, name: "归档" },
  ];
  chartsData2.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "/" },
    { value: Math.floor(Math.random() * 100) + 1, name: "合格" },
    { value: Math.floor(Math.random() * 100) + 1, name: "不合格" },
  ];
  // pieRef2.value.init();
  chartsData3.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
    { value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
  ];
  // pieRef3.value.init();
  pieRef1.value.init();
};
const getTree = () => {
  getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
    console.log(res, "99999999");
    treeRef.value.getTreeData(res.data);
  });
};
//前往检测
const handleDetection = () => {
  router.push({
    path: "/detection",
  });
};
onMounted(() => {
  console.log();
  getTree();
  getPieData();
});
</script>
<style lang="scss" scoped>
.static {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #eee;
  .left_tree {
    width: auto;
    height: 100%;
    background-color: #fff;
  }
  .right_container {
    flex: 1;
    width: 100%;
    padding: 0 10px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .container_title {
      width: 100%;
      // min-height: 60px;
      height: auto !important;
      background: #fff;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 10px;
      border-radius: 4px;
      padding: 10px;
      box-sizing: border-box;
      .el-form {
        width: 100%;
        .el-form-item {
          .el-button {
            margin: 0 10px;
          }
        }
      }
      ::v-deep .el-form-item {
        margin-bottom: 8px !important;
      }
    }
    .container_charts {
      width: 100%;
      height: 350px;
      // border: 2px solid green;
      background-color: #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .charts_info {
        flex: none;
        width: 32.9%;
        height: 100% !important;
        // border: 2px solid pink;
        background-color: #fff;
        border-radius: 4px;
      }
    }
    .container_table {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }
}
.el-select {
  min-width: 180px;
}
</style>
