<template>
  <!-- 实时数据 -->
  <vue-scroll style="height: 100%">
    <div class="operationInfo">
      <div class="title whiteBlock">
        <el-form
          :inline="true"
          size="medium"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item :label="$t('message.lifter.devName')">
            <el-select
              v-model="formInline.waterMeterNo"
              :placeholder="$t('message.lifter.pleaseSelect')"
            >
              <el-option
                v-for="(item, index) in deviceIdArr"
                :key="index"
                :label="item.waterMeterName"
                :value="item.waterMeterNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              plain
              @click="selectWaterMeterStatistics"
              >{{ $t('message.lifter.demand') }}</el-button
            >
            <!-- <el-button type="warning" plain @click="onSubmit">{{
              $t("message.lifter.refresh")
            }}</el-button> -->
          </el-form-item>
          <!-- 年份筛选 -->
          <el-form-item
            style="float: right"
            :label="$t('message.energyManage.yearFilter')"
          >
            <!-- 请选择 -->
            <el-date-picker
              :clearable="false"
              v-model="formInline.yearTime"
              type="year"
              :placeholder="$t('message.energyManage.material.pleaseChoose')"
              value-format="yyyy"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <div class="direction_data_wrap flex">
          <div class="data_wrap whiteBlock">
            <div class="state_title pageTitle">
              {{ $t('message.lifter.realTimeData') }}
            </div>
            <div class="flex">
              <div class="data_type">
                <div class="type bg1 flex2">
                  <div class="left">
                    <img src="@/assets/images/waterAndElectricity/water.png" />
                    <!-- 阀控状态 -->
                    <div>{{ $t('message.energyManage.valveControl') }}</div>
                  </div>
                  <div class="value">
                    {{
                      gateStatus == 1
                        ? $t('message.energyManage.open')
                        : gateStatus == 2
                        ? $t('message.energyManage.close')
                        : $t('message.energyManage.not')
                    }}
                  </div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg1 flex2">
                  <div class="left">
                    <img src="@/assets/images/waterAndElectricity/water.png" />
                    <!-- 本月用水量 -->
                    <div>{{ $t('message.energyManage.monthUseWater') }}</div>
                  </div>
                  <div class="value">{{ realTimeData.monthUserWater }}t</div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg2 flex2">
                  <div class="left">
                    <img src="@/assets/images/waterAndElectricity/gross.png" />
                    <div>
                      {{ $t('message.energyManage.nowAmmeter') }}
                      <!-- 当前电表读数 -->
                    </div>
                  </div>
                  <div class="value">
                    {{ realTimeData.currentWaterTonnage }}
                  </div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg3 flex2">
                  <div class="left">
                    <img src="@/assets/images/waterAndElectricity/alarm.png" />
                    <div>
                      {{ $t('message.energyManage.monthOver') }}
                      <!-- 本月超标总量 -->
                    </div>
                  </div>
                  <div class="value">{{ realTimeData.exceedQuotaNum }}</div>
                </div>
              </div>
              <div class="data_type">
                <div class="type bg3 flex2">
                  <div class="left">
                    <img src="@/assets/images/waterAndElectricity/alarm.png" />
                    <div>
                     报警次数
                      <!-- 本月报警次数 -->
                    </div>
                  </div>
                  <div class="value">{{ realTimeData.alarmNum }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom_info flex">
          <div class="T_H_wrap">
            <div class="load whiteBlock">
              <div class="state_title pageTitle">用水统计</div>
              <div style="height: 85%; width: 100%" ref="liftingWeight"></div>
            </div>
            <div class="altitude whiteBlock">
              <div class="state_title pageTitle">报警趋势</div>
              <div style="height: 85%; width: 100%" ref="gradient"></div>
            </div>
          </div>
          <!-- <div class="T_H_wrap">
            <div class="load">
              <div class="state_title pageTitle">
                {{
                  $t("message.lifter.realTime") + $t("message.lifter.altitude")
                }}
              </div>
              <div style="height: 85%; width: 100%" ref="height"></div>
            </div>
            <div class="altitude">
              <div class="state_title pageTitle">
                {{ $t("message.lifter.realTime") + $t("message.lifter.alarm") }}
              </div>
              <div style="height: 85%; width: 100%" ref="alarm"></div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </vue-scroll>
</template>
<script>
import echarts from 'echarts4'
import {
  getwaterMeterListApi,
  selectWaterMeterStatisticsApi,
  getCurrentMonthMeterRecordApi,
  selectWaterMeterStatisticsByYearApi
} from '@/assets/js/api/waterManage'
export default {
  data() {
    return {
      deviceIdArr: [],
      formInline: {
        yearTime: '',
        waterMeterNo: '',
        projectSn: this.$store.state.projectSn
      },
      realTimeData: {
        alarmNum: 0,
        currentWaterTonnage: 0,
        exceedQuotaNum: 0,
        monthUserWater: 0,
        thresholdValue: 0
      },
      gateStatus: ''
    }
  },
  mounted() {
    var a = new Date()
    this.formInline.yearTime = a.getFullYear() + ''
    this.getDevice()
    this.createdEcharts()
  },
  methods: {
    getCurrentMonthMeterRecord() {
      getCurrentMonthMeterRecordApi(this.formInline).then((res) => {
        console.log('阀控状态', res)
        if (res.result.waterMeter.gateStatus != null) {
          this.gateStatus = res.result.waterMeter.gateStatus
        }

        this.realTimeData = res.result.count
      })
    },
    selectWaterMeterStatistics() {
      selectWaterMeterStatisticsByYearApi(this.formInline).then((res) => {
        var alarmList = res.result.alarmList
        var monthWaterList = res.result.monthWaterList
        var xData = [],
          yData = []
        alarmList.forEach((element) => {
          xData.push(element.titleTime)
          yData.push(element.num)
        })
        var xData1 = [],
          yData1 = []
        monthWaterList.forEach((element) => {
          xData1.push(element.monthTime)
          yData1.push(element.waterTonnage)
        })
        this.createdEcharts(xData, yData, xData1, yData1)
        this.getCurrentMonthMeterRecord()
      })
    },
    getDevice() {
      getwaterMeterListApi({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          if (result.success) {
            this.deviceIdArr = result.result
            if (this.deviceIdArr.length > 0) {
              this.formInline.waterMeterNo = this.deviceIdArr[0].waterMeterNo
              this.selectWaterMeterStatistics()
              this.getCurrentMonthMeterRecord()
            }
            console.log('get设备列表', this.deviceIdArr)
          }
        }
      )
    },
    //创建图表
    createdEcharts(xData, yData, xData1, yData1) {
      var chart1 = echarts.init(this.$refs.liftingWeight)
      var chart2 = echarts.init(this.$refs.gradient)
      // var chart3 = echarts.init(this.$refs.height);
      // var chart4 = echarts.init(this.$refs.alarm);
      chart1.clear()
      chart2.clear()
      // chart3.clear();
      // chart4.clear();
      chart1.setOption(this.getOption1(xData1, yData1))
      chart2.setOption(this.getOption2(xData, yData))
      // chart3.setOption(this.getOption(2));
      // chart4.setOption(this.getOption(3));
    },

    getOption1(xData, yData) {
      var colors = ['#3A7BFF', '#55CBBB', '#B59CF2', '#F3D025']
      var opt = {
        color: colors[0],
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          bottom: 30,
          left: '3%',
          right: 30
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: xData,
          axisLabel: {
            textStyle: {
              color: '#9fa2ad'
            }
          }
        },
        yAxis: {
          // name: "用水量(WH)",
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#9fa2ad'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(231, 233, 243, 0.5)'
            }
          }
        },
        // dataZoom: [
        //   {
        //     show: true,
        //     // realtime: true,
        //     start: 0,
        //     end: 100,
        //     height: 8,
        //     borderColor: "transparent",
        //     backgroundColor: "#e8e8e8",
        //     filterColor: "#999999",
        //     bottom: 0,
        //   },
        // ],
        series: [
          {
            // name: ["用水量"],
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: yData,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: colors[0]
                },
                areaStyle: {
                  color: colors[0],
                  opacity: 0.1
                }
              }
            },
            markLine: {
              data: [{ type: 'max', name: '最大值' }],
              lineStyle: {
                color: '#FC806B'
              }
            }
          }
        ]
      }
      return opt
    },
    getOption2(xData, yData) {
      var colors = ['#F46650', '#F3D12C']
      var opt = {
        color: colors,
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 30,
          bottom: 30,
          left: '3%',
          right: 30
        },
        // legend: {
        //   data: ["预警", "报警"],
        // },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: xData,
          axisLabel: {
            textStyle: {
              color: '#9fa2ad'
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(231, 233, 243, 0.5)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#9fa2ad'
            }
          }
        },
        // dataZoom: [
        //   {
        //     show: true,
        //     // realtime: true,
        //     start: 0,
        //     end: 100,
        //     height: 8,
        //     borderColor: "transparent",
        //     backgroundColor: "#e8e8e8",
        //     filterColor: "#999999",
        //     bottom: 0,
        //   },
        // ],
        series: [
          {
            name: '报警',
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: yData,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#F46650'
                  // type: 'dashed'
                }
              }
            }
          }
          // {
          //   name: "预警",
          //   type: "line",
          //   symbol: "none",
          //   smooth: true,
          //   data:[] ,
          //   itemStyle: {
          //     normal: {
          //       lineStyle: {
          //         color: '#F3D025',
          //       },
          //       areaStyle: {
          //         color: '#F3D025',
          //         opacity: 0.1,
          //       },
          //     },
          //   },
          // },
        ]
      }
      return opt
    }
  }
}
</script>

<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.operationInfo {
  width: 100%;
  height: 100%;
  .title {
    // background-color: #ffffff;
    padding: 0 20px;
    padding-top: 17px;
    height: 70px;
    box-sizing: border-box;
  }
  .content {
    margin-top: 12px;
    box-sizing: border-box;
    width: 100%;
    height: 720px;
    .pageTitle {
      line-height: 20px;
    }
    .direction_data_wrap {
      box-sizing: border-box;
      height: 155px;
      width: 100%;

      .data_wrap {
        width: 100%;
        height: 100%;
        // background: #fff;
        padding: 12px 20px;
        box-sizing: border-box;
        .data_type {
          width: 16%;
          margin-right: 12px;
          color: #fff;
          .type {
            width: 100%;
            height: 80px;
            border-radius: 8px;
            box-sizing: border-box;
            padding: 10px 15px;
            // color: #ffffff;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            .left {
              width: 45%;
            }
          }
          .value {
            font-size: 24px;
            font-weight: 500;
            text-align: right;
          }
        }
        .marg_t {
          margin-top: 12px;
        }
      }
    }
    .bottom_info {
      width: 100%;
      height: calc(100% - 150px);
      margin-top: 12px;
      box-sizing: border-box;
      .T_H_wrap {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        .load {
          width: 100%;
          height: calc(50% - 6px);
          // background: #fff;
          padding: 12px 20px;
          box-sizing: border-box;
        }
        .altitude {
          margin-top: 12px;
          width: 100%;
          height: calc(50% - 6px);
          // background: #fff;
          padding: 12px 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .bg1 {
    background-color: #7ba6ff;
  }
  .bg2 {
    background-color: #f6b87d;
  }
  .bg3 {
    background-color: #cb5555;
  }
}
</style>
