<template lang="html">
  <div class="span " id="table1">
    <p class="bg-info text-center " style="padding: 8px;">异常分析汇总</p>
    <div class="mystyle2 ">
      <label class="control-label">汇总项</label>
      <input type="checkbox" id="year" value="year" v-model="nameForSql"/>
      <label for="year">年份</label>
      <input type="checkbox" id="month" value="month" v-model="nameForSql"/>
      <label for="month">月份</label>
      <input type="checkbox" id="week" value="week" v-model="nameForSql"/>
      <label for="week">周</label>
      <input type="checkbox" id="day" value="day" v-model="nameForSql"/>
      <label for="week">日</label>
      <input type="checkbox" id="f_meternumber" value="f_meternumber" v-model="nameForSql"/>
      <label for="f_meternumber">表钢号</label>
      <input type="checkbox" id="f_filiale" value="f_filiale" v-model="nameForSql"/>
      <label for="f_filiale">组织机构</label>
      <button class="btn btn-success" @click="searchData">查询</button>
      <span style="float: right">
        <report-excel class="btn btn-success" id="table1"></report-excel>
        <report-print class="btn btn-success" id="table1" top='3cm' left='0' width='100%' height='100%'></report-print></span>
    </div>
    <table class="table table-bordered padding-top: 10px;">
      <thead class="text-left">
      <tr>
        <th v-if="nameForSql.includes('year')" style="text-align:center">年份</th>
        <th v-if="nameForSql.includes('month')" style="text-align:center">月份</th>
        <th v-if="nameForSql.includes('week')" style="text-align:center">周</th>
        <th v-if="nameForSql.includes('day')" style="text-align:center">日</th>
        <th v-if="nameForSql.includes('f_meternumber')" style="text-align:center">表钢号</th>
        <th v-if="nameForSql.includes('f_filiale')" style="text-align:center">组织机构</th>
        <th style="text-align:center">
          <nobr>{{grouptypename}}</nobr>
        </th>
        <th style="text-align:center">
          <nobr>出现{{grouptypename}}的用户数</nobr>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in model2">
        <td style="text-align:center" v-if="nameForSql.includes('year')">{{item.year}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('month')">{{item.month}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('week')">{{item.week}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('day')">{{item.day}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('f_meternumber')">{{item.f_meternumber}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('f_filiale')">{{item.f_filiale}}</td>
        <td style="text-align:center">{{item.types}}</td>
        <td style="text-align:center">{{item.usertotal}}</td>
        <!--<td style="text-align:center">{{item.type2}}</td>
        <td style="text-align:center">{{item.type3}}</td>
        <td style="text-align:center">{{item.type4}}</td>
        <td style="text-align:center">{{item.type5}}</td>
        <td style="text-align:center">{{item.type6}}</td>
        <td style="text-align:center">{{item.type7}}</td>
        <td style="text-align:center">{{item.type8}}</td>
        <td style="text-align:center">{{item.type9}}</td>
        <td style="text-align:center">{{item.type10}}</td>
        <td style="text-align:center">{{item.type11}}</td>
        <td style="text-align:center">{{item.type12}}</td>
        <td style="text-align:center">{{item.type13}}</td>
        <td style="text-align:center">{{item.type14}}</td>-->
      </tr>
      </tbody>
    </table>
  </div>
</template>

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

  export default {
    props: {
      condition: '1=1',
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      grouptype: {
        type: String,
        default: 'type1'
      }
    },
    data() {
      return {
        enddate: '',
        startdate: '',
        model2: null,
        conditionForSql: '1=1',
        nameForSql: [],
        groupNameForSql: '',
        grouptypename:'抄表异常'
      }
    },
    ready() {
    },
    methods: {
      async searchData() {
        if (this.groupNameForSql) {
          let load = new HttpResetClass()
          let res = await load.load('POST', 'rs/sql/NewDrillErrorEform',
            {
              data: {
                condition: this.condition,
                groupname: this.groupNameForSql,
                grouptype: this.grouptype,
                startDate: this.startdate,
                endDate: this.enddate
              }
            },
            {resolveMsg: null, rejectMsg: null})
          console.log('res返回', res)
          this.model2 = res.data
          console.log('res返回123', this.model2)
        } else {
          window.alert("请选择汇总项")
        }
      },
      //拼接groupName1
      getGroupName1() {
        console.log("this.nameForSql.length：" + this.nameForSql.length)
        let str = ''
        let i = 0
        for (; i < this.nameForSql.length - 1; i++) {
          str += this.nameForSql[i] + ','
        }
        str += this.nameForSql[i]
        this.groupNameForSql = str.trim()
      },


    },
    watch: {
      'nameForSql'() {
        // this.nameForSql =this.groupNameByDate;
        this.getGroupName1()
      },
      'startdate'(val) {
        this.startdate = val
      },
      'enddate'(val) {
        this.enddate = val
      },
      'condition'(val) {
        console.log("监听groupNameByDate,新" + val + "旧：")
        this.conditionForSql = val
      },
      'grouptype'(val) {
        console.log("监听grouptype,新" + val)
        if (val === 'type1') {
          this.grouptypename = '抄表异常'
        } else if (val === 'type2') {
          this.grouptypename = '信号质量差'
        } else if (val === 'type3') {
          this.grouptypename = '电压低'
        } else if (val === 'type4') {
          this.grouptypename = '磁干扰'
        } else if (val === 'type5') {
          this.grouptypename = '报警关阀'
        } else if (val === 'type6') {
          this.grouptypename = '周期关阀'
        } else if (val === 'type7') {
          this.grouptypename = '过流保护关阀'
        } else if (val === 'type8') {
          this.grouptypename = '关阀走气'
        } else if (val === 'type9') {
          this.grouptypename = '拆表报警'
        } else if (val === 'type10') {
          this.grouptypename = 'E-7单干簧管故障'
        } else if (val === 'type11') {
          this.grouptypename = 'E-8双干簧管故障'
        } else if (val === 'type12') {
          this.grouptypename = 'E-16周期关阀'
        } else if (val === 'type13') {
          this.grouptypename = 'E-17过流报警'
        } else if (val === 'type14') {
          this.grouptypename = 'E-21透支关阀'
        } else {
          this.grouptypename = 'E-23透支过气'
        }
      },

    }
  }
</script>

<style scoped>
  .mystyle2 {
    width: 100%;
    height: 35px;
    /*background: #00A3F0;*/
    padding-left: 15px;
    float: left;
  }

  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
    padding: 10px 30px 10px 30px;
    border-radius: 15px;
  }

</style>
