<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">能耗管理</span>
    </div>
    <div class="middle">
      <div class="echarts">
        <div class="echarts1">
          <div class="title">用户类别占比</div>
          <div id="annulus"></div>
        </div>
        <div class="echarts2"></div>
      </div>
      <div class="table">
        <div class="table1"></div>
        <div class="table2"></div>
      </div>
    </div>
  </div>
  <!-- 编辑按钮 -->
  <el-dialog
    class="editDialog"
    v-model="editVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="titleDialog"
    align-center
    width="600"
    :before-close="cancelEdit"
  >
    <el-form
      ref="editRef"
      :model="editRuleForm"
      :rules="editRules"
      label-width="90px"
      class="demo-ruleForm"
      :size="formSize"
      label-position="left"
      status-icon
    >
      <el-form-item label="用户部门 :" prop="userDepartment">
        <el-input
          v-model="editRuleForm.userDepartment"
          placeholder="请输入用户部门"
          clearable
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="用户名 :" prop="userName">
        <el-input
          v-model="editRuleForm.userName"
          placeholder="请输入用户名"
          clearable
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="用户角色 :" prop="userRoles">
        <el-select
          v-model="editRuleForm.userRoles"
          class="m-2"
          placeholder="请选择用户角色"
          style="width: 500px"
        >
          <el-option label="清洁工" value="1" />
          <el-option label="洗碗工" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="微校卡号 :" prop="schoolCard">
        <el-input
          v-model="editRuleForm.schoolCard"
          placeholder="请输入微校卡号"
          clearable
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="身份证号 :" prop="idNumber">
        <el-input
          v-model="editRuleForm.idNumber"
          placeholder="请输入身份证号"
          style="width: 500px"
        >
          <template #append>
            <div @click="readCard">读卡</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="指纹 :" prop="fingerprint">
        <el-input
          v-model="editRuleForm.fingerprint"
          placeholder="请输入指纹"
          style="width: 500px"
        >
          <template #append>
            <div @click="entering">录入</div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmEdit(editRef)"
        >
          保存
        </el-button>
        <el-button @click="cancelEdit(editRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 用户类别占比
const category = ref();

// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [
    // {
    //   userName: "双人房",
    //   userPhone: 150,
    //   teamName: 12,
    // },
    // {
    //   userName: "双人房",
    //   userPhone: 150,
    //   teamName: 12,
    // },
    // {
    //   userName: "双人房",
    //   userPhone: 150,
    //   teamName: 12,
    // },
    // {
    //   userName: "双人房",
    //   userPhone: 150,
    //   teamName: 12,
    // },
  ],
});
const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(); // 当前总数

// 编辑功能
const titleDialog = ref("");
const editVisible = ref(false);
const editRef = ref();
const editRuleForm = reactive({
  userDepartment: "", // 用户部门
  userName: "", // 用户名
  userRoles: "", // 用户角色
  schoolCard: "", // 微校卡号
  idNumber: "", // 身份证号
  fingerprint: "", // 指纹
  id: "",
});

// 表单验证
const editRules = reactive({
  userDepartment: [
    { required: true, message: "用户部门不能为空", trigger: "blur" },
  ],
  userName: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
    },
  ],
  userRoles: [
    {
      required: true,
      message: "用户角色不能为空",
      trigger: "blur",
    },
  ],
  schoolCard: [
    {
      required: true,
      message: "微校卡号不能为空",
      trigger: "blur",
    },
  ],
  idNumber: [
    {
      required: true,
      message: "身份证号不能为空",
      trigger: "blur",
    },
  ],
  fingerprint: [
    {
      required: true,
      message: "指纹不能为空",
      trigger: "blur",
    },
  ],
});

// 用户类别占比
const echarts1 = async () => {
  category.value = echarts.init(document.getElementById("annulus"));
  let value = 20;
  category.value.setOption({
    // title: {
    //   text: "圆环图的例子",
    //   left: "center",
    //   top: "center",
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "6%",
      top: "15%",
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 15,
    },
    series: [
      {
        type: "pie",
        data: [
          {
            value: 224,
            name: "电子资源库",
            itemStyle: {
              color: "rgba(67, 181, 244, 1)",
            },
          },
          {
            value: 304,
            name: "课程资源库",
            itemStyle: {
              color: "rgba(137, 207, 245, 1)",
            },
          },
          {
            value: 484,
            name: "教学方案库",
            itemStyle: {
              color: "rgba(180, 226, 251, 1)",
            },
          },
          {
            value: 300,
            name: "第三资源库",
            itemStyle: {
              color: "rgba(212, 237, 251, 1)",
            },
          },
        ],
        center: ["40%", "48%"],
        radius: ["48%", "65%"],
        label: {
          show: true,
          //   position: "center",
          formatter: "{b} ({d}%)",
          padding: 1,
        },
        labelLine: {
          show: true,
          //   length: -1,
        },
      },
    ],
  });
};
const resizeChart = () => {
  category.value.resize();
};

//编辑按钮  （-------------------------------------------）
const editClick = async () => {
  titleDialog.value = "编辑";
  editVisible.value = true;
  //   let data = {
  //     linkId: row.id,
  //   };
  //   let res = await axios({
  //     method: "post",
  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
  //     headers: {},
  //     params: data,
  //   });
  //   console.log(res, "编辑中查找图片");
  //   if (res.data.code == 200) {
  //     // res.data.data.fileInfoList.forEach((item) => {
  //     //   item.uid = item.id;
  //     // });
  //     // fileList.list = res.data.data.fileInfoList;
  //     // ruleForm.fileListJson = fileList.list;
  //     res.data.data.forEach((item) => {
  //       item.uid = item.id;
  //     });
  //     fileList.list = res.data.data;
  //     ruleForm.fileListJson = fileList.list;
  //     // ElMessage({
  //     //   type: "success",
  //     //   showClose: true,
  //     //   message: res.data.message,
  //     //   center: true,
  //     // });
  //   } else {
  //     ElMessage({
  //       type: "error",
  //       showClose: true,
  //       message: res.data.message,
  //       center: true,
  //     });
  //   }
};

const cancelEdit = () => {
  editVisible.value = false;
  editRef.value.resetFields();
};

// 多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};
//导出功能
// const importExcel = async () => {
//   if (searchInput.createTime == null) {
//     searchInput.createTime = "";
//   }
//   let data = new FormData();
//   data.set("car_number", searchInput.carnumber);
//   data.set("create_time", searchInput.createTime);
//   let res = await axios({
//     method: "post",
//     url: api.value + "/carBook/cinfotoExcel.action",
//     headers: {
//       token: sessionStorage.getItem("token"),
//     },
//     data: data,
//   });
//   // console.log(res, "导出账号");
//   if (res.data.code == 200) {
//     // const elt = document.createElement("a");
//     // elt.setAttribute(
//     //   "href",
//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
//     // );
//     // elt.setAttribute("download", "file.png");
//     // elt.style.display = "none";
//     // document.body.appendChild(elt);
//     // elt.click();
//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
//     console.log("获得地址数据:", downloadPath);
//     var downloadLink = document.createElement("a");
//     downloadLink.style.display = "none"; // 使其隐藏
//     downloadLink.href = downloadPath;
//     downloadLink.download = "";
//     downloadLink.click();
//     document.body.appendChild(downloadLink);
//     document.body.removeChild(downloadLink);
//     ElMessage({
//       type: "success",
//       showClose: true,
//       message: res.data.message,
//       center: true,
//     });
//   } else {
//     ElMessage({
//       type: "error",
//       showClose: true,
//       message: res.data.message,
//       center: true,
//     });
//   }
// };
// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onMounted(() => {
  api.value = store.state.user.api;

  echarts1();
  window.addEventListener("resize", resizeChart);
});
</script>

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 89%;
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;

    span {
      margin-right: 20px;
      cursor: pointer;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }

  .middle {
    width: 96%;
    height: calc(100% - 61px);
    margin: 0 auto;
    color: #000;
    display: flex;
    flex-direction: column;
    .echarts {
      width: 100%;
      margin: 20px 0 15px 0;
      flex: 1;
      display: flex;
      .echarts1 {
        flex: 1;
        margin-right: 20px;
        border-radius: 8px;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
        .title {
          font-weight: 700;
          margin: 16px 30px;
        }
        #annulus {
          width: 100%;
          height: calc(100% - 56px);
          border: 1px solid red;
        }
      }
      .echarts2 {
        flex: 1;
        border-radius: 8px;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
      }
    }
    .table {
      width: 100%;
      flex: 1;
      margin: 0 0 20px 0;
      display: flex;
      .table1 {
        flex: 1;
        margin-right: 20px;
        border-radius: 8px;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
      }
      .table2 {
        flex: 1;
        border-radius: 8px;
        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
      }
    }
  }
  // 编辑按钮
  :deep(.editDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 30px 30px 10px 30px;
      .el-form-item__content {
        width: 200px;
        .el-input-group__append {
          background-color: rgba(222, 234, 252, 1);
          color: rgba(0, 97, 255, 1);
          cursor: pointer;
          user-select: none;
        }
      }
      .options {
        margin: 30px 20px 20px 0;
        width: 100%;
        .el-form-item__content {
          display: flex;
          flex-direction: row-reverse;
        }
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
