<template>
  <div class="qualityRight">
    <div>
      <div class="header-title">
        <div>告警信息</div>
      </div>
      <div>
        <div @click="detail(item.id)" :key="index" v-for="(item,index) in waterAlarmList">
          <div>
            <div>
              <img
                :src="item.measuredStandard==5?require('../../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../../assets/img/main/orange.png'):require('../../../assets/img/main/yellow.png'))"/>
              <div>{{item.driverAreaName}}{{item.driverName}}</div>
            </div>
            <div><span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span></div>
          </div>
          <div>{{item.alarmInfo}}达到{{item.alarmStandard}}</div>
        </div>
      </div>
    </div>
    <div>
      <div class="header-title">
        <div>河湖水质超标预警</div>
      </div>
      <div>
        <div :key="index" v-for="(item,index) in warnList">
          <div>
            <div>{{item.driverName}}</div>
            <div>{{item.createTime}}</div>
          </div>
          <div>
            <div>{{item.warnContent}}</div>
            <div>{{item.warnLevelText}}</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="header-title">
        <div>水质数据趋势模拟预测</div>
        <el-select @change="trendTypeChange" :class="trendType?'check-select':void(0)" style="width: 1rem" v-model="trendType" placeholder="">
          <el-option
            v-for="item in trendSelectList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>
      <div>
        <div>单位(mg/L）</div>
        <cLine
          :dataList="filterFrendList"
          id="rightLine"
          :width="4.19,fontSize | filterPx"
          :height="2.215,fontSize | filterPx"
        ></cLine>
      </div>
    </div>
<!--    <quilityDialog :visible="visible" v-if="visible" @dialogClose="visible=false"></quilityDialog>-->
    <assignmentDialog :isQuality="true" @successSubmit="visible=false;getWaterAlarmList()" :id="id" :userList="userList" v-if="visible" @dialogClose="visible=false" :visible="visible"></assignmentDialog>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import cLine from './line'
  import assignmentDialog  from '../problem/assignmentDialog'
  import api from '@/api/command/index'
  import waterAlarmApi from '@/api/water/waterAlarm'

  export default {
    name: "qualityRight",
    data() {
      return {
        id:'',
        waterAlarmList:[],
        trendType:'',
        visible: false,
        trendList: [],
        filterFrendList:[],
        warnList:[],
        trendType:'COD',
        trendSelectList:['COD','NH3N','TP','TN','DO','TUB']
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components: {cLine, assignmentDialog},
    watch: {},
    props: {
      userList:{
        type:Array,
        default(){
          return []
        }
      }
    },
    mounted() {
      this.getQuaTrend()
      this.getQuaWarnList()
      this.getWaterAlarmList()
    },
    methods: {
      getWaterAlarmList() {
        waterAlarmApi.getWaterAlarmList(3).then(res => {
          this.waterAlarmList = res.data ? res.data : []
        }).catch(e => {
          this.waterAlarmList = []
        })
      },
      detail(id) {
        this.id=id
        this.visible = true
      },
      getQuaWarnList() {
        api.getQuaWarnList().then(res => {
          this.warnList=res.data?res.data:[]
        }).catch(err => {
          this.warnList=[]
        });
      },
      trendTypeChange(){
        let filterFrendList=[]
        let name = ''
        'COD','NH3N','TP','TN','DO','TUB'
        if(this.trendType=='COD'){
          name='waterCod'
        }else if(this.trendType=='NH3N'){
          name='waterNh3n'
        }else if(this.trendType=='TP'){
          name='waterTp'
        }else if(this.trendType=='TN'){
          name='waterTn'
        }else if(this.trendType=='DO'){
          name='waterDo'
        }else if(this.trendType=='TUB'){
          name='waterTub'
        }
        this.trendList.map(item => {
          filterFrendList.push({
            month: item.forecastTime,
            name: '',
            value: item[name]?item[name]:0
          })
        })
        this.filterFrendList=filterFrendList
      },
      getQuaTrend() {
        api.getQuaTrend().then(res => {
          this.trendList = res.data?res.data:[]
          let filterFrendList=[]
          res.data.map(item => {
            filterFrendList.push({
              month: item.forecastTime,
              name: '',
              value: item.waterCod?item.waterCod:0
            })
          })
          this.filterFrendList=filterFrendList
        }).catch(err => {
          this.trendList=[]
          this.filterFrendList=[]
        });
      }
    },
  }
</script>

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

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

    .header-title {
      margin-top: 0.2rem;
      width: 100%;
      height: 0.35rem;
      line-height: 0.35rem;
      position: relative;
      display: flex;
      justify-content: space-between;

      > div {
        color: #ffffff;
        font-family: PingFangSC-Regular;
        font-size: 0.22rem;
      }
    }

    > div:first-child {
      height: 2.2rem;

      > div:last-child {
        padding: 0rem 0rem 0.1rem 0rem;
        position: relative;

        > div {
          cursor: pointer;

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

            > div:first-child {
              display: flex;
              align-items: center;

              > img {
                width: 0.12rem;
                height: 0.12rem;
                margin-right: 0.1rem;
              }

              > div:last-child {
                width: 2.6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                white-space: nowrap;
                font-family: PingFangSC-Regular;
                font-size: 0.16rem;
                color: #ffffff;
                line-height: 0.28rem;
              }
            }

            > div:last-child {
              font-family: PingFangSC-Regular;
              font-size: 0.12rem;
              color: #999999;
              line-height: 0.2rem;
              overflow: hidden;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          > div:last-child {
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #999999;
            line-height: 0.2rem;
            margin-left: 0.2rem;
          }
        }
      }
    }

    > div:nth-child(2) {
      height: 2.46rem;

      > div:last-child {
        padding: 0rem 0rem 0.1rem 0rem;
        position: relative;

        > div {
          margin-top: 0.11rem;
          font-family: PingFangSC-Regular;
          font-size: 0.12rem;
          color: #999999;
          cursor: pointer;

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

            > div:first-child {
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              line-height: 0.2rem;
              color: #FFFFFF;
            }

            > div:last-child {
              line-height: 0.2rem;
            }
          }

          > div:last-child {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.04rem;

            > div:first-child {
              line-height: 0.17rem;
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              white-space: nowrap;
            }

            > div:last-child {
              color: #ffffff;
              background: rgba(238, 15, 4, 0.22);
              border: 0.01rem solid #FF0000;
              border-radius: 0.1rem;
              border-radius: 0.1rem;
              height: 0.14rem;
              width: 0.37rem;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }


    > div:nth-child(3) {
      > div:last-child {
        margin-top: 0.1rem;
        position: relative;

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

  }

</style>
