<template lang="html">
  <div class="span" >
    <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_userType" value="f_user_type" v-model="nameForSql"/>
      <label for="week">用户类型</label>
      <input type="checkbox" id="f_gasproperties" value="f_gasproperties" v-model="nameForSql"/>
      <label for="week">用气性质</label>
      <input type="checkbox" id="f_orgstr" value="f_orgstr" v-model="nameForSql"/>
      <label for="week">营业网点</label>
      <input type="checkbox" id="f_filialeids" value="f_filialeids" v-model="nameForSql"/>
      <label for="week">分公司</label>
      <button class="btn btn-success" @click="searchData">查询</button>
      <span style="float: right">
        <report-excel class="btn btn-success" id="table"></report-excel>
        <report-print class="btn btn-success" id="table" top='3cm' left='0' width='100%' height='100%'></report-print></span>
    </div>
    <div id="table">
      <table  class="table table-bordered">
        <thead class="text-left">
        <tr style="text-align:center">
          <p style="padding: 8px;text-align:center">用户用气汇总</p>
        </tr>
        <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_orgstr')" style="text-align:center">营业网点</th>
          <th v-if="nameForSql.includes('f_filialeids')" style="text-align:center">分公司</th>
          <th style="text-align:center"><nobr>总用气气量(m³)</nobr></th>
          <th style="text-align:center"><nobr>总用气金额(元)</nobr></th>
          <th style="text-align:center"><nobr>一阶总气量(m³)</nobr></th>
          <th style="text-align:center"><nobr>一阶总金额(元)</nobr></th>
          <th style="text-align:center"><nobr>二阶总气量(m³)</nobr></th>
          <th style="text-align:center"><nobr>二阶总金额(元)</nobr></th>
          <th style="text-align:center"><nobr>三阶总气量(m³)</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_orgstr')">{{item.f_orgstr}}</td>
          <td style="text-align:center" v-if="nameForSql.includes('f_filialeids')">{{item.f_filialeids}}</td>
          <td style="text-align:center">{{item.f_oughtamount}}</td>
          <td style="text-align:center">{{item.f_oughtfee}}</td>
          <td style="text-align:center">{{item.f_gas1}}</td>
          <td style="text-align:center">{{item.f_money1}}</td>
          <td style="text-align:center">{{item.f_gas2}}</td>
          <td style="text-align:center">{{item.f_money2}}</td>
          <td style="text-align:center">{{item.f_gas3}}</td>
          <td style="text-align:center">{{item.f_money3}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import { HttpResetClass } from 'vue-client'
  export default {
    props:{
      startdate: {
        type: String,
        default: ''
      },
      enddate: {
        type: String,
        default: ''
      }
    },
    data(){
      return{
        model2:null,
        conditionForSql: '1=1',
        nameForSql:[],
        groupNameForSql :'',

      }
    },
    ready (){
    },
    methods :{
      async searchData(){
        if(this.groupNameForSql) {
          let load = new HttpResetClass()
          let res = await load.load('POST', 'rs/sql/gasAnalysisSummary',
            {data: {condition: this.conditionForSql, groupname: this.groupNameForSql}},
            {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()
        console.log("拼接的groupname为："+this.groupNameForSql)
        console.log("拼接的groupname[][]为："+this.nameForSql)
      },


    },
    watch:{

      'nameForSql'(){
        // this.nameForSql =this.groupNameByDate;
        this.getGroupName1()


      },
      '$parent.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>
