<template>
  <div class="e-leakage-detail">
    <div class="e-form-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-button type="primary" @click="handleQuery" size="small">查询</el-button>
        </div>
      </div>
    </div>

    <div class="e-alarm-echarts">
      <e-echarts-line
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        ref="echartsLineDetail"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        :eId="echartsOption.eId"
        :option="resultOption"
      ></e-echarts-line>
    </div>
  </div>
</template>
<script>
import EEchartsLine from "@/components/Echarts/EEchartsLine";
import * as echarts from "echarts";
import { projectLeakageChart } from "@/api/iot/project_new";
export default {
  name: "ELeakageDetail",
  props: {
    sourceId: {
      type: [Number, String],
      require: true,
    },
    tempType: {
      type: String,
      require: true,
    },
    deviceId: {
      type: [Number, String],
      require: true
    }
  },
  components: {
    EEchartsLine
  },
  data() {
    return {
      time: "",
      queryParams: {
        timeType: "day",
        time: "",
        deviceId: "",
      },
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: ["#EE6666", "#FFCC00"],
        eId: "ELeakageDetailEchart",
      },
      title: "24小时报警情况",
      typeName: "alarm",
      resultOption: {
        color: ["#EE6666", "#FFC900"],
        title: {
          text: "",
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: 0,
          data: ["预警", "报警"],
          textStyle: {
            color: "#344567",
            fontSize: 14,
            fontWeight: 400,
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "35",
          top: 30,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: true,
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606266",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606266",
            },
          },
        },
        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: [],
          },
        ],
      },
      loading: false
    };
  },
  created() {
    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.handleQuery();
  },
  methods: {
    handleQuery() {
      this.loading = true
      this.queryParams.deviceId = this.deviceId;
      this.time =
        this.queryParams.timeType === "day"
          ? this.parseTime(new Date(this.time), "{y}-{m}-{d} 00:00:00")
          : this.parseTime(new Date(this.time), "{y}-{m}-01 00:00:00");
      this.getDeviceRecordEcharts();
    },
    // 查询 图表 数据
    getDeviceRecordEcharts() {
      projectLeakageChart(
        Object.assign(this.queryParams, {
          projectId: this.sourceId,
          time: this.time,
          typeCode: 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();
      });
    },
    // 类型发生变化根据新数据刷新 图表信息
    updateEcharts() {
      this.loading = false;
      this.$refs.echartsLineDetail.updateEchart();
    },
  },
};
</script>
<style lang="scss">
.e-leakage-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .e-form-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: 42px;
        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;
  }
}
</style>
