<template>
  <div class="e-leakage-current">
    <div class="e-alarm-heard">
      <div class="heard-query">
        <div
          @click="
            () => {
              queryParams.timeType = 'day';
            }
          "
          :class="
            queryParams.timeType === 'day'
              ? 'data-type data-type-selected'
              : 'data-type'
          "
        >
          日
        </div>
        <div
          @click="
            () => {
              queryParams.timeType = 'month';
            }
          "
          :class="
            queryParams.timeType === 'month'
              ? 'data-type data-type-selected'
              : 'data-type'
          "
          class="data-type"
        >
          月
        </div>
        <div class="other-query">
          <span>日期</span>
          <el-date-picker
            v-if="queryParams.timeType === 'day'"
            v-model="time"
            type="date"
            style="width: 150px"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
            :clearable="false"
          >
          </el-date-picker>
          <el-date-picker
            v-model="time"
            v-if="queryParams.timeType === 'month'"
            type="month"
            style="width: 150px"
            format="yyyy-MM"
            value-format="yyyy-MM-01 00:00:00"
            :clearable="false"
            placeholder="选择月"
          >
          </el-date-picker>
          <el-input
            style="width: 150px"
            v-model="queryParams.deviceId"
            placeholder="输入设备号"
          ></el-input>
          <el-button type="primary" @click="init" size="small">查询</el-button>
        </div>
        <!-- <div class="other-print">
          <i class="el-icon-printer"></i>
        </div> -->
      </div>
    </div>

    <div class="e-alarm-echarts">
      <e-echarts-line
        ref="echartsLineTrend"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        :eId="echartsOption.eId"
        :option="resultOption"
      ></e-echarts-line>
    </div>

    <div class="e-alarm-table">
      <el-table
        v-loading="tableLoading"
        :data="tableList"
        :height="total > 0 ? '230px' : '270px'"
      >
        <el-table-column
          label="设备名称"
          width="200px"
          align="left"
          prop="deviceName"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.deviceName">
              {{ scope.row.deviceName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="设备号"
          align="left"
          width="200px"
          prop="deviceId"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.deviceId">
              {{ scope.row.deviceId }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="线路"
          width="80px"
          align="center"
          prop="lineType"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.lineType == '0' ">
              {{ scope.row.lineType ? "总路" : "支路" }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="地点" align="left" prop="projectAddress">
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.address">
              {{ scope.row.address }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="漏电流（单位：毫安）"
          width="150px"
          align="center"
          prop="typeName"
        />
        <el-table-column
          label="操作"
          align="center"
          width="150"
          prop="alarmTime"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetails(scope.row)"
            >
              <i class="iocnfont icontubiao-zhuzhuangtu"></i>
              历史趋势</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageParams.pageNum"
        :limit.sync="pageParams.pageSize"
        @pagination="getDeviceRecordTable"
      />
    </div>
  </div>
</template>
<script>
import EEchartsLine from "@/components/Echarts/EEchartsLine";
import * as echarts from "echarts";
export default {
  name: "ELeakageCurrent",
  props: {
    projectInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [Number, String],
      require: true,
    },
    tempType: {
      type: String,
      require: true,
    },
  },
  components: {
    EEchartsLine
  },
  data() {
    return {
      time: "",
      queryParams: {
        timeType: "day",
        time: "",
        deviceId: "",
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: ["#EE6666", "#FFCC00"],
        eId: "trendEchartsLine",
      },
      title: "24小时报警情况",
      typeName: "alarm",
      resultOption: {
        color: ["#EE6666", "#FFC900"],
        title: {
          text: "",
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 5,
          right: 5,
          data: ["预警", "报警"],
          textStyle: {
            color: "#344567",
            fontSize: 14,
            fontWeight: 400,
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "5",
          top: 30,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: true,
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "--",
            type: "line",
            smooth: false,
            symbolSize: 2,
            markPoint: {
              symbolSize: 35,
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            label: {
              show: false,
              formatter: function (params) {
                return echarts.format.formatTime("yyyy-MM-dd", params.value);
              },
              backgroundColor: "#7581BD",
            },
            data: [],
          },
        ],
      },
      total: 0,
      tableList: [],
      tableLoading: false,
    };
  },
  created() {
    this.init();
  },
  watch: {
    sourceId(val) {
      if (val !== null && val !== undefined) {
        this.init();
      }
    },
  },
  methods: {
    init() {
      this.time =
        this.queryParams.timeType === "day"
          ? this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00")
          : this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
      this.getDeviceRecordEcharts();
      this.getDeviceRecordTable();
    },
    // 查询 图表 数据
    getDeviceRecordEcharts() {
      // projectAlarmRecordEcharts(
      //   Object.assign(this.queryParams, {
      //     projectId: this.sourceId,
      //     time: this.time,
      //     typeCodes: this.tempType,
      //   })
      // ).then((res) => {
      //   this.resultOption.xAxis.data = res.data["name"];
      //   this.resultOption.legend.data = Object.keys(res.data).filter(v => { v !== 'name' })
      //   var list = Object.keys(res.data).map((v) => {
      //     if (v !== "name") {
      //       return {
      //         name: v,
      //         type: "line",
      //         smooth: false,
      //         symbolSize: 2,
      //         markPoint: {
      //           symbolSize: 35,
      //           data: [
      //             { type: "max", name: "Max" },
      //             { type: "min", name: "Min" },
      //           ],
      //         },
      //         label: {
      //           show: false,
      //           formatter: function (params) {
      //             return echarts.format.formatTime("yyyy-MM-dd", params.value);
      //           },
      //           backgroundColor: "#7581BD",
      //         },
      //         data: res.data[v],
      //       };
      //     }
      //   });
      //   this.resultOption.series = [...list];
      //   this.updateEcharts();
      // });
    },
    // 查询 表格 数据
    getDeviceRecordTable() {
      this.tableLoading = true;
      this.tableLoading = false;
      // projectAlarmRecordTable(
      //   Object.assign(this.queryParams, {
      //     projectId: this.sourceId,
      //     time: this.time,
      //     typeCodes: this.tempType,
      //   })
      // ).then((res) => {
      //   this.tableList = res.rows;
      //   this.tableLoading = false;
      //   this.total = res.total;
      // });
    },
    // 类型发生变化根据新数据刷新 图表信息
    updateEcharts() {
      this.$refs.echartsLineTrend.updateEchart();
    },
  },
};
</script>
<style lang="scss">
.e-leakage-current {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .e-alarm-heard {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .heard-query {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .data-type {
        width: 32px;
        height: 32px;
        background: #f4f5f7;
        border-radius: 50%;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #6b778c;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        cursor: default;
      }
      .data-type-selected {
        background: #1890ff;
        color: #f4f5f7;
      }
      .other-query {
        display: flex;
        width: 420px;
        justify-content: space-evenly;
        align-items: center;
      }
      .other-print {
        font-size: 20px;
      }
      .other-print:hover {
        color: #1890ff;
      }
    }
  }
  .e-alarm-echarts {
    width: 100%;
    height: 300px;
  }
  .e-alarm-table {
    height: 280px;
    width: 100%;
    padding-top: 10px;
  }
  .pagination-container {
    margin-top: 5px;
    height: 35px;
  }
}
</style>
