<template>
  <div class="monitor">
    <div>
      <div class="label">监控</div>
      <!--<div class="d1" >-->
      <!--<select v-model="date">-->
      <!--<option :value="date" v-for="s in date" >{{s}}</option>-->
      <!--</select>-->
      <!--</div>-->
      <div class="d2">
        <div class="col-sm-3 flex">
          <div class="row flex">
            <span class="font-style f24" style="margin-bottom: 5%;">{{monitortotal}}</span>
            <span class="font-style f16">警告用户</span>
          </div>
          <div class="row flex">
            <span class="font-style f24" style="margin-bottom: 5%;">800</span>
            <span class="font-style f16">可疑用户</span>
          </div>
        </div>
        <div class="col-sm-9 flex" style="height: 100%;">
          <div id="monitor"></div>
          <div class="col-sm-12" style="height: 10%">
            <span class="font-style fleft">警告类型</span>
            <span class="font-style fright">户数/户</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as Util from '../../../Util'
  import co from 'co'
  import {HttpResetClass} from 'vue-client'

  let getData = function* (self) {
    let load = new HttpResetClass()
    load.load("POST", 'rs/sql/singleTableParam',
      {data: self.sqlcondition},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let s = []
        for (var i = 0; i < 5; i++) {
          s[i] = res.data[0][self.grade[i]]
        }
        self.monitordata = s
      })
  }
  export default {
    name: "monitor",
    props: {
      showdate: {
        type: Boolean,
        default: false
      },
      listenheight: String,
    },
    data() {
      return {
        date: [2018, 2017, 2016],
        xc: '',
        monitortotal: '',
        monitordata: [],
        monitorscale: [],
        grade: ['关阀走气', '过流保护关阀', '周期关阀', '报警关阀', '磁干扰'],
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('monitor'))
        var scale = 0.8
        var data = {
          grade: this.grade,
          visits: this.monitordata,
          totalCost: [1, 1, 1, 1, 1],
          cost: this.monitorscale,
        }
        this.xc.setOption({
          title: {
            // top: '5%',
            left: 'center',
            text: '',
            textStyle: {
              align: 'center',
              color: '#15dce2',
              fontSize: 12 * scale
            }
          },
          grid: {
            left: '30%',
            right: '15%',
            top: '0',
            bottom: '0'
          },
          xAxis: {
            show: false,
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              margin: 10 * scale,
              show: true,
              color: '#15dce2',
              fontSize: 12 * scale
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: data.grade
          },
          series: [{
            type: 'bar',
            barGap: '-100%',
            label: {
              normal: {
                show: true,
                position: 'right',
                color: '#15dce2',
                fontSize: 12 * scale,
                formatter:
                  function (param) {
                    // console.log("series   ", data.visits[param.dataIndex], "   ", param, "   ", data)
                    return data.visits[param.dataIndex];
                  },
              }
            },
            barWidth: '35%',
            itemStyle: {
              normal: {
                borderColor: 'rgba(1,207,242,0.05)',
                borderWidth: 2,
                barBorderRadius: 15,
                color: function (param) {
                  // console.log("itemStyle   ", data.visits[param.dataIndex], "   ", param, "   ", data)
                  if (data.visits[param.dataIndex] == '户数/户') {
                    return 'rgba(1,207,242,0.05)'
                  }
                  return '#003d4c';
                },
              },
            },
            z: 1,
            data: data.totalCost,
            // data: da
          }, {
            type: 'bar',
            barGap: '-99%',
            barWidth: '33%',
            itemStyle: {
              normal: {
                barBorderRadius: 16 * scale,
                color: {
                  type: 'linear',
                  x: 0,
                  x1: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#6fd9d0'
                  }, {
                    offset: 1,
                    color: '#6fd9d0'
                  }]
                }
              },
            },
            max: 1,
            labelLine: {
              show: true,
            },
            z: 2,
            data: data.cost,
          }]
        })
      },
      searchdata() {
        var self = this
        let sqldata = getData(this)
        co(sqldata)
      },
      scale() {
        var l = this.monitordata[0]
        this.monitortotal = l
        for (var i = 0; i < 4; i++) {
          this.monitortotal = this.monitortotal + this.monitordata[i + 1]
          if (l < this.monitordata[i + 1]) {
            l = this.monitordata[i + 1]
          }
        }
        l = l * 1.3
        for (var i = 0; i < 5; i++) {
          this.monitorscale[i] = this.monitordata[i] / l
        }
      },
    },
    watch: {
      'monitordata': {
        deep: true,
        handler(val) {
          this.scale()
          this.setBar()
        }
      },
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            this.$parent.$parent.changeresize(this.xc)
          }
        },
        immediate: true
      }
    },
    ready() {
      var items = 'a1.aa 磁干扰,b1.bb 报警关阀,c1.cc 周期关阀,d1.dd 过流保护关阀,e1.ee 关阀走气'
      var tablename = '(SELECT count(f_userinfo_id) aa from  T_METEREAD WHERE f_magneticInterference=1 ) a1,\n' +
        '(SELECT count(f_userinfo_id) bb from  T_METEREAD WHERE f_alarmShutValve=1 ) b1,\n' +
        '(SELECT count(f_userinfo_id) cc from  T_METEREAD WHERE f_cycleShutValue=1 ) c1,\n' +
        '(SELECT count(f_userinfo_id) dd from  T_METEREAD WHERE f_overCurrentProtection=1 ) d1,\n' +
        '(SELECT count(f_userinfo_id) ee from  T_METEREAD WHERE f_leakageFlag=1 )  e1'
      var condition = "1=1"
      this.sqlcondition = {items: items, tablename: tablename, condition: condition}
      this.searchdata()
    }
  }
</script>

<style scoped>
  .monitor {

  }

  .label {
    font-size: 0.85em;
    color: #fff;
    height: 8%;
    width: 100%;
    margin-left: 6%;
  }

  .flex {
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    text-align: justify;
    margin: 0 auto;
  }

  .font-style {
    font-size: 0.4em;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }

  .d1 {
    height: 8%;
    margin-left: 40%;
  }

  .d2 {
    height: 81%;
    padding-right: 1%;
    padding-top: 1%;
  }

  .f24 {
    font-size: 0.75em;
    color: #f3c832;
  }

  .f16 {
    font-size: 0.75em;
    color: #ffffff;
  }

  .fleft {
    font-size: 0.75em;
    color: #ffffff;
    display: inline-block;
    width: 30%;
    float: left;
    text-align: right;
  }

  .fright {
    font-size: 0.75em;
    color: #ffffff;
    display: inline-block;
    float: right;
    width: 30%;
    text-align: right;
  }

  select {
    padding-left: 1%;
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #001521;
    background: url('../../../../static/ManageHomePic/图层5拷贝4.png') no-repeat right center;
    color: #15dce2;
    font-size: 0.75em;
    width: 10%;
  }

  #monitor {
    height: 80%;
    width: 100%;
  }
</style>
