<template>
  <div>
      <div class="flex">
        <div  class="basic-main" :class="{'basic-main':!selectRow,'binary-left':selectRow}" style="height: 98%;">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch"
                    v-show="$parent.searchshow">
            <div novalidate class="form-inline auto" partial>
              <div class="row">
                <res-select-group :style="$parent.$parent.style" :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getorg" v-ref:sel></res-select-group>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">用户编号</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_userinfo_code"
                         condition="ui.f_userinfo_code like '%{}%'" placeholder='用户编号'>
                </div>
                <div style="float:right;margin-top: 8px" class="span">
                  <button class="button_spacing button_search" @click="search()">查 询</button>
                  <export-excel v-if="$parent.$parent.excelTable"
                                class="auto"
                                :data="{condition: $parent.$parent.condition}"
                                :field="$parent.$parent.getfield"
                                :footer="$parent.$parent.footer"
                                sqlurl="rs/logic/saleExport" progress="saleGetExportProgress"  sql-name="machineChargeQuery"
                                template-name='收费查询'
                                :choose-col="true"></export-excel>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()"
                    class="button_spacing"
                    style="float: right"></div>
                </div>
              </div>
              <div class="row" v-if="$parent.$parent.criteriaShow">
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">抄表编号</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.id"
                         condition="hd.id = '{}'" placeholder='用户编号'>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">用户姓名</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_user_name"
                         condition="ui.f_user_name = '{}'" placeholder='用户姓名'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户类型</label>
                  <v-select :value.sync="model.f_user_type"
                            @change="$parent.$parent.userTypeChange()"
                            :options='$parent.$parent.usertypes' placeholder='请选择' v-model="model.f_user_type"
                            condition="hd.f_user_type = '{}'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">用气性质</label>
                  <v-select :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                            :options='$parent.$parent.gasproperties' placeholder='请选择'
                            condition="hd.f_gasproperties = '{}'"
                            close-on-select></v-select>
                </div>
                <div  class="form-group" :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}">
                  <label class="font_normal_body">气表品牌</label>
                  <v-select :value.sync="model.f_meter_brand" multiple
                            v-model="model.f_meter_brand"
                            :options='$parent.$parent.meterbrands' placeholder='请选择'
                            condition="gd.f_meter_brand in {}"
                            close-on-select></v-select>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">开始日期</label>
                  <datepicker placeholder="开始日期" v-model="model.startDate" :value.sync="model.startDate" style="width:60%"
                              :format="'yyyy-MM-dd 00:00:00'" condition="hd.f_input_date >= '{}'">
                  </datepicker>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">结束日期</label>
                  <datepicker placeholder="结束日期" v-model="model.endDate" :value.sync="model.endDate" style="width:60%"
                              :format="'yyyy-MM-dd 23:59:59'" condition="hd.f_input_date <= '{}'">
                  </datepicker>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">是否退费</label>
                  <v-select :value.sync="model.f_refund" v-model="model.f_refund"
                            :options='$parent.$parent.refunds' placeholder='是否退费'
                            style="width:60%"
                            close-on-select
                            condition="sd.id  {}"></v-select>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">退费日期</label>
                  <datepicker placeholder="开始日期" v-model="model.startDate1" :value.sync="model.startDate1" style="width:60%"
                              :format="'yyyy-MM-dd 00:00:00'" condition="sd.f_operate_date >= '{}'">
                  </datepicker>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">&ensp;&ensp;&ensp;至&ensp;&ensp;&ensp;</label>
                  <datepicker placeholder="结束日期" v-model="model.endDate1" :value.sync="model.endDate1" style="width:60%"
                              :format="'yyyy-MM-dd 23:59:59'" condition="sd.f_operate_date <= '{}'">
                  </datepicker>
                </div>

              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
              <template partial='head'>
                <tr>
                  <th v-for="(key,value ) in $parent.$parent.$parent.getfield" ><nobr>{{value}}</nobr></th>
                </tr>
              </template>
              <template partial='body'>
                <td style="text-align: center;" v-for="(key,value ) in $parent.$parent.$parent.getfield"><nobr>{{row[key]}}</nobr></td>
              </template>
          </data-grid>
        </criteria-paged>
          <table class="table-hover">
            <tr style="position: relative" class="table-bordered">
              <td
                style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">
                汇总信息
              </td>
              <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold"
                  v-for="(key,value ) in sumFields">
                {{value}}合计:&emsp;{{sumsmodel[key]}}
              </td>
            </tr>
          </table>
      </div>
  </div>
</div>
</template>

<script>
  import {PagedList} from 'vue-client'

let loadParamGem = async function (self) {
    await self.$LoadParams.loadParam(self.f_filialeid)
    self.$refs.paged.$refs.criteria.model.startDate = self.$login.toStandardDateString() + ' 00:00:00'
    self.$refs.paged.$refs.criteria.model.endDate = self.$login.toStandardDateString() + ' 23:59:59'
    self.initMeterBrands()
  }
  export default {
    'title': '抄表结算查询',
    data () {
      return {
        usertypes: this.$appdata.getParam('客户类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('客户类型')] : [],
        refunds: [{label: '全部', value: ''}, {label: '是', value: 'is not null'}, {label: '否', value: 'is  null'}],
        model: new PagedList('rs/sql/machineChargeQuery', 20, {}, {f_refundfee: 0, f_oughtamount: 0, realamount_fee: 0}),
        // 控制查询条件显示
        searchshow: true,
        criteriaShow: false,
        initres: {
          org: [this.$login.f.orgid]
        },
        gasproperties: [],
        meterbrands: [],
        sumsmodel: 0,
        // 控制样式
        editList: false,
        excelTable: true,
        condition: '',
        getfield: {
          'id': '抄表编号',
          'f_meternumber': '表号',
          'f_userinfo_code': '用户编号',
          'f_user_name': '用户姓名',
          'f_meter_brand': '气表品牌',
          'f_input_date': '抄表时间',
          'f_oughtamount': '气量',
          'f_address': '地址',
          'f_user_type': '客户类型',
          'f_oughtfee': '应收金额',
          'f_realamount': '预收气费',
          'f_preprice': '应收气价',
          'f_price': '预收气价',
          'f_refund': '是否退费',
          'f_refundfee': '退费金额',
          'f_refund_date': '退费日期',
          'f_operator': '操作员',
          'f_depname': '所属部门',
          'f_orgname': '所属公司'
        },
        sumFields: {
          'f_refundfee': '退费金额',
          'f_oughtamount': '用气量',
          'realamount_fee': '预收金额'
        },
        footer: [],
        f_orgid: ''
      }
    },
    ready () {
      loadParamGem(this)
    },
    computed: {
    },
    methods: {
      userTypeChange () {
        this.gasproperties = []
        if (this.$refs.paged.$refs.criteria.model !== null) {
          this.$refs.paged.$refs.criteria.model.f_gasproperties = ''
          this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
        } else {
          this.gasproperties = [{label: '全部', value: ''}]
        }
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      getorg (val) {
        this.f_orgid = val
      },
      initMeterBrands () {
        // 初始化气表品牌
        let brandArr = []
        this.$GetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value.f_meter_brand
          brandArr.push(temp)
        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        if (!this.f_orgid) {
          this.getorg([this.$login.f.orgid])
        }
        if (this.f_orgid) {
          args.condition = `${args.condition}   ${this.f_orgid}`
        }
        args.condition = args.condition.replace('f_orgid', 'hd.f_orgid')
        this.model.search(args.condition, args.model)
        this.condition = args.condition
        this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
      },
      getotherfooter () {
        this.footer = []
        let footerData = [], exportfield = this.getfield
        footerData.push('合计')
        let self = this
        for (var field in self.sumsmodel) {
          footerData.push(`${exportfield[field] || '预收金额'}合计:${self.sumsmodel[field]}`)
        }
        this.footer.push(footerData)
      }
    },
    watch: {
      sumsmodel: {
        handler: function (val) {
          this.getotherfooter()
        },
        deep: true
      }
    }
  }
</script>
<style>
  .datapanel {
    color: #333;
    background-color: white;
    padding: 10px 20px;
    border-radius: 15px;
  }
</style>
