<template>
  <!-- 自动检测页面 -->
  <div class="test">
    <div class="test_left">
      <Tree ref="treeRef"></Tree>
    </div>
    <div class="test_right">
      <el-descriptions
        style="
          width: 100%;
          border-radius: 6px;
          margin-bottom: 10px;
          background-color: #fff;
          padding: 10px;
        "
        :column="3"
        border
      >
        <template #extra>
          <el-progress
            style="width: 80%"
            :percentage="percentage"
            :color="customColors"
          />
          <div class="test_button">
            <el-button
              type="danger"
              v-if="!isPause"
              :icon="Close"
              @click="handlePauseTest"
              >暂停检测</el-button
            >
            <el-button
              type="warning"
              v-if="isPause"
              :icon="Refresh"
              @click="handlePauseTest"
              >继续检测</el-button
            >
            <el-button type="primary" :icon="Check" @click="handleFinishTest"
              >完成检测</el-button
            >
          </div>
        </template>
        <el-descriptions-item width="0px" label="上送数据总数">
          {{ num }}
        </el-descriptions-item>
        <el-descriptions-item width="0px" label="已上送数据数">
          {{ num1 }}
        </el-descriptions-item>
        <el-descriptions-item width="0px" label="待上送数据数">
          {{ num2 }}
        </el-descriptions-item>
      </el-descriptions>
      <!-- 右侧列表 -->
      <div class="right_table">
        <!-- 模拟列表样式 -->
        <!-- 表头设备 -->
        <div class="table_left">
          <p>测试项目</p>
          <div v-for="(item, index) in deviceTestList" :key="index">
            {{ item.name }}
          </div>
        </div>
        <div class="table_right">
          <div class="right_device_title">
            <p v-for="(item, index) in deviceData" :key="index">
              {{ item.name }}
            </p>
          </div>
          <div class="right_device_status">
            <div
              class="status_info"
              v-for="(item, index) in deviceTestList"
              :key="index"
            >
              <p v-for="(vv, vvs) in item.children" :key="vvs">
                {{ vv.status }}
              </p>
            </div>
          </div>
        </div>
        <!-- <div class="table_body"></div> -->
        <!-- </div> -->
        <!-- ------------------------ -->
        <ProTable
          v-if="false"
          ref="proTable"
          :columns="columns"
          :request-api="getTableList"
          :init-param="initParam"
          :data-callback="dataCallback"
          @drag-sort="sortTable"
        >
          <!-- 表格 header 按钮 -->
          <template #tableHeader> </template>
        </ProTable>
      </div>
      <!-- 右侧状态加载 -->
      <div class="right_status" ref="statusRef">
        <p v-for="(item, index) in statusList" :key="index">
          输入：{{ item.remark }} -{{
            item.status == 0 ? "输出完毕" : "输入中，请稍后！"
          }}<br />
          <span v-if="index == statusList.length - 1">...</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import Tree from "./components/tree.vue";
import { data } from "@/api/plan/autoTest.json";
import ProTable from "@/components/ProTable/index.vue";
import { useTransition } from "@vueuse/core";
import { getPlanList } from "@/api/plan/planList";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  CirclePlus,
  Delete,
  EditPen,
  Download,
  Upload,
  View,
  Check,
  Plus,
  Refresh,
  Search,
  Close,
} from "@element-plus/icons-vue";
const treeRef = ref<any>();
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  { type: "selection", fixed: "left", width: 70 },
  //   { type: "sort", label: "Sort", width: 80 },
  //   { type: "expand", label: "Expand", width: 85 },
  {
    prop: "planName",
    label: "计划名称",
    width: 120,
  },
  {
    prop: "checkMode",
    label: "检测模式",
    width: 120,
    render: (scope: any) => {
      return scope.row.checkMode == 0
        ? "模拟式"
        : scope.row.checkMode == 1
          ? "对比式"
          : scope.row.checkMode == 2
            ? "数字式"
            : scope.row.checkMode;
    },
  },
  {
    prop: "checkFrom",
    label: "检测源",
    width: 120,
    render: (scope: any) => {
      return scope.row.checkFrom == 0
        ? "标准源-福禄克-6100A"
        : scope.row.checkFrom == 1
          ? "标准源-昂立-PF2"
          : scope.row.checkFrom == 2
            ? "高精度设备-PQS882-1"
            : scope.row.checkFrom;
    },
  },
  {
    prop: "numberFromName",
    label: "源名称",
    render: (scope: any) => {
      return scope.row.numberFromName == 0
        ? "分钟统计数据最大值"
        : scope.row.numberFromName == 1
          ? "分钟统计数据最小值"
          : scope.row.numberFromName == 2
            ? "分钟统计数据CP95值"
            : scope.row.numberFromName;
    },
  },
  {
    prop: "checkExe",
    label: "检测脚本",
    width: 120,
    render: (scope: any) => {
      return scope.row.checkExe == 0
        ? "国网入网检测脚本（单影响量-模拟式）"
        : scope.row.checkExe == 1
          ? "国网入网检测脚本"
          : scope.row.checkExe == 2
            ? "/"
            : scope.row.checkExe;
    },
  },
  {
    prop: "wctx",
    label: "误差体系",
    width: 120,
    render: (scope: any) => {
      return scope.row.wctx == 0
        ? "Q/GDW 1650.2- 2016"
        : scope.row.wctx == 1
          ? "Q/GDW 10650.2 - 2021"
          : scope.row.wctx == 2
            ? "/"
            : scope.row.wctx;
    },
  },
  {
    prop: "checkStatus",
    label: "检测状态",
    width: 120,
    render: (scope: any) => {
      return scope.row.checkStatus == 1
        ? "未检测"
        : scope.row.checkStatus == 2
          ? "检测中"
          : scope.row.checkStatus == 3
            ? "检测完成"
            : scope.row.checkStatus;
    },
  },
  {
    prop: "checkReport",
    label: "检测报告",
    width: 120,
    render: (scope: any) => {
      return scope.row.checkReport == 1
        ? "未生成"
        : scope.row.checkReport == 2
          ? "部分生成"
          : scope.row.checkReport == 3
            ? "全部生成"
            : scope.row.checkReport;
    },
  },
  {
    prop: "checkResult",
    label: "检测结果",
    width: 120,
    render: (scope: any) => {
      return scope.row.checkReport == 1
        ? "/"
        : scope.row.checkReport == 2
          ? "符合"
          : scope.row.checkReport == 3
            ? "不符合"
            : scope.row.checkReport;
    },
  },
  // { prop: "operation", label: "操作", fixed: "right", width: 250 },
]);
const getTreeData = () => {
  treeRef.value && treeRef.value.getTreeData(data);
};
// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const tableList = ref([]);
const dataCallback = (data: any) => {
  return {
    list: data || data.data || data.list,
    total: data.length || data.total, //total
  };
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getPlanList(newParams);
};
const percentage = ref(0);

const customColors = [
  { color: "red", percentage: 0 },
  { color: "red", percentage: 10 },
  { color: "red", percentage: 20 },
  { color: "red", percentage: 30 }, //红
  { color: "red", percentage: 40 },
  { color: "#e6a23c", percentage: 50 },
  { color: "#e6a23c", percentage: 60 },
  { color: "#e6a23c", percentage: 70 }, //黄
  { color: "#e6a23c", percentage: 80 }, //1989fa
  { color: "#e6a23c", percentage: 90 }, //1989fa
  { color: "#5cb87a", percentage: 100 }, //绿
];
//加载进度条
const refreshProgress = () => {
  if (percentage.value < 100) {
    percentage.value += 10;
    num1.value += 1001;
    num2.value -= 1001;
  } else {
    percentage.value = 0;
    num1.value = 9999;
    num2.value = 162001;
    statusList.value = [];
    deviceTestList.value = [];
    statusId.value = 0;
  }
};

let timer: any = ref("");
const statusTimer: any = ref("");
//检测列表数据
const deviceTestList = ref<any>([]);
//检测结果数据
const deviceList = ref<any>([]);
//前一个页面带过来的设备数据
const deviceData = ref([
  {
    id: 0,
    name: "设备1通道1",
    status: Math.floor(Math.random() * 4),
  },
  {
    id: 1,
    name: "设备2通道2",
    status: Math.floor(Math.random() * 4),
  },
  {
    id: 2,
    name: "设备3通道3",
    status: Math.floor(Math.random() * 4),
  },
  {
    id: 3,
    name: "设备4通道4",
    status: Math.floor(Math.random() * 4),
  },
]);
const interValTest = () => {
  timer.value = setInterval(() => {
    deviceTestList.value.push({
      id: 0,
      name: `频率 ${statusId.value}Hz`,
      children: deviceData.value,
      // status: Math.floor(Math.random() * 4),
    });
    refreshProgress();
  }, 2000);
  statusTimer.value = setInterval(() => {
    getStatusList();
    statusList.value.map((item: any, index: any) => {
      if (index == statusList.value.length - 1) {
        item.status = 1;
      } else {
        item.status = 0;
      }
    });
  }, 2000);
};
interValTest();
//暂停检测
const isPause = ref<boolean>(false);
const handlePauseTest = () => {
  if (!isPause.value) {
    clearInterval(timer.value);
    clearInterval(statusTimer.value);
  } else {
    interValTest();
  }
  isPause.value = !isPause.value;
};
//完成检测
const handleFinishTest = () => {
  ElMessage.success("完成检测");
};
// 表格拖拽排序
const sortTable = ({
  newIndex,
  oldIndex,
}: {
  newIndex?: number;
  oldIndex?: number;
}) => {
  console.log(newIndex, oldIndex);
  console.log(proTable.value?.tableData);
  ElMessage.success("修改列表排序成功");
};
const num = ref(0),
  num1 = ref(0),
  num2 = ref(0);
const allUploadNum = useTransition(num, {
  duration: 1500,
});
const isUploadNum = useTransition(num1, {
  duration: 1500,
});
const notUploadNum = useTransition(num2, {
  duration: 1500,
});

num.value = 172000;
num1.value = 9999;
num2.value = num.value - num1.value;
const statusList: any = ref([]);
let statusId = ref(0);
const statusRef = ref();
const getStatusList = () => {
  statusId.value++;
  statusList.value.push({
    id: statusId.value,
    remark: `频率 ${statusId.value}Hz`,
    status: 0,
  });
  // console.log(statusRef.value.offsetHeight);
  nextTick(() => {
    if (statusRef.value)
      statusRef.value.scrollTop = statusRef.value.scrollHeight;
  });
};
onMounted(() => {
  getTreeData();
});
</script>
<style lang="scss" scoped>
.test {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .test_left {
    max-width: 300px;
    min-width: 200px;
    width: 15%;
    height: 100%;
    overflow: auto;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 6px;
    padding: 5px !important;
    box-sizing: border-box;
  }
  .test_right {
    flex: 1;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .right_table {
      flex: 1;
      // width: 100%;
      // height: calc(100vh - 330px);
      height: 100%;
      flex: 1 !important;
      height: calc(100vh - 560px);
      border-radius: 4px;
      background-color: #fff;
      width: 100% !important;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      .table_left {
        width: 150px;
        height: 100%;
        overflow: auto;
        p {
          line-height: 40px;
          margin: 0;
          width: 100px;
        }
      }
      .table_right {
        flex: 1;
        display: flex;
        overflow: auto;
        flex-direction: column;
        .right_device_title {
          width: 100%;
          display: flex;
          justify-content: space-between;
          // overflow-x: auto !important;
          p {
            flex: 1;
            // max-width: 150px;
            width: auto;
            padding: 0 10px;
            margin: 0;
            line-height: 40px;
          }
        }
        .right_device_status {
          width: 100%;
          flex: 1;
          .status_info {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
              flex: 1;
              // max-width: 150px;
              min-width: auto;
              margin: 0;
              padding: 0 10px;
              text-align: left;
            }
          }
        }
      }
    }
    .right_status {
      width: 100%;
      height: 150px;
      overflow: auto;
      background-color: #fff;
      border-radius: 4px;
      margin-top: 10px;
      padding: 10px 0 20px 10px;
      box-sizing: border-box;
      p {
        height: 20px;
        font-size: 14px;
        margin: 0 !important;
      }
      :nth-last-child(1) {
        margin-bottom: 40px;
      }
    }
  }
}

::v-deep .header-button-lf {
  clear: both !important;
}

::v-deep .el-descriptions__extra {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .test_button {
    width: auto;
    display: flex;
    align-items: center;
  }
}
</style>
