<template>
  <div id='app' class="flex bg-white p-10  datapanel" >
    <criteria-paged :model="model" :pager='true' v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial >
          <p class="bg-info text-center" style="padding: 8px;">用户用气明细</p>
          <div class="row">
            <div class="col-sm-2">
              <label class="control-label">时间区间</label>
              <datepicker id="startDate" placeholder="开始时间"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="reset">
              </datepicker>
            </div>
            <div class="col-sm-2">
              <label class="control-label" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
              <datepicker id="endDate" placeholder="结束日期"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd 23:59:59'"
                          :show-reset-button="reset">
              </datepicker>
            </div>
            <div class="col-sm-2">
              <label class="control-label">客户编号</label>
              <input  type="text" class="form-control" v-model="model.f_userinfo_code" placeholder='客户编号'
                      condition="f_userinfo_code = '{}'" v-next-el='username'>
            </div>
              <div class="col-sm-2">
                <label class="control-label">客户名称</label>
                <input  type="text" class="form-control" v-model="model.f_username" placeholder='客户名称'
                        condition="f_user_name like '%{}%'" v-next-el='userid' v-el:username>
              </div>
              <div class="col-sm-2">
                <label class="control-label">客户地址</label>
                <input type="text" class="form-control" v-model="model.f_address" placeholder='地址'
                       condition="f_address like '%{}%'" v-el:xq v-next-el='address' v-el:area
                >
              </div>
            <res-select-group @re-res="$parent.$parent.getRes" style="col-sm-2"></res-select-group>
            <div class="col-sm-2">
            <label class="control-label">是否欠费</label>
            <v-select id="f_meter_brand"
            v-model="model.f_curbalance"
            placeholder='是否欠费'
            :value.sync="model.f_curbalance"
            :options='$parent.$parent.isArrear'
            condition="{}"
            close-on-select >
            </v-select>
          </div>
          <div class="row" style="float: right">
              <button class="btn btn-success " @click="search()">查询</button>
              <button class="btn btn-default width-100" @click="$parent.$parent.clearmsg">清空</button>
            <export-excel :data="$parent.$parent.getCondition"
                          :field="$parent.$parent.getfield"
                          sqlurl="rs/logic/exportfile" sql-name="gasAnalysisQuery" template-name='用气分析导出' :choose-col="true"></export-excel>
              <button class="btn btn-success" v-if="$parent.$parent.eformsShowButton" @click="$parent.$parent.showTotalForm()" >显示汇总</button>
              <button class="btn btn-success" v-if="!$parent.$parent.eformsShowButton" @click="$parent.$parent.notShowTotalForm()" >隐藏汇总</button>
          </div>
        </div>
        </div>
      </criteria>
      <data-grid id="usergasall" :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th rowspan="2" style="text-align:center" ><nobr>序号</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>客户编号</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>客户名称</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>期初余额(元)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用气气量(m³)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>用气金额(元)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>收款</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>期末结余(元)</nobr></th>
            <th rowspan="2" style="text-align:center"><nobr>地址</nobr></th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align:center">{{$index+1}}</td>
          <td style="text-align:center"><nobr>{{row.f_userinfo_code}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_user_name}}</nobr></td>
          <!--<td style="text-align:center"><nobr>{{row.f_user_type}}</nobr></td>-->
          <!--<td style="text-align:center"><nobr>{{row.f_gasproperties}}</nobr></td>-->
          <td style="text-align:center"><nobr>{{row.f_balance}}</nobr></td>
          <!--<td style="text-align:center"><nobr>{{row.f_last_tablebase}}</nobr></td>-->
          <!--<td style="text-align:center"><nobr>{{row.f_tablebase}}</nobr></td>-->
          <!--<td style="text-align:center"><nobr>{{row.f_avg_price}}</nobr></td>-->
          <td style="text-align:center"><nobr>{{row.f_pregas}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_preamount}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_charge_money}}</nobr></td>
          <td style="text-align:center"><nobr>{{row.f_curbalance}}</nobr></td>
          <!--<td style="text-align:center"><nobr>{{row.f_hand_date}}</nobr></td>-->
          <!--<td style="text-align:center">{{row.f_userfiles_id}}</td>-->
          <td style="text-align:center"><nobr>{{row.f_address}}</nobr></td>
        </template>
      </data-grid>
    </criteria-paged>
<!--    &lt;!&ndash;      图显示模板&ndash;&gt;-->
<!--    <div class="mystyle" v-show="echarts">-->
<!--      <label class="control-label">图表统计项</label>-->
<!--      <v-select id="groupname"   v-model="groupname"-->
<!--                placeholder='分组项'-->
<!--                value-single="true"-->
<!--                :value.sync="groupname"-->
<!--                :options='getgroupname'-->
<!--                 close-on-select></v-select>-->
<!--    </div>-->
<!--    <div class="span " v-show="echarts">-->
<!--      <gas-analysis-echarts :groupname="groupname[0]" :condition="condition" :startdate="startDate" :enddate="endDate"></gas-analysis-echarts>-->
<!--    </div>-->

    <!--汇总表显示模板-->
    <div class="span"  v-show="isActiveTotalForm">
      <gas-analysis-summary ></gas-analysis-summary>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue'
  import { PagedList } from 'vue-client'
  import GasAnalysisEcharts from './GasAnalysisEcharts'
  import GasAnalysisSummary from './GasAnalysisSummary'
  import defaultPrint from '../../sale/config/DefaultPrint'
  import exportConfig from '../../sale/config/exportConfig'

  let readySomething = async function (self) {
    await self.$getConfig(self, 'GasAnalysisManageConfig')
    console.log('获取默认配置', self.config)
    self.defaultfield = [...self.defaultfield, ...self.config.defaultPrint]
    self.$refs.paged.$refs.cri.model.startDate = self.$login.toStandardYearMonth() + '-01 00:00:00'
    self.$refs.paged.$refs.cri.model.endDate = self.$login.toStandardDateString() + ' 23:59:59'
    self.$refs.paged.$refs.cri.search()
  }
  // let loadmeter = async function (self) {
  //     console.log('开始加载参数，。。')
  //   await self.$resetpost('rs/logic/getSaleInitData', {data: {f_filialeids: Vue.$login.f.f_orgids}}, {resolveMsg: null, rejectMsg: '获取营收参数出错！！！'}).then((res) => {
  //         console.log(res.data)
  //         let arr = []
  //         res.data.gasbrands.forEach((item) => {
  //             let temp = {}
  //             temp.label = item.f_meter_brand
  //             temp.value = item.f_meter_brand
  //             arr.push(temp)
  //         })
  //         self.meterbrand = arr
  //     })
  // }

  export default {
    title: '用气分析',
    props: ['data'],
    components: {GasAnalysisEcharts, GasAnalysisSummary},
    data () {
      return {
        model: new PagedList('rs/sql/gasAnalysisQuery', 20, {startDate: 'this.model.startDate', endDate: 'this.model.endDate'}),
        groupNameByDate: [],
        getGroupNameByDate: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'}
        ],
        reportStr: null,
        show: false,
        outlets: [],
        operator: [],
        filename: '',
        // echarts: true,
        searchshow: false,
        startDate: '',
        endDate: '',
        // echartsShowButton: false,
        eformsShowButton: true,
        isActiveTotalForm: false,
        condition: '1=1',
        groupname: 'year',
        getgroupname: [
          {label: '年份', value: 'year'},
          {label: '月份', value: 'month'},
          {label: '周', value: 'week'},
          {label: '日', value: 'day'}
        ],
        orgCondtionStr:'',
        defaultfield: [],
        config: {
          defaultPrint: ['f_userinfo_code', 'f_address', 'f_user_name', 'f_meternumber']
        },
      }
    },
    ready () {
      readySomething(this).then(() => {
        this.$emit('ready')
      }).catch((error) => {
        this.$emit('error', error)
      })

    },
    methods: {
        selfSearch (args) {
            args.condition =  `${args.condition} ` + this.orgCondtionStr
            this.model.search(args.condition, args.model)
            this.startDate = this.$refs.paged.$refs.cri.model.startDate
            this.endDate = this.$refs.paged.$refs.cri.model.endDate
            this.condition = args.condition
        },
      // 查询开关
      seachchange () {
        this.searchshow = !this.searchshow
      },
      clearmsg () {
        this.$refs.paged.$refs.cri.model = {}
      },
      /*getdata () {
        this.startDate = this.$refs.paged.$refs.cri.model.startDate
        this.endDate = this.$refs.paged.$refs.cri.model.endDate
        this.$refs.paged.$refs.cri.search()
        this.condition = this.$refs.paged.$refs.cri.condition
      },*/
      // 显示柱状图
      // showEcharts () {
      //   this.echarts = true
      //   this.echartsShowButton = false
      //   this.isActiveTotalForm = false
      // },
      notShowTotalForm () {
        // this.echarts = false
        // this.echartsShowButton = true
        this.eformsShowButton = true
        this.isActiveTotalForm = false
      },
      // 不显示柱状图
      notShowEcharts () {
        // this.echarts = false
        // this.echartsShowButton = true
        this.eformsShowButton = true
        this.isActiveTotalForm = false
      },
      // 显示汇总数据表格
      showTotalForm () {
        // this.echarts = false
        // this.echartsShowButton = true
        this.eformsShowButton = false
        this.isActiveTotalForm = true
      },
      close () {
        this.show = false
      },
      getMeterBrand () {
          loadmeter (this)
      },
      getRes(obj) {
          this.orgCondtionStr = obj
      },
    },
    watch: {
      'data' (val) {
        if (val.f_files_path) {
          this.getFileContent(val.f_files_path)
        } else {
          this.reportStr = null
        }
      }
    },
    computed: {
      getCondition(){
        return {condition: `${this.$refs.paged.$refs.cri.condition}`+this.orgCondtionStr,startDate:this.startDate,endDate:this.endDate}
      },
      getfield(){
        return exportConfig.GasAnalysisManageConfig
      },
      usertypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      isArrear () {
        return [{label: '全部', value: ''}, {label: '是', value: 'f_curbalance<0'}, {label: '否', value: 'f_curbalance>=0'},]
      },
      Gasproperties () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
      }
    }
  }
</script>
<style>
  .mystyle {
    width: 100%;
    height: 35px;
    /*background: #00A3F0;*/
    padding-left: 85%;
    float: left;
  }
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 10px 10px 10px;
    border-radius:15px;
  }
</style>
