<template>
  <div class="el-overlay">
    <div class="box">
      <div class="box-header">
        <div class="box-title">维护保养</div>
        <div class="box-btn" @click="close"></div>
      </div>
      <div class="box-content">
        <div class="box-content-top">
          <div class="left-chart-box">
            <div class="title">
              <span> 已完成维保统计 </span>
              <el-date-picker
                v-model="value1"
                type="year"
                placeholder="请选择年份"
                @change="completedMaintenancePlan"
              />
            </div>
            <div class="chart" id="pieChart1"></div>
          </div>
          <div class="right-chart-box">
            <div class="title">
              <span> 保养计划 </span>
              <el-date-picker
                v-model="value2"
                type="year"
                placeholder="请选择年份"
                @change="maintenancePlan"
              />
            </div>
            <div class="chart" id="pieChart2"></div>
          </div>
        </div>
        <div class="box-content-bottom">
          <div class="title">
            <span> 维护计划 </span>
            <el-select
              @change="getMaintenancePlanData()"
              clearable
              v-model="planParams.facName"
              placeholder="请选择"
            >
              <el-option
                v-for="item in allName"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
          <div class="box-content-bottom-table">
            <el-table :data="tableList" style="width: 100%">
              <el-table-column prop="keepPlanTime" label="计划时间" />
              <el-table-column prop="facCode" label="设备编码" />
              <el-table-column prop="facName" label="设备名称" />
              <el-table-column prop="keepFinishTime" label="执行时间" />
              <el-table-column prop="keepContent" label="保养内容" />
              <el-table-column prop="status" label="状态" align="center">
                <template #default="{ row }">
                  <div :style="row.status ? 'color:rgba(28, 238, 251, 1)' : ''">
                    {{ row.status ? "已完成" : "未完成" }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div style="float: right">
            <el-pagination
              v-model:current-page="planParams.pageIndex"
              :page-size="planParams.pageSize"
              :size="planParams.pageSize"
              layout="total, prev, pager, next"
              :total="total"
              prev-text="上一页"
              next-text="下一页"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref, nextTick, reactive } from "vue";
import {
  countKeepRecord,
  getMaintenancePlan,
  allDeviceNames,
} from "@/api/equipmentManagement/index";
const emit = defineEmits(["closeMaintenance"]);

function close() {
  emit("closeMaintenance", -1);
}
const tableList = ref([
  // {
  //   planDate: "2023-12-12",
  //   planFinishDate: "2024-07-26",
  //   type: "穿梭车保养",
  //   content: "润滑",
  //   deviceNum: "Car1",
  //   env: "已执行",
  //   people: "---",
  // },
  // {
  //   planDate: "2023-12-12",
  //   planFinishDate: "2024-07-26",
  //   type: "穿梭车保养",
  //   content: "润滑",
  //   deviceNum: "Car1",
  //   env: "已执行",
  //   people: "---",
  // },
  // {
  //   planDate: "2023-12-12",
  //   planFinishDate: "2024-07-26",
  //   type: "穿梭车保养",
  //   content: "润滑",
  //   deviceNum: "Car1",
  //   env: "已执行",
  //   people: "---",
  // },
]);
// 已完成维保统计
function drawLeftChart(list) {
  const color = [
    "rgba(25, 174, 250, 0.7)",
    "rgba(28, 238, 251, 0.7)",
    "rgba(255, 206, 84, 0.7)",
    "rgba(174, 211, 255, 0.7)",
  ];
  let result = [];
  let total = list.totalCount;
  for (var i = 0; i <  list.columnDatas.length; i++) {
    // if (key != "totalCount") {
      result.push({
        name: list.columnDatas[i].name,
        value: list.columnDatas[i].number,
      });
    // } else {
    //   total = list[key];
    // }
  }
  let dom = document.querySelector("#pieChart1");
  dom.removeAttribute("_echarts_instance_");
  let myChart;
  myChart = echarts.init(dom);

  let dataStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      shadowBlur: 40,
      borderWidth: 10,
      shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
    },
  };
  let placeHolderStyle = {
    normal: {
      color: "rgba(216, 233, 253, 0.10)",
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
    },
  };
  let option = {
    tooltip: {
      trigger: "item",
      show: true,
      formatter: "{b} : <br/>{d}%",
      backgroundColor: "rgba(0,0,0,0.7)", // 背景
      padding: [8, 10], //内边距
      extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
      formatter: function (params) {
        // return params.name + ': ' + total*params.value
        return params.name + ': ' + params.value
      },
    },
    legend: {
      orient: "vertical",
      icon: "rect",
      left: "60%",
      top: "center",
      data: result.map((el) => {
        return el.name;
      }),
      textStyle: {
        padding: [10, 14],
        color: "#fff",
      },
      itemWidth: 8,
      itemHeight: 8,
    },
    series: [
      {
        name: "背景1",
        type: "pie",
        clockWise: false,
        radius: ["73%", "79%"],
        center: ["27%", "50%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        label: {
          borderRadius: "10",
        },
        data: [
          {
            value: 0,
            name: "背景1",
          },
          {
            value: 45.4,
            name: "",
            tooltip: {
              show: false,
            },
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: "背景2",
        type: "pie",
        clockWise: false,
        radius: ["50%", "64%"],
        center: ["27%", "50%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        label: {
          borderRadius: "10",
        },
        data: [
          {
            value: 0,
            name: "背景2",
          },
          {
            value: 10,
            name: "",
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "rgba(216, 233, 253, 0.20)",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      },
      {
        name: "穿梭车保养",
        type: "pie",
        clockWise: true,
        radius: ["0%", "64%"],
        center: ["27%", "50%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: result.map((el, index) => {
          return {
            value: el.value,
            name: el.name,
            itemStyle: {
              normal: {
                color: color[index],
              },
            },
          };
        }),
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// 保养计划
function drawRightChart(list) {
  const color = [
    "rgba(25, 174, 250, 0.7)",
    "rgba(28, 238, 251, 0.7)",
    "rgba(255, 206, 84, 0.7)",
    "rgba(174, 211, 255, 0.7)",
  ];
  let result = [];
  let total = list.totalCount;
  for (var i = 0; i <  list.columnDatas.length; i++) {
    // if (key != "totalCount") {
      result.push({
        name: list.columnDatas[i].name,
        value: list.columnDatas[i].number,
      });
    // } else {
    //   total = list[key];
    // }
  }
  let dom = document.querySelector("#pieChart2");
  dom.removeAttribute("_echarts_instance_");
  let myChart;
  myChart = echarts.init(dom);
  let dataStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      shadowBlur: 40,
      borderWidth: 10,
      shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
    },
  };
  let placeHolderStyle = {
    normal: {
      color: "rgba(216, 233, 253, 0.10)",
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
    },
  };
  let option = {
    tooltip: {
      trigger: "item",
      show: true,
      formatter: "{b} : <br/>{d}%",
      backgroundColor: "rgba(0,0,0,0.7)", // 背景
      padding: [8, 10], //内边距
      extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
      formatter: function (params) {
        // return params.name + ': ' + total*params.value
        return params.name + ': ' + params.value
      },
    },
    legend: {
      orient: "vertical",
      icon: "rect",
      left: "60%",
      top: "center",
      data: result.map((el) => {
        return el.name;
      }),
      textStyle: {
        padding: [0, 14],
        color: "#fff",
      },
      itemWidth: 8,
      itemHeight: 8,
    },
    series: [
      {
        name: "背景1",
        type: "pie",
        clockWise: false,
        radius: ["73%", "79%"],
        center: ["27%", "50%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        label: {
          borderRadius: "10",
        },
        data: [
          {
            value: 0,
            name: "背景1",
          },
          {
            value: 45.4,
            name: "",
            tooltip: {
              show: false,
            },
            itemStyle: placeHolderStyle,
          },
        ],
      },
      {
        name: "背景2",
        type: "pie",
        clockWise: false,
        radius: ["50%", "64%"],
        center: ["27%", "50%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        label: {
          borderRadius: "10",
        },
        data: [
          {
            value: 0,
            name: "背景2",
          },
          {
            value: 10,
            name: "",
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "rgba(216, 233, 253, 0.20)",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      },
      {
        name: "穿梭车保养",
        type: "pie",
        clockWise: true,
        radius: ["0%", "64%"],
        center: ["27%", "50%"],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: result.map((el, index) => {
          return {
            value: el.value,
            name: el.name,
            itemStyle: {
              normal: {
                color: color[index],
              },
            },
          };
        }),
        // {
        //   value: 20,
        //   name: "穿梭车保养",
        //   itemStyle: {
        //
        //   },
        // },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
const value1 = ref(new Date());
const value2 = ref(new Date());

// 保养计划接口
function maintenancePlan() {
  let params = {
    year: value2.value.getFullYear(),
    status: false,
  };
  countKeepRecord(params).then((res) => {
    drawRightChart(res.result);
  });
}
// 已完成维保计划接口
function completedMaintenancePlan() {
  let params = {
    year: value1.value.getFullYear(),
    status: true,
  };
  countKeepRecord(params).then((res) => {
    drawLeftChart(res.result);
  });
}

const planParams = reactive({
  pageIndex: 1,
  pageSize: 5,
  facName: "",
});
const total = ref(0);
// 维护计划接口
function getMaintenancePlanData() {
  getMaintenancePlan(planParams).then((res) => {
    total.value = res.result.totalNum;
    tableList.value = res.result.data;
  });
}

const allName = ref([]);
// 获取所有设备名称
function getAllDeviceNames() {
  allDeviceNames().then((res) => {
    allName.value = res.result;
  });
}
onMounted(() => {
  maintenancePlan();

  completedMaintenancePlan();

  getMaintenancePlanData();

  getAllDeviceNames();
  // drawRightChart();
});
</script>
<style scoped lang="scss">
.box {
  width: vw(1380);
  height: vh(716);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background-image: url("@/assets/images/dialog/device-dialog1.png");
  background-size: 100% 100%;
  &-header {
    width: 100%;
    height: vh(60);
    font-family: "pangmen";
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
  }
  &-title {
    line-height: vh(60);
  }
  &-btn {
    background-image: url("@/assets/images/dialog/close.png");
    width: vw(34);
    height: vh(34);
    position: absolute;
    right: vw(20);
    top: vh(12);
    cursor: pointer;
  }
  &-content {
    height: vh(716 - 60);
    padding: vh(20) vw(20);
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    &-bottom {
      padding: vh(20) vw(20);
      box-sizing: border-box;
    }
    &-top {
      width: 100%;
      justify-content: space-between;
      height: vh(288);
      display: flex;
      .left-chart-box,
      .right-chart-box {
        width: vw(660);
        height: vh(288);
        border: 1px solid;
        padding: vh(20) 0 0 vw(20);
        box-sizing: border-box;
        border-image: linear-gradient(
            180deg,
            rgba(144, 218, 255, 0.5),
            rgba(144, 218, 255, 0.1000000015)
          )
          1 1;
      }
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: vw(614);
        height: vh(36);
        line-height: vh(36);
        padding-left: vw(32);
        font-family: "pangmen";
        font-size: 1.375rem;
        background-image: url("@/assets/images/dialog/title3.png");
        background-size: 100% 100%;
        box-sizing: border-box;
      }
      .chart {
        height: vh(232);
        width: 100%;
      }
    }
    &-bottom {
      width: 100%;
      height: vh(308);
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(144, 218, 255, 0.5),
          rgba(144, 218, 255, 0.1000000015)
        )
        1 1;
      .title {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        height: vh(36);
        line-height: vh(36);
        background-image: url("@/assets/images/dialog/brand-title.png");
        background-size: 100% 100%;
        font-family: "pangmen";
        font-size: 1.375rem;
        padding-left: vw(32);
        box-sizing: border-box;

        margin-bottom: vh(12);
      }
      &-table {
        height: vh(192);
        margin-bottom: vh(5);
      }
    }
  }
}

:deep(.el-table__row--striped) {
  background-image: none !important;
}

// :deep(tr.el-table__row td.el-table__cell) {
//   background-color: rgba(174, 211, 255, 0.20) !important;

// }

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table .el-table__cell) {
  padding: 0;
}
:deep(.el-table .cell) {
  height: 100%;
  line-height: vh(48);
}
:deep(.el-table tr),
:deep(.el-table),
:deep(.el-table th),
:deep(.el-table td) {
  background-color: transparent;
}
:deep(.el-table__row) {
  height: vh(48);
  border: 1px solid rgba(144, 218, 255, 1) !important;
}
:deep(.el-table) {
  color: rgba(233, 244, 255, 1);
  font-size: 0.8rem;
  height: 100%;
  --el-table-row-hover-bg-color: rgba(174, 211, 255, 0.2) !important;
}
:deep(.el-table thead) {
  color: rgba(255, 255, 255, 1);
  font-size: 0.8rem;
  background-image: url("@/assets/images/dialog/table-thead.png");
  line-height: vh(48);
  font-weight: normal;
}
:deep(.el-table th.el-table__cell.is-leaf),
:deep(.el-table td.el-table__cell) {
  border-color: transparent;
}
:deep(.el-pager li) {
  background-color: #d8e9fd0d;
  color: #fff;
  margin: 0 0.25rem;
}
:deep(.el-pagination button) {
  background-color: rgba(216, 233, 253, 0.05);
  font-size: 0.875rem;
  color: #fff;
}
:deep(.el-pager li.is-active) {
  background-color: rgba(25, 194, 250, 0.6);
}
:deep(.el-pagination button.is-disabled),
:deep(.el-pagination button:disabled) {
  color: #a8abb2;
}
:deep(.el-pagination__total) {
  color: #fff;
  position: absolute;
  left: vw(40) !important;
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: none;
}
:deep(.el-date-editor.el-input) {
  width: vw(160);
  height: vh(28);
  border: 1px solid;
  box-sizing: border-box;
  border-image: linear-gradient(
      180deg,
      rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
      rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.2)
    )
    1 1;
}
:deep(.el-input) {
  width: vw(160);
  height: vh(28);
}
</style>