<template lang="html">
  <div class="basic-main" id="unit">
    <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
    <div class="row">
      <div class="col-sm-1 form-group">
        <label class="font_normal_body">汇总项</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="year" type="checkbox" checked v-model="nameForSql" value="year"/>
        <label class="font_normal_body" for="year">年份</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="month" type="checkbox" v-model="nameForSql" value="month"/>
        <label class="font_normal_body" for="month">月份</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="week" type="checkbox" v-model="nameForSql" value="week"/>
        <label class="font_normal_body" for="week">周</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="day" type="checkbox" v-model="nameForSql" value="day"/>
        <label class="font_normal_body" for="day">日</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="f_userType" type="checkbox" v-model="nameForSql" value="f_user_type"/>
        <label class="font_normal_body" for="f_userType">用户类型</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="f_gasproperties" type="checkbox" v-model="nameForSql" value="f_gasproperties"/>
        <label class="font_normal_body" for="f_gasproperties">用气性质</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="f_meter_brand" type="checkbox" v-model="nameForSql" value="f_meter_brand"/>
        <label class="font_normal_body" for="f_meter_brand">气表品牌</label>
      </div>
      <div class="col-sm-1 form-group">
        <input id="f_orgname" type="checkbox" v-model="nameForSql" value="f_orgname"/>
        <label class="font_normal_body" for="f_orgname">组织机构</label>
      </div>

      <span style="float: right">
          <button @click="searchData" class="button_search button_spacing">查询</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="webmeter_getUserGasSum" template-name='用气分析汇总'
               :choose-col="true"></export-excel>

        <!--<rexport-excel class="button_export button_spacing" id="table" style="width: 28%"></rexport-excel>-->
        <report-print class="button_export button_spacing" height='100%' id="table" left='0' top='3cm'
                      width='100%'></report-print></span>
    </div>
  </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;" class="font_normal_body">用户用气汇总</p>
        </tr>
        <tr>
          <th style="text-align:center" v-if="nameForSql.includes('year')">年份</th>
          <th style="text-align:center" v-if="nameForSql.includes('month')">月份</th>
          <th style="text-align:center" v-if="nameForSql.includes('week')">周</th>
          <th style="text-align:center" v-if="nameForSql.includes('day')">日</th>
          <th style="text-align:center" v-if="nameForSql.includes('f_user_type')">用户类型</th>
          <th style="text-align:center" v-if="nameForSql.includes('f_gasproperties')">用气性质</th>
          <th style="text-align:center" v-if="nameForSql.includes('f_meter_brand')">气表品牌</th>
          <th style="text-align:center" v-if="nameForSql.includes('f_orgname')">组织机构</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_meter_brand')">{{item.f_meter_brand}}</td>
          <td style="text-align:center" v-if="nameForSql.includes('f_orgname')">{{item.f_orgname}}</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'
  import * as Util from '../../../Util'

  export default {
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      condition: {
        type: String,
        default: '1=1'
      }
      // groupNameByDate: {
      //   type: [],
      //   default:['year']
      // }
    },
    data() {
      return {
        model2: null,
        conditionForSql: '1=1',
        nameForSql: [],
        groupNameForSql: '',
        exportfield:{"year":"年份","month":"月份","week":"周","day":"日",
         "f_user_type":"用户类型","f_gasproperties":"用气性质","f_meter_brand":"气表品牌","f_orgname":"组织机构"}
      }
    },
    ready() {
      this.nameForSql=['year']
      this.groupNameForSql= 'year'
      this.searchData()
    },
    methods: {
      async searchData() {
        console.log(this.groupNameForSql)
        if (this.groupNameForSql&& this.groupNameForSql !== 'undefined') {
          let load = new HttpResetClass()
          let res = await load.load('POST', 'rs/sql/webmeter_getUserGasSum',
            {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 {
          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: {
      // usertypes () {
      //   return this.$appdate.getParams("客户类型")
      // },
      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.f_oughtamount="总用气气量(m³)"
        fields.f_oughtfee="总用气金额(元)"
        return fields
      },
      getCondition() {
        return {
          condition: this.conditionForSql,
          groupname: this.groupNameForSql

        }
      }
      },
    watch: {
      'nameForSql'() {
        // this.nameForSql =this.groupNameByDate;
        this.getGroupName1()
      },
      '$parent.condition'(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>
