<template>
  <div v-loading="searchLoading" class="qualityLeft">
    <div>
      <img src="../../../assets/img/command/head-quality.png"/>
    </div>
    <div>
      <div @click="activeTypeClick(1)" :class="activeType==1?'check-type':''">单条河流分析</div>
      <div @click="activeTypeClick(2)" :class="activeType==2?'check-type':''">多条河流分析</div>
    </div>
    <div>
      <el-select v-show="activeType==1" @change="driverChange" v-model="ruleForm.driverId" filterable placeholder="选择河流"
                 clearable>
        <el-option
          v-for="item in driverDataList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select clearable multiple v-show="activeType==2" multiple-limit="5" size="mini"
                 collapse-tags filterable v-model="ruleForm.driverIdList" placeholder="选择河流">
        <el-option-group
          v-for="group in options"
          :key="group.label"
          :label="group.label">
          <el-option
            v-for="item in group.options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-option-group>
      </el-select>
      <div @click="searchTwo()" class="ksbi" v-if="activeType==2">快速对比</div>
    </div>
    <div v-show="activeType==2">
      <div @click="childTypeClick('COD')" :class="ruleForm.name=='COD'?'child-type-check':''">COD</div>
      <div @click="childTypeClick('NH3N')" :class="ruleForm.name=='NH3N'?'child-type-check':''">NH3N</div>
      <div @click="childTypeClick('TP')" :class="ruleForm.name=='TP'?'child-type-check':''">TP</div>
      <div @click="childTypeClick('TN')" :class="ruleForm.name=='TN'?'child-type-check':''">TN</div>
      <div @click="childTypeClick('DO')" :class="ruleForm.name=='DO'?'child-type-check':''">DO</div>
      <div @click="childTypeClick('TUB')" :class="ruleForm.name=='TUB'?'child-type-check':''">TUB</div>
    </div>
    <div>
      <div>
        <div>河流同比分析</div>
        <el-select @change="monthChange" :class="ruleForm.month?'check-select':void(0)" style="width: 1rem"
                   v-model="ruleForm.month" placeholder="">
          <el-option
            v-for="item in monthList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <div>数量（次）</div>
        <cLine
          :dataList="oneTopList"
          id="topLine"
          :width="4.19,fontSize | filterPx"
          :height="2.415,fontSize | filterPx"
        ></cLine>
      </div>
    </div>
    <div>
      <div>
        <div>河流环比分析</div>
        <el-date-picker
          @change="timeChange"
          :clearable="false"
          style="width: 1.8rem"
          v-model="time"
          :class="(time&&time.length>0)?'check-select':''"
          :picker-options="pickerOptions"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div>
        <div>数量（mg/L）</div>
        <cLine
          :dataList="oneBottomList"
          id="bottomLine"
          :width="4.19,fontSize | filterPx"
          :height="2.415,fontSize | filterPx"
        ></cLine>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import cLine from './line'
  import api from '@/api/command/index'
  import njBround from "static/njBround";

  export default {
    name: "qualityLeft",
    data() {
      return {
        ruleForm: {
          driverId: '',
          month: new Date().getMonth() + 1,
          time: '',
          name: 'COD',
          driverIdList: []
        },
        oneTopList: [],
        oneBottomList: [],
        options: [],
        monthList: [
          {value: 1, label: '一月'},
          {value: 2, label: '二月'},
          {value: 3, label: '三月'},
          {value: 4, label: '四月'},
          {value: 5, label: '五月'},
          {value: 6, label: '六月'},
          {value: 7, label: '七月'},
          {value: 8, label: '八月'},
          {value: 9, label: '九月'},
          {value: 10, label: '十月'},
          {value: 11, label: '十一月'},
          {value: 12, label: '十二月'},
        ],
        date: [],
        searchLoading: false,
        addVisible: false,
        searchValue: '',
        activeType: 1,
        visible: false,
        defaTime: '',
        time: '',
        pickerOptions: {
          disabledDate(date) {
            if (new Date() < new Date(date)) {
              return true
            } else {
              return false
            }
          }
        }
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    created() {
      let date = new Date()
      let month = date.getMonth() + 1
      let startDate = ''
      let endDate = ''
      if (month < 10) {
        endDate = date.getFullYear() + '-0' + month
      } else {
        endDate = date.getFullYear() + '-' + month
      }
      startDate = date.getFullYear() + '-0' + (month - 4)
      if (month - 4 < 0) {
        let sMonth = 12 + parseInt(month - 4)
        if (sMonth < 10) {
          startDate = (date.getFullYear() - 1) + '-0' + sMonth
        } else {
          startDate = (date.getFullYear() - 1) + sMonth
        }
      }
      this.defaTime = [startDate, endDate]
      this.time = [startDate, endDate]
      this.ruleForm.time = [startDate, endDate]
      let options = []
      njBround.map(bround => {
        let child = {
          label: bround.name,
          options: this.driverDataList.filter(item => item.driverArea == bround.adcode)
        }
        options.push(child)
      })
      this.options = options
    },
    components: {cLine},
    watch: {
      driverId() {
        if (this.activeType == 1) {
          if (this.driverId != this.ruleForm.driverId) {
            let rulrForm = JSON.parse(JSON.stringify(this.ruleForm))
            rulrForm.driverId = this.driverId
            this.ruleForm = Object.assign({}, rulrForm)
            this.searchOne()
          }
        }
      },
    },
    props: {
      driverId: {
        type: String,
        default() {
          return ''
        }
      },
      driverDataList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    mounted() {
      this.searchOne()
    },
    methods: {
      timeChange() {
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        if (this.time && this.time.length > 0) {
          let startDate = new Date(this.time[0])
          let endDate = new Date(this.time[1])
          if ((endDate.getFullYear() - startDate.getFullYear()) * 12 + (endDate.getMonth() - startDate.getMonth()) + 1 != 5) {
            this.$message({
              type: 'error',
              message: '请选择范围在5个月区间的月份'
            })
            this.time = this.ruleForm.time
          } else {
            ruleForm.time = this.time
            this.ruleForm = Object.assign({}, ruleForm)
            if (this.activeType == 1) {
              this.searchOne(2)
            }else{
              this.searchTwo(2)
            }
          }
        }
      },
      driverChange() {
        this.searchOne()
      },
      monthChange() {
        if (this.activeType == 1) {
          this.searchOne(1)
        } else {
          this.searchTwo(1)
        }
      },
      activeTypeClick(activeType) {
        this.oneTopList = []
        this.oneBottomList = []
        this.activeType = activeType
        this.ruleForm = {
          driverId: '',
          month: new Date().getMonth() + 1,
          time: this.defaTime,
          name: 'COD',
          driverIdList: []
        }
        this.time = this.defaTime
        console.log(this.ruleForm)
        this.$emit('qualityClear')
        if (this.activeType == 1) {
          this.searchOne()
        } else {
          this.searchTwo()
        }
      },
      childTypeClick(name) {
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        ruleForm.name = name
        this.ruleForm = Object.assign({}, ruleForm)
        this.searchTwo()
      },
      showProblemDetail(item) {
        this.$emit('showProblemDetail', {id: 1, driverId: 27})
      },
      successSubmit() {
        this.addVisible = false
        this.search()
      },
      async searchOne(type) {
        this.searchLoading = true
        let me = this
        me.$emit('qualityClear', me.ruleForm.driverId)
        if (type == 1) {
          this.oneTopList=[]
          await this.getDriverWaterAlarmInfo()
        } else if (type == 2) {
          this.oneBottomList=[]
          await this.getDriverWaterAlarmInfoList()
        } else {
          this.oneTopList=[]
          this.oneBottomList=[]
          await this.getDriverWaterAlarmInfo()
          await this.getDriverWaterAlarmInfoList()
        }
        this.searchLoading = false
      },
      async searchTwo(type) {
        this.searchLoading = true
        let me = this
        me.$emit('qualityClear', me.ruleForm.driverId)
        if (type == 1) {
          this.oneTopList=[]
          await this.getMultiDriverWaterAlarmInfo()
        } else if (type == 2) {
          this.oneBottomList=[]
          await this.getMultiDriverWaterAlarmInfoList()
        } else {
          this.oneTopList=[]
          this.oneBottomList=[]
          await this.getMultiDriverWaterAlarmInfo()
          await this.getMultiDriverWaterAlarmInfoList()
        }
        this.searchLoading = false
      },
      getDriverWaterAlarmInfo() {
        api.getDriverWaterAlarmInfo({driverId: this.ruleForm.driverId, month: this.ruleForm.month}).then(res => {
          this.oneTopList = res.data ? res.data : []
        }).catch(e => {
          this.oneTopList = []
        });
      },
      getDriverWaterAlarmInfoList() {
        let me = this
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        if (ruleForm.time && ruleForm.time.length > 0) {
          ruleForm.time = ruleForm.time[0] + '~' + ruleForm.time[1]
        } else {
          ruleForm.time = ''
        }
        api.getDriverWaterAlarmInfoList({driverId: this.ruleForm.driverId, time: ruleForm.time}).then(res => {
          this.oneBottomList = res.data ? res.data : []
        }).catch(e => {
          this.oneBottomList = []
        });
      },
      getMultiDriverWaterAlarmInfo() {
        let driverId=''
        if(this.ruleForm.driverIdList&&this.ruleForm.driverIdList.length>0){
          driverId=this.ruleForm.driverIdList.join(',')
        }
        api.getMultiDriverWaterAlarmInfo({
          driverId: driverId,
          month: this.ruleForm.month,
          name: this.ruleForm.name
        }).then(res => {
          this.oneTopList = res.data ? res.data : []
        }).catch(e => {
          this.oneTopList = []
        });
      },
      getMultiDriverWaterAlarmInfoList() {
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        if (ruleForm.time && ruleForm.time.length > 0) {
          ruleForm.time = ruleForm.time[0] + '~' + ruleForm.time[1]
        } else {
          ruleForm.time = ''
        }
        let driverId=''
        if(this.ruleForm.driverIdList&&this.ruleForm.driverIdList.length>0){
          driverId=this.ruleForm.driverIdList.join(',')
        }
        api.getMultiDriverWaterAlarmInfoList({
          driverId: driverId,
          time: ruleForm.time,
          name: ruleForm.name
        }).then(res => {
          this.oneBottomList = res.data ? res.data : []
        }).catch(e => {
          this.oneBottomList = []
        });
      }
    },
  }
</script>

<style lang="less">
  .qualityLeft {
    position: absolute;
    top: 1.25rem;
    width: 4.27rem;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    padding-left: 0.26rem;
    padding-right: 0.27rem;

    .el-tag--small {
      height: 0.3rem;
      padding: 0 0.08rem;
      line-height: 0.3rem;
    }

    .el-tag {
      font-size: 0.12rem;
    }


    > div:first-child {
      margin-top: 0.1rem;
      width: 100%;
      height: 0.47rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > img {
        width: 1.33rem;
        height: 100%;
      }
    }

    > div:nth-child(2) {
      margin-top: 0.075rem;
      display: flex;

      > div {
        background: #2E2E2E;
        font-family: PingFangSC-Regular;
        font-size: 0.18rem;
        color: #FFFFFF;
        line-height: 0.25rem;
        border: 0.02rem solid #2E2E2E !important;
        height: 0.44rem;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .check-type {
        background: rgba(54, 184, 179, 0.50) !important;
        border: 0.02rem solid #36B8B3 !important;
      }

    }

    > div:nth-child(3) {
      margin-top: 0.202rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-select {
        flex: 1;
      }

      .el-input__inner {
        border: none;
        background-color: #3D3D3D;
        color: #FFFFFF;
        font-family: PingFangSC-Regular;
        font-size: 0.16rem;
        height: 0.36rem;
        line-height: 0.36rem;
        opacity: 1;
      }

      > .ksbi {
        cursor: pointer;
        background: rgba(42, 136, 132, 0.50);
        border: 0.02rem solid #36B8B3;
        font-family: PingFangSC-Regular;
        font-size: 0.16rem;
        width: 0.84rem;
        height: 0.32rem;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 0.07rem;
      }
    }

    > div:nth-child(4) {
      margin-top: 0.22rem;
      display: flex;
      justify-content: space-between;

      > div {
        height: 0.32rem;
        width: 0.72rem;
        margin-left: 0.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #2E2E2E;
        font-family: PingFangSC-Regular;
        font-size: 0.16rem;
        color: #FFFFFF;
        line-height: 0.22rem;
        border: 0.02rem solid #2E2E2E !important;
        cursor: pointer;
      }

      > div:first-child {
        margin-left: 0rem;
      }

      .child-type-check {
        background: rgba(54, 184, 179, 0.30) !important;
        border: 0.02rem solid #36B8B3 !important;
      }
    }

    > div:nth-child(5), > div:nth-child(6) {
      margin-top: 0.22rem;

      > div:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;

        > div:first-child {
          font-family: PingFangSC-Medium;
          font-size: 0.18rem;
          color: #FFFFFF;
          line-height: 0.25rem;
        }

        > div:last-child {
          display: flex;
          justify-content: flex-end;
        }
      }

      > div:last-child {
        margin-top: 0.1rem;
        position: relative;

        > div:first-child {
          position: absolute;
          top: 0.3rem;
          left: 0.5rem;
          opacity: 0.8;
          font-family: PingFangSC-Regular;
          font-size: 0.12rem;
          color: #FFFFFF;
        }
      }
    }

    > div:nth-child(6) {
      .el-input__icon {
        display: none;
      }

      .el-input__inner {
        background: rgba(54, 184, 179, 0.41);
        border: 0.01rem solid #36B8B3;
      }
    }

    .check-select {
      .el-input__inner {
        background: rgba(54, 184, 179, 0.41);
        border: 0.01rem solid #36B8B3;
      }
    }

  }

</style>
