<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" checked 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_user_type" value="f_user_type"  v-model="nameForSql"/>
      <label for="f_user_type">用户类型</label>
      <input type="checkbox" id="f_gasproperties" value="f_gasproperties" v-model="nameForSql"/>
      <label for="f_gasproperties">用气性质</label>
      <input type="checkbox" id="f_orgname" value="f_orgname" v-model="nameForSql"/>
      <label for="f_orgname">组织机构</label>

      <span style="float: right">
        <button class="button_search button_spacing" @click="searchData">查询</button>
         <button @click="$parent.notShowTotalForm()" class="button_clear button_spacing" style="width: max-content">隐藏汇总</button>
       <export-excel :data="getCondition" class="button_export button_spacing"
                     :field="getfield"
                     sqlurl="rs/logic/exportfile" sql-name="NewDrillErrorEform" template-name='异常分析汇总'
                     :choose-col="true"></export-excel>
        <report-print class="button_export button_spacing" style="width: max-content" 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_user_type')" style="text-align:center">用户类型</th>
        <th v-if="nameForSql.includes('f_gasproperties')" style="text-align:center">用气性质</th>
        <th v-if="nameForSql.includes('f_orgname')" style="text-align:center">组织机构</th>
        <th style="text-align:center"><nobr>上报总数</nobr></th>
        <th style="text-align:center"><nobr>拆表上报</nobr></th>
        <th style="text-align:center"><nobr>补抄上报</nobr></th>
        <th style="text-align:center"><nobr>锂电低电上报</nobr></th>
        <th style="text-align:center"><nobr>E7上报</nobr></th>
        <th style="text-align:center"><nobr>E8上报</nobr></th>
        <th style="text-align:center"><nobr>E16上报</nobr></th>
        <th style="text-align:center"><nobr>E21上报</nobr></th>
        <th style="text-align:center"><nobr>E23上报</nobr></th>
        <th style="text-align:center"><nobr>其他上报</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_user_type')">{{item.f_user_type}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('f_gasproperties')">{{item.f_gasproperties}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('f_orgname')">{{item.f_orgname}}</td>
        <td style="text-align:center">{{item.t}}</td>
        <td style="text-align:center">{{item.type1}}</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>
      </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()
      }
      // condition: {
      //   type: String,
      //   default: '1=1'
      // },
      // groupNameByDate: {
      //   type: [],
      //   default:['year']
      // }
    },
    data(){
      return{
        enddate:'',
        startdate:'',
        model2:null,
        conditionForSql: '1=1',
        nameForSql:[],
        groupNameForSql :'',
        exportfield:{"year":"年份","month":"月份","week":"周","day":"日",
          "f_user_type":"用户类型","f_gasproperties":"用气性质","f_orgname":"组织机构"}

      }
    },
    ready (){
      this.nameForSql=['year']
      this.groupNameForSql= 'year'
      this.searchData()
    },
    methods :{
      async searchData(){
        if(this.groupNameForSql && this.groupNameForSql !== 'undefined') {
          let load = new HttpResetClass()
          let res = await load.load('POST', 'rs/sql/NewDrillErrorEform',
            {data: {condition: this.condition, groupname: this.groupNameForSql,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{
          this.$showAlert('请选择汇总项', 'warning', 3000)
        }
      },
      //拼接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()
      }


    },
    computed: {
      getfield(){
        var fields={}
        let i = 0
        for (; i < this.nameForSql.length; i++) {
          if(this.nameForSql[i] in this.exportfield ){
            fields[this.nameForSql[i]]=this.exportfield[this.nameForSql[i]]
          }
        }
        fields.t="上报总数"
        fields.type1="拆表上报"
        fields.type2="补抄上报"
        fields.type3="锂电低电上报"
        fields.type4="E7上报"
        fields.type5="E8上报"
        fields.type6="E16上报"
        fields.type7="E21上报"
        fields.type8="E23上报"
        fields.type9="其他上报"
        return fields
      },
      getCondition() {
        return {
          condition: this.conditionForSql,
          groupname: this.groupNameForSql

        }
      }
    },
    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
      }
    }
  }
</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>
