<template>
  <div class="backbone">
    <div>
      <h3>风场分析完成率</h3>
      <div id="main" style="width: 260px; height: 160px"></div>
    </div>
    <div>
      <h3>异常设备概览</h3>
      <div class="BOX">
        <div style="display: flex">
          <div class="YC01">
            <strong>4545</strong>
            <span>异常总数</span>
          </div>
          <div class="YC02">
            <strong>20</strong>
            <span>本月异常</span>
          </div>
        </div>

        <div style="display: flex">
          <div class="YC02">
            <strong class="textred">0</strong>
            <span>未处理异常</span>
          </div>
          <div class="YC02">
            <strong class="texyellow">20</strong>
            <span>异常设备数</span>
          </div>
          <div class="YC03"></div>
        </div>
      </div>
    </div>
    <div>
      <h3>异常数据信息</h3>
      <!-- <Tabroll :table-data="tableData" :shujuloading="shujuloading" :columns="tableColumns" :max-height="150"></Tabroll> -->

      <div @mousemove="move">
        <div class="table" @mouseleave="leave">
          <dv-scroll-board
            :config="config"
            @mouseover="over"
            style="width: 260px; height: 150px"
          />
          <p
            v-if="ifShow"
            class="dv-text"
            :style="{ top: dvText.keyY, left: dvText.keyX }"
          >
            {{ dvText.name }}
          </p>
        </div>
      </div>
    </div>
    <div>
      <h3>近期操作记录</h3>
      <div @mousemove="move">
        <div class="table" @mouseleave="leave">
          <dv-scroll-board
            :config="JQconfig"
            @mouseover="over"
            style="width: 260px; height: 150px"
          />
          <p
            v-if="ifShow"
            class="dv-text"
            :style="{ top: dvText.keyY, left: dvText.keyX }"
          >
            {{ dvText.name }}
          </p>
        </div>
      </div>
      <!-- <Tabroll
        :table-data="tableData"
        :shujuloading="shujuloading"
        :columns="tableColumns"
        :max-height="150"
      ></Tabroll> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Tabroll from "./tabroll.vue";
export default {
  components: {
    Tabroll,
  },

  data() {
    return {
      config: {
        header: ["风场名称", "风机信息"],
        data: [
          ["唐龙三期风电场", "XXXXXX0001号风机"],
          ["唐龙三期风电场", "XXXXXX0002号风机"],
          ["唐龙三期风电场", "XXXXXX0003号风机"],
          ["唐龙三期风电场", "XXXXXX0004号风机"],
          ["唐龙三期风电场", "XXXXXX0005号风机"],
          ["唐龙三期风电场", "XXXXXX0005号风机"],
        ],
        headerBGC: "#004F5F",
        oddRowBGC: "#004F5F",
        evenRowBGC: "#028A8A",
      },
      JQconfig: {
        header: ["姓名", "时间", "操作记录"],
        data: [
          ["劳大", "2020-02-20", "进行了性能分析操作编辑"],
          ["利尔", "2020-02-20", "进行了性能分析操作编辑"],
          ["笑嘻嘻", "2020-02-20", "进行了性能分析操作编辑"],
          ["起飞楼", "2020-02-20", "进行了性能分析操作编辑"],
          ["王强", "2020-02-20", "进行了性能分析操作编辑"],
          ["李四", "2020-02-20", "进行了性能分析操作编辑"],
        ],
        headerBGC: "#004F5F",
        oddRowBGC: "#004F5F",
        evenRowBGC: "#028A8A",
        columnWidth: [65],
      },
      dvText: {
        name: "",
        keyY: "",
        keyX: "",
      },
      //控制单元格 显示/隐藏
      ifShow: false,

      myChart: null,
      tableData: [
        { name: "王小虎" },
        { name: "王小虎" },
        { name: "王小虎" },
        { name: "王小虎" },
        { name: "王小虎" },
        { name: "王小虎" },
      ],
      shujuloading: false,
      tableColumns: [
        { prop: "name", label: "姓名" },
        { prop: "date", label: "日期" },
        { prop: "record", label: "记录" },
      ],
    };
  },
  mounted() {
    this.initChart();
  },

  methods: {
    initChart() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            var percent = params.percent.toFixed(2) + "%";
            return `${params.name}: ${params.value} (${percent})`;
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "30%", // 将图例向下移动一些
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            center: ["60%", "50%"], // 将饼图往右移动一些
            data: [
              { value: 15, name: "已完成", itemStyle: { color: "#7ECF51" } },
              { value: 50, name: "进行中", itemStyle: { color: "#EECB5F" } },
              { value: 30, name: "未开始", itemStyle: { color: "#E16757" } },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },

    over(v) {
      this.ifShow = true;
      //v.ceil拿到单元格数据
      this.dvText.name = v.ceil;
      //没有值则直接隐藏悬浮框 不然如果设置padding会有背景
      if (this.dvText.name === undefined) {
        this.ifShow = false;
      }
    },
    // 鼠标移动
    move(e) {
      //将获取的值x轴、y轴的值给悬浮框 用来定位到单元格上.
      //-1200 -500凭自己感觉调 因为每个表格在页面的位置都不一样
      this.dvText.keyX = e.pageX - 1400 + "px";
      this.dvText.keyY = e.pageY - 120 + "px";
    },
    // 鼠标离开
    leave() {
      //隐藏单元格
      this.ifShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.backbone {
  width: 300px;
  color: #fff;
  background: #008080;
  // height: 100%;
  // height: 95%;
  border-radius: 5px;
  padding: 20px;
}

.BOX {
  background: #004f5f;
  display: flex;

  padding-left: 10px;
  flex-wrap: wrap;
  padding-bottom: 15px;
}

.YC01 {
  width: 154px;
  height: 60px;
  background-image: url("../../../../assets/001.png");
  background-size: 154px 60px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
  margin-top: 15px;
  text-align: center;

  strong {
    display: block;
    font-size: 26px;
    color: #4bffff;
  }

  span {
    display: block;
    font-size: 12px;
  }
}

.YC02 {
  width: 70px;
  height: 60px;
  background-image: url("../../../../assets/002.png");
  background-size: 70px 60px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
  margin-top: 15px;
  text-align: center;

  .textred {
    color: #d9001b;
  }

  .texyellow {
    color: #facd91;
  }

  strong {
    display: block;
    font-size: 26px;
    color: #4bffff;
  }

  span {
    display: block;
    font-size: 12px;
  }
}

.YC03 {
  width: 70px;
  height: 60px;
}

.Tabtab {
  font-size: 12px;
}

::v-deep.el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table .el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: clip !important;
}

.ceil {
  position: relative;
}
.dv-text {
  background: #666;
  padding: 5px;
  font-size: 14px;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
}

.dv-scroll-board {
  font-size: 12px;
}
</style>
