<template>
  <div class="statusDialog">
    <el-dialog
      title="多天数据报表"
      :visible.sync="statusdialogVisible"
      width="1220px"
    >
      <div class="lineTableBox" v-loading="picLoading">
        <div class="lineLeft">
          <div class="logTitle">
            <!-- <h3>装置图片报表</h3> -->

            <el-form :inline="true" :model="formdata" class="demo-form-inline">
              <el-form-item label="开始日期" class="dateclass">
                <el-date-picker
                  v-model="formdata.starttime"
                  type="datetime"
                  placeholder="开始日期"
                  value-format="timestamp"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期" class="dateclass">
                <el-date-picker
                  v-model="formdata.endtime"
                  type="datetime"
                  placeholder="结束日期"
                  value-format="timestamp"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>

            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button class="exportBtn" type="primary" @click="deviceExport"
              >导出列表</el-button
            >
          </div>

          <div class="boxLogTable">
            <el-table
              :data="tableData"
              border
              stripe
              height="calc(100%)"
              id="moreTable"
            >
              <el-table-column type="index" width="50" label="序号">
              </el-table-column>

              <el-table-column label="线路" show-overflow-tooltip>
                {{ xlName }}
              </el-table-column>
              <el-table-column prop="day" label="日期" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.day.split(" ")[0] }}</template
                >
              </el-table-column>
              <el-table-column label="装置总数">
                <template slot-scope="scope"> {{ termTotalNum }}</template>
              </el-table-column>
              <el-table-column label="运维上线数量" width="70px">
                <template slot-scope="scope">
                  {{ scope.row.termList.length }}
                </template>
              </el-table-column>
              <el-table-column label="运维上线率" width="70px">
                <template slot-scope="scope">
                  {{
                    ((scope.row.termList.length / termTotalNum) * 100).toFixed(
                      2
                    ) + "%"
                  }}
                </template>
              </el-table-column>
              <el-table-column label="上图设备数量" width="70px">
                <template slot-scope="scope">
                  {{
                    scope.row.termList.filter(
                      (term) => parseInt(term.uploads, 10) > 0
                    ).length
                  }}
                </template>
              </el-table-column>
              <el-table-column label="上图率">
                <template slot-scope="scope">
                  {{
                    (
                      (scope.row.termList.filter(
                        (term) => parseInt(term.uploads, 10) > 0
                      ).length /
                        termTotalNum) *
                      100
                    ).toFixed(2) + "%"
                  }}
                </template>
              </el-table-column>
              <el-table-column label="正常上图设备数量">
                <template slot-scope="scope">
                  {{
                    scope.row.termList.filter(
                      (term) =>
                        parseInt(term.uploads, 10) >=
                        (parseInt(picNum, 10) *
                          parseInt(norGraphRate.replace("%", ""), 10)) /
                          100
                    ).length
                  }}
                </template>
              </el-table-column>
              <el-table-column label="正常上图率">
                <template slot-scope="scope">
                  {{
                    (
                      (scope.row.termList.filter(
                        (term) =>
                          parseInt(term.uploads, 10) >=
                          (parseInt(picNum, 10) *
                            parseInt(norGraphRate.replace("%", ""), 10)) /
                            100
                      ).length /
                        termTotalNum) *
                      100
                    ).toFixed(2) + "%"
                  }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="echartsDiv" id="echartBox"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusdialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { picRportApi } from "@/utils/api/index";
import htmlToExcel from "@/utils/htmlToExcel";
export default {
  data() {
    return {
      statusdialogVisible: false,
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },

      formdata: {
        starttime:
          new Date(new Date().setHours(0, 0, 0, 0)).getTime() -
          30 * 24 * 60 * 60 * 1000, // 设置开始时间为当天凌晨00:00:00的时间戳, // 设置开始时间为当天凌晨00:00:00的时间戳,
        endtime: new Date(new Date().setHours(23, 59, 59, 0)).getTime(), // 设置结束时间为当天夜晚23:59:59的时间戳
      },
      tableData: [],
      picLoading: false,
      lineId: "",
      termTotalNum: 0,
      dyName: "",
      xlName: "",
      picNum: 0,
      norGraphRate: 0,
      titleArr: ["运维上线数量", "上图设备数量", "正常上图设备数量"],
      reverseData: [], //倒叙排列
    };
  },
  mounted() {},
  methods: {
    //导出活动列表表格
    deviceExport() {
      htmlToExcel.getExcel("#moreTable", "运维多天在线率列表");
    },
    display(row) {
      this.statusdialogVisible = true;
      this.lineId = row;
      this.onSubmit();
    },
    onSubmit() {
      if (this.formdata.starttime > this.formdata.endtime) {
        return this.$message({
          duration: 1500,
          showClose: true,
          message: "开始日期不能大于结束日期",
          type: "warning",
        });
      }
      let params = {
        start: this.formdata.starttime / 1000,
        end: this.formdata.endtime / 1000,
        lineIds: [this.lineId],
      };
      this.getpicList(params);
    },

    getpicList(params) {
      setTimeout(() => {
        this.picLoading = true;
        picRportApi(params)
          .then((res) => {
            this.picLoading = false;
            if (res.data.length !== 0) {
              console.log(res.data);
              //this.tableData = res.data;
              this.tableData = res.data[0].dayList;
              this.reverseData = this.tableData.slice().reverse();
              console.log(this.tableData);
              this.termTotalNum = res.data[0].termList.length;
              console.log(this.termTotalNum);
              this.picNum = res.data[0].line.photoCount;
              this.norGraphRate = res.data[0].line.photoRate;
              this.xlName = res.data[0].line.name;
              this.getEchart();
            } else {
              this.tableData = [];
            }
          })
          .catch((err) => {});
      }, 100);
    },
    //装置数量统计
    getEchart() {
      this.$nextTick(() => {
        let that = this;
        that.$echarts.init(document.getElementById("echartBox")).dispose();
        that.myChart = this.$echarts.init(document.getElementById("echartBox"));
        let termDataNum = this.termTotalNum;
        var seriesColors = ["#5470c6", "#91cc75", "#fac858"]; // 红色、绿色、蓝色
        let option = {
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              let res = params[0].name + "<br/>"; // 假设 params[0].name 是类别名
              params.forEach((item, index) => {
                // 生成小圆点的 HTML，使用对应的颜色
                let dotHtml = `<span style="display: inline-block; width: 8px; height: 8px; background-color: ${seriesColors[index]}; border-radius: 50%; margin-right: 8px;"></span>`;
                // 拼接系列名、值和百分比
                let percentage =
                  ((item.value / termDataNum) * 100).toFixed(2) + "%"; // 计算百分比
                res += `${dotHtml}${item.seriesName}: ${item.value} (${percentage})<br/>`;
              });
              return res;
            },
          },
          legend: {
            data: this.titleArr,
          },
          grid: {
            left: "5%",
            right: "5%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              showMaxLabel: true, // 显示最后一个标签
            },
            data: this.reverseData.map((item) =>
              item.day.replace(/^\d{4}-/, "")
            ),
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "运维上线数量",
              type: "line",

              data: this.reverseData.map((item) => item.termList.length),
            },
            {
              name: "上图设备数量",
              type: "line",

              data: this.reverseData.map(
                (item) =>
                  item.termList.filter((term) => parseInt(term.uploads, 10) > 0)
                    .length
              ),
            },
            {
              name: "正常上图设备数量",
              type: "line",

              data: this.reverseData.map(
                (item) =>
                  item.termList.filter(
                    (term) =>
                      parseInt(term.uploads, 10) >=
                      (parseInt(this.picNum, 10) *
                        parseInt(this.norGraphRate.replace("%", ""), 10)) /
                        100
                  ).length
              ),
            },
          ],
        };
        that.myChart.setOption(option);
        window.addEventListener("resize", () => {
          that.myChart.resize();
        });
      });
    },
  },
};
</script>
<style lang="less">
.statusDialog {
  .el-dialog__body {
    padding: 10px;
  }
  .lineLeft {
    width: 800px;
  }
  .echartsDiv {
    width: 400px;
    height: 400px;
    margin-top: 35px;
  }
  .lineTableBox {
    height: 420px;
    display: flex;
  }
}
</style>
