<template lang="html">
  <div class="span">
    <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="day">日</label>
      <input type="checkbox" id="f_userType" value="f_user_type" v-model="nameForSql"/>
      <label for="f_userType">用户类型</label>
      <input type="checkbox" id="f_gasproperties" value="f_gasproperties" v-model="nameForSql"/>
      <label for="f_gasproperties">用气性质</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">
       <export-excel
         :data="{condition: condition,groupname:groupNameForSql}"
         :field="getfield"
         sqlurl="rs/logic/webmeter_exportfile" sql-name="webmeter_getUserGasSum"
         template-name='usegaseform'
         :choose-col="true"></export-excel>
      </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_filiale')" 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>
        </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_filiale')">{{item.f_filiale}}</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.avg_price}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

  export default {
    props: {
      condition: {
        type: String,
        default: '1=1'
      },
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    data() {
      return {
        model2: null,
        nameForSql: [],
        groupNameForSql: '',
        getfield : {}

      }
    },
    ready() {
    },
    methods: {
      async searchData() {
        if (this.groupNameForSql) {
          let load = new HttpResetClass()
          let res = []
          this.getfield = {
            'f_oughtamount': '总用气气量(m³)',
              'f_oughtfee': '总用气金额(元)',
              'avg_price': '综合单价(元/m³)'
          }
          this.getfields()
          res = await load.load('POST', 'rs/sql/webmeter_getUserGasSum',
            {
              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 {
          window.alert("请选择汇总项")
        }
      },
      getfields(){
        if(this.groupNameForSql.search("year") != -1){
          this.getfield['year']='年份'
        }
        if(this.groupNameForSql.search("month") != -1){
          this.getfield['month']='月份'
        }
        if(this.groupNameForSql.search("week") != -1){
          this.getfield['week']='周'
        }
        if(this.groupNameForSql.search("day") != -1){
          this.getfield['day']='日'
        }
        if(this.groupNameForSql.search("f_user_type") != -1){
          this.getfield['f_user_type']='用户类型'
        }
        if(this.groupNameForSql.search("f_gasproperties") != -1){
          this.getfield['f_gasproperties']='用气性质'
        }
        if(this.groupNameForSql.search("f_filiale") != -1){
          this.getfield['f_filiale']='组织机构'
        }
      },
      //拼接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.getGroupName1()
      }
    }
  }
</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>
