<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-left">
          <div class="title">
            <span>电池列表</span>
          </div>
          <p>电池编号</p>
          <ul>
            <li v-for="(item, index) in batteryNumList" :key="'li' + index">
              {{ item }}
            </li>
          </ul>
        </div>

        <div class="box-content-right">
          <!-- 统计分析 -->
          <div class="top">
            <div class="title">
              <span>统计分析</span>
            </div>
            <div style="display: flex; justify-content: space-between">
              <div class="left-plate">
                <section
                  v-for="(item, index) in analysisList"
                  :key="'analysis' + index"
                  :style="'background-image:url(' + item.pic + ')'"
                >
                  <span>{{ item.name }}</span>
                  <span :style="'color:' + item.color">{{ item.num }}</span>
                </section>
              </div>
              <div class="right-plate">
                <div class="right-plate-title">
                  <span>充电时间统计</span>
                </div>
                <div class="right-plate-chart" id="plate-chart"></div>
              </div>
            </div>
          </div>
          <!-- 电池检测 -->
          <div class="bottom">
            <div class="title">
              <span>电池检测</span>
            </div>
            <div class="bottom-box">
              <el-table
                :data="tableList"
                style="width: 100%"
                @row-click="rowClick"
              >
                <el-table-column prop="startTime" label="充电开始时间" />
                <el-table-column
                  prop="endTime"
                  label="充电结束时间"
                  align="center"
                />
                <el-table-column prop="errorMsg" label="故障信息" align="right" />
              </el-table>
            </div>

            <div style="float: right">
              <el-pagination
                v-model:current-page="currentPage1"
                :page-size="100"
                :size="size"
                layout="total, prev, pager, next"
                :total="1000"
                prev-text="上一页"
                next-text="下一页"

              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import getPath from "@/utils/getPath";
import * as echarts from "echarts";
const batteryNumList = ref([
  20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
  20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
]);
const analysisList = ref([
  {
    pic: getPath.analysisItem1,
    name: "报警次数（次）",
    num: 0,
    color: "rgba(255, 206, 84, 1)",
  },
  {
    pic: getPath.analysisItem2,
    name: "充电次数（次）",
    num: 3,
    color: "rgba(25, 174, 250, 1)",
  },
  {
    pic: getPath.analysisItem3,
    name: "使用寿命（月）",
    num: 0,
    color: "rgba(28, 238, 251, 1)",
  },
]);
const emit = defineEmits(["closeBattery"]);

const tableList = ref([
  {
    startTime: "2023-03-08T17:45:04.417",
    endTime:'2023-03-08T17:45:04.417',
    errorMsg:'无故障'
  },
  {
    startTime: "2023-03-08T17:45:04.417",
    endTime:'2023-03-08T17:45:04.417',
    errorMsg:'无故障'
  },
]);
function close() {
  emit("closeBattery", -1);
}

function drawLineChart() {
  let dom = document.querySelector("#plate-chart");
  dom.removeAttribute("_echarts_instance_");
  let myChart;
  myChart = echarts.init(dom);
  let option = {
    tooltip: {},
    grid: {
      top: "20%",
      left: "1%",
      right: "1%",
      bottom: "8%",
      containLabel: true,
    },
    // legend:{
    //     show:true,
    //     icon:'rect',
    // },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#fff",
            margin: 15,
          },
        },
        axisTick: { show: false },
        data: ["1", "2", "3"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:min",
        nameTextStyle: {
          color: "#FFF",
          align: "middle",
          padding: [0, 0, 0, 0],
        },
        // min: 0,
        // max: 1,
        // splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#233e64",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "充电时间统计",
        type: "line",

        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

        lineStyle: {
          normal: {
            color: "rgba(24, 174, 250, 1)", // 线条颜色
          },
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                { offset: 0, color: "rgba(25, 174, 250, 1)" },
                { offset: 0.9, color: "rgba(25, 174, 250, 0)" },
              ],
              false
            ),

            // shadowColor: "rgba(25, 174, 250, 1)", //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
        },
        data: [0.3, 0.8, 0.4, 0.5, 0.8, 0.9, 0.4],
      },
    ],
  };
  nextTick(() => {
    myChart.setOption(option);
  });

  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

onMounted(() => {
  drawLineChart();
});
</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);
    text-shadow: 0px 0px 6px #19aefa;
  }
  &-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;
    display: flex;
    justify-content: space-between;
    &-left,
    &-right {
      box-sizing: border-box;
    }
    &-left {
      padding: vh(20) vw(20);
      width: vw(280);
      height: vh(616);
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
          rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
        )
        1 1;
      p {
        width: vw(244);
        height: vh(36);
        background-size: 100% 100%;
        line-height: vh(36);
        color: rgba(28, 238, 251, 1);
        padding-left: 0.875rem;
        background-image: url("@/assets/images/dialog/num-bg.png");
        background-size: 100% 100%;
        box-sizing: border-box;
      }
      ul {
        overflow-y: scroll;
        overflow-x: hidden;
        height: vh(476);
        li {
          width: vw(224);
          height: vh(36);
          background-image: url("@/assets/images/dialog/num-default.png");
          padding-left: vw(14);
          box-sizing: border-box;
          line-height: vh(36);
          font-size: 0.875rem;
          margin: vh(2) 0;
        }
      }
      ul::-webkit-scrollbar {
        width: vw(8); /* 设置滚动条的宽度 */
        background-color: transparent; /* 滚动条的背景色 */
        border: 1px solid;
        border-radius: 8px;
        border-image: linear-gradient(
            180deg,
            rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
            rgba(
              144.00000661611557,
              218.00000220537186,
              255,
              0.10000000149011612
            )
          )
          1 1;
      }
      ul::-webkit-scrollbar-track {
        background: transparent; /* 轨道的背景色 */
      }
      ul::-webkit-scrollbar-thumb {
        background-color: rgba(187, 220, 255, 0.7); /* 滑块的背景色 */
        //   border-radius: 8px; /* 滑块的圆角 */
      }
    }
    &-right {
      width: vw(1040);
      height: vh(616);
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      .top,
      .bottom {
        padding: vh(20) vw(20);
        box-sizing: border-box;
        width: 100%;
        height: vh(298);
        border: 1px solid;
        border-image: linear-gradient(
            180deg,
            rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
            rgba(
              144.00000661611557,
              218.00000220537186,
              255,
              0.10000000149011612
            )
          )
          1 1;
        .title {
          background-image: url("@/assets/images/dialog/battery-title2.png");
        }
      }
      .top {
        .left-plate {
          section {
            width: vw(352);
            height: vh(60);
            background-size: 100% 100%;
            font-size: 0.875rem;
            margin-bottom: vh(15);
            display: flex;
            align-items: center;
            padding: 0 vw(26) 0 vw(76);
            box-sizing: border-box;
            justify-content: space-between;
          }
          section > span:nth-child(2) {
            font-size: 1.625rem;
          }
        }
        .right-plate {
          &-title {
            padding-left: vw(28);
            box-sizing: border-box;
            width: vw(614);
            margin-top: vh(16);
            margin-bottom: vh(10);
            height: vh(12);
            font-size: 1.125rem;
            background-image: url("@/assets/images/dialog/under-line1.png");
            background-size: 100% 100%;
            span {
              position: relative;
              top: vh(-20);
            }
          }
          &-chart {
            height: vh(192);
            width: vw(628);
          }
        }
      }
      .bottom {
        position: relative;
        &-box {
          height: vh(150);
          margin-bottom: vh(32);
        }
      }
    }
  }
}
.title {
  width: 100%;
  height: vh(36);
  background-size: 100% 100%;
  background-image: url("@/assets/images/dialog/battery-title.png");
  padding-left: vw(32);
  line-height: vh(36);
  box-sizing: border-box;
  margin-bottom: vh(16);
  font-family: "pangmen";
  text-shadow: 0px 0px 6px #19aefa;
  font-size: 1.375rem;
}
</style>