<template>
  <div class="e-project-alarm-manage">
    <div class="e-alarm-heard">
      <div style="width: 200px">
        <el-radio-group v-model="queryParams.typeCode" size="small">
          <el-radio-button label="A">用电报警</el-radio-button>
          <el-radio-button label="B">用电预警</el-radio-button>
        </el-radio-group>
      </div>
      <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="handleQuery" 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-bar
        ref="echartsLineTrend"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        :eId="echartsOption.eId"
        :option="resultOption"
      ></e-echarts-bar>
    </div>

    <div class="e-alarm-table">
      <el-table v-loading="tableLoading" :data="tableList" :height="total > 0 ? '230px': '270px'">
        <el-table-column
          label="设备名称"
          width="120px"
          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="center"
          width="150px"
          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="事件ID"
          align="left"
          width="150"
          prop="recordId"
        >
        <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.recordId">
              {{ scope.row.recordId }}
            </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="60px"
          align="center"
          prop="lineType"
        >
          <template slot-scope="scope">
            <span class="lay-table-textarea" :title="scope.row.lineType == '0' ">
              {{ scope.row.lineType == '0'  ? '总路' : '支路'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="报警类型"
          width="100px"
          align="center"
          prop="typeName"
        />
        <el-table-column
          label="报警时间"
          align="center"
          width="100"
          prop="alarmTime"
        />
        <el-table-column
          label="进度"
          width="80px"
          align="left"
          prop="deviceName"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.processStatus === 'UNPROCESS'" style="color: #FF2F60;">未开始</span>
            <span v-else-if="scope.row.processStatus === 'PROCESSED'" style="color: #25F094;">已处理</span>
            <span v-else style="color: #25F094;">处理中</span>
          </template>
        </el-table-column>
        <el-table-column
          label="耗时"
          width="150px"
          align="center"
          prop="deviceName"
        >
          <template slot-scope="scope">
            <e-timing
              :startTime="scope.row.alarmTime"
              :endTime="scope.row.processTime || parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')"
            ></e-timing>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageParams.pageNum"
        :limit.sync="pageParams.pageSize"
        @pagination="getProjectAlarmTable"
      />
    </div>
  </div>
</template>
<script>
import EEchartsBar from "@/components/Echarts/EEchartsBar";
import { projectAlarmEcharts, projectAlarmTable } from "@/api/iot/project_new";
import ETiming from './ETiming'
export default {
  name: "ProjectAlarmManage",
  components: {
    EEchartsBar,
    ETiming
  },
  props: {
    projectInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [Number, String],
      require: true,
    },
    tempType: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      templateType: "A", // A: 报警； B：告警；E：事件
      time: "",
      queryParams: {
        typeCode: "A",
        timeType: "day",
        time: "",
        deviceId: "",
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
        eId: "projectAlaramEchartsBar",
      },
      resultOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            data: [],
          },
        ],
      },
      tableList: [],
      tableLoading: false,
      total: 0,
    };
  },
  watch: {
    sourceId(val) {
      this.init()
    }
  },
  created() {
    this.init();
  },
  methods: {
    handleQuery() {
      this.pageParams.pageNum = 1;
      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.getProjectAlarmEcharts();
      this.getProjectAlarmTable();
    },
    // 图表数据处理
    handleEachartsBarData(list, axisKey, seriesKey) {
      var xAxisData = [],
        seriesData = [];
      if (list && list.length > 0) {
        list.forEach((v) => {
          xAxisData.push(v[axisKey]);
          seriesData.push(v[seriesKey]);
        });
      }
      return { xAxisData: xAxisData, seriesData: seriesData };
    },
    getProjectAlarmEcharts() {
      this.resultOption.xAxis[0].data = [];
      this.resultOption.series[0].data = [];
      projectAlarmEcharts(
        Object.assign(this.queryParams, {
          projectId: this.sourceId,
          time: this.time,
        })
      ).then((res) => {
        let result = this.handleEachartsBarData(
          res.data,
          "typeName",
          "alarmCount"
        );
        this.resultOption.xAxis[0].data = result["xAxisData"];
        this.resultOption.series[0].data = result["seriesData"];
        this.$forceUpdate();
      });
    },
    // 表格数据
    getProjectAlarmTable() {
      this.tableLoading = true;
      projectAlarmTable(
        Object.assign(this.queryParams, {
          projectId: this.sourceId,
          time: this.time,
        }, this.pageParams)
      ).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
        this.tableLoading = false;
        this.$forceUpdate();
      });
    },
    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");
    },
  },
};
</script>
<style lang="scss">
.e-project-alarm-manage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .e-alarm-heard {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    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>
