<template>
  <div class="qualityRight">
    <div>
      <div class="header-title">
        <div>告警信息</div>
      </div>
      <div>
        <div @click="detail">
          <div>
            <div>
              <img src="../../../assets/img/main/red.png"/>
              <div>澧水河河道发现重度污染</div>
            </div>
            <div>2020-04-20</div>
          </div>
          <div>总氮、总磷数值偏高，达到5级</div>
        </div>
        <div @click="detail">
          <div>
            <div>
              <img src="../../../assets/img/main/orange.png"/>
              <div>莫愁湖发现严重水质问题</div>
            </div>
            <div>2020-04-20</div>
          </div>
          <div>总氮、总磷数值偏高，达到5级</div>
        </div>
        <div @click="detail">
          <div>
            <div>
              <img src="../../../assets/img/main/yellow.png"/>
              <div>固城河河道发现污染排口</div>
            </div>
            <div>2020-04-20</div>
          </div>
          <div>总氮、总磷数值偏高，达到5级</div>
        </div>
      </div>
    </div>
    <div>
      <div class="header-title">
        <div>河湖水质超标预警</div>
      </div>
      <div>
        <div @click="detail">
          <div>
            <div>莫愁湖</div>
            <div>04-20 12:20</div>
          </div>
          <div>
            <div>五月份可能爆发大面积蓝藻</div>
            <div>5级</div>
          </div>
        </div>
        <div @click="detail">
          <div>
            <div>莫愁湖</div>
            <div>04-20 12:20</div>
          </div>
          <div>
            <div>五月份可能爆发大面积蓝藻</div>
            <div>5级</div>
          </div>
        </div>
        <div @click="detail">
          <div>
            <div>莫愁湖</div>
            <div>04-20 12:20</div>
          </div>
          <div>
            <div>五月份可能爆发大面积蓝藻</div>
            <div>5级</div>
          </div>
        </div>
        <div @click="detail">
          <div>
            <div>莫愁湖</div>
            <div>04-20 12:20</div>
          </div>
          <div>
            <div>五月份可能爆发大面积蓝藻</div>
            <div>5级</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="header-title">
        <div>水质数据趋势模拟预测</div>
      </div>
      <div>
        <div>单位(mg/L）</div>
        <cLine
          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>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import cLine from './line'
  import quilityDialog from './qualityDialog'

  export default {
    name: "qualityRight",
    data() {
      return {visible:false}
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components: {cLine,quilityDialog},
    watch: {},
    props: {},
    mounted() {
      this.search()
    },
    methods: {
      detail(){
        this.visible=true
      },
      activeTypeClick(activeType) {
        this.activeType = activeType
        this.search()
      },
      childTypeClick(childType) {
        this.childType = childType
        this.search()
      },
      showProblemDetail(item) {
        this.$emit('showProblemDetail', {id: 1, driverId: 27})
      },
      addClick() {
        this.$emit('askClear', this.driverId)
        this.addVisible = true
      },
      successSubmit() {
        this.addVisible = false
        this.search()
      },
      search() {
        let me = this
        this.searchLoading = true
        me.$emit('qualityClear', me.driverId)
        setTimeout(function () {
          me.searchLoading = false
        }, 2000)
      }
    },
  }
</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;

    .header-title {
      margin-top: 0.2rem;
      width: 100%;
      height: 0.35rem;
      line-height: 0.35rem;
      position: relative;

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

    > div:first-child {
      > 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;
            }
          }

          > 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) {
      > 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;
            }
            > 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>
