<template>
    <div id="unit" class="flex-row">
        <div class="basic-main" @keyup.enter="search">
            <div class="flex" v-if="!show">
                <criteria-paged :model="model"  v-ref:paged >
                    <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
                        <div novalidate class="form-inline auto" partial>
                            <div class="row">
                              <div class="col-sm-2 form-group">
                                <label for="startDate" class="font_normal_body">开始日期</label>
                                <datepicker id="startDate" placeholder="开始日期" style="width:60%"
                                            v-model="model.startDate"
                                            :value.sync="model.startDate"
                                            :format="'yyyy-MM-dd HH:mm:ss'"
                                            :show-reset-button="true"
                                          >
                                </datepicker>
                              </div>
                              <div class="col-sm-2 form-group">
                                <label for="endDate" class="font_normal_body">结束日期</label>
                                <datepicker id="endDate" placeholder="结束日期" style="width:60%"
                                            v-model="model.endDate"
                                            :value.sync="model.endDate"
                                            :format="'yyyy-MM-dd HH:mm:ss'"
                                            :show-reset-button="true"
                                           >
                                </datepicker>
                              </div>
                                <div class="col-sm-2 form-group">
                                    <label class="font_normal_body">客户编号</label>
                                    <input type="text" style="width:60%" class="input_search" v-model="model.f_userinfo_code"
                                           condition="u.f_userinfo_code = '{}' " placeholder="客户编号">
                                </div>
                                <div class="col-sm-2 form-group">
                                    <label class="font_normal_body">客户名称</label>
                                    <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                                           condition="u.f_user_name like '%{}%'" placeholder="客户名称">
                                </div>

                                <div class="span" style="float:right;">
                                    <button class="button_search button_spacing" @click="search()">查询</button>
                                    <button class="button_clear button_spacing" @click="$parent.$parent.clear()">清空</button>
                                    <export-excel :data="$parent.$parent.getCondition"
                                                  :field="$parent.$parent.getfield"
                                                  :footer="$parent.$parent.footer"
                                                  :header="$parent.$parent.other"
                                                  sqlurl="api/af-revenue/logic/openapi/exportfile"
                                                  sql-name="yingShouMingXi"
                                                  template-name='月用气导出'
                                                  :choose-col="true"></export-excel>

                                  <print-data :sum-field="$parent.$parent.getfield" :model="$parent.model" :field="$parent.$parent.getfield"
                                               :defaultfield="$parent.$parent.defaultfield"
                                              titletable="应收明细"
                                              :sumsmodel="$parent.$parent.sumsmodel"></print-data>
                                    <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
                                </div>
                            </div>
                            <div class="row" v-show="$parent.$parent.criteriaShow">

                                <div class="col-sm-2 form-group">
                                    <label class="font_normal_body" title="参数名称:用户类型">客户类型</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="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="f_gasproperties = '{}'"
                                          close-on-select></v-select>
                              </div>
                              <res-select-group
                                :initres="$parent.$parent.initres"
                                :show-component="['company','department','operator']"
                                @re-res="$parent.$parent.getRes"
                                v-ref:sel></res-select-group>
                              <div class="col-sm-2 form-group">
                                <label class="font_normal_body" title="参数名称:气表类型">气表类型</label>
                                <v-select :value.sync="model.f_meter_style"
                                          :options='$parent.$parent.metertypes' placeholder='请选择' v-model="model.f_meter_style"
                                          condition="f_meter_classify = '{}'"
                                          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_meter_brand" multiple
                                          v-model="model.f_meter_brand"
                                          :options='$parent.$parent.meterbrands' placeholder='请选择'
                                          condition="f_meter_brand in {}"
                                          close-on-select></v-select>
                              </div>
                              <div class="col-sm-2 form-group">
                                <label class="font_normal_body">抄&ensp;表&ensp;员</label>
                                <v-select :value.sync="model.f_inputtor"
                                          v-model="model.f_inputtor"
                                          :options='$parent.$parent.inputtores' placeholder='请选择'
                                          multiple = "true"
                                          condition="f_inputtor in {}"
                                          close-on-select></v-select>
                              </div>
                              <div class="col-sm-2 form-group">
                                <label class="font_normal_body">收费类型</label>
                                <v-select v-model="model.f_type1"
                                          multiple
                                          placeholder='请选择'
                                          condition="f_type1 in {}"
                                          :value.sync="model.f_type1"
                                          :options='$parent.$parent.chargetype'
                                          close-on-select clear-button></v-select>
                              </div>
                            </div>
                        </div>
                    </criteria>
                    <data-grid :model="model" partial='list' class="list_area table_sy"  v-ref:grid :classname="$parent.classname">
                        <template partial='head'>
                            <tr>
                                <th><nobr>客户编号</nobr></th>
                                <th><nobr>客户名称</nobr></th>
                                <th><nobr>地址</nobr></th>
                                <th><nobr>客户类型</nobr></th>
                                <th><nobr>用气性质</nobr></th>
                                <th><nobr>气表类型</nobr></th>
                                <th><nobr>收费类型</nobr></th>
                                <th><nobr>操作员</nobr></th>
                                <th><nobr>抄表员</nobr></th>
                                <th><nobr>录入时间</nobr></th>
                                <th><nobr>应收气量</nobr></th>
                                <th><nobr>应收金额</nobr></th>
                                <th><nobr>红冲气量</nobr></th>
                                <th><nobr>红冲金额</nobr></th>
                                <th><nobr>应收气量小计</nobr></th>
                                <th><nobr>应收金额小计</nobr></th>
                                <th><nobr>实收气量</nobr></th>
                                <th><nobr>实收金额</nobr></th>
                                <th><nobr>欠费气量</nobr></th>
                                <th><nobr>欠费金额</nobr></th>
                                <th><nobr>累计欠费气量</nobr></th>
                                <th><nobr>累计欠费金额</nobr></th>
                                <th><nobr>清欠气量</nobr></th>
                                <th><nobr>清欠金额</nobr></th>
                                <th><nobr>实抄气量</nobr></th>
                                <th><nobr>实抄金额</nobr></th>
                            </tr>
                        </template>
                        <template partial='body'>
                          <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_address}}</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_meter_classify}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_type}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_operator}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_inputtor}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_input_date}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_ysgas}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_ysfee}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_hcgas}}</nobr>
                            </td>
                            <td style="text-align: center;">
                              <nobr>{{row.f_hcfee}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_ysgassum}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_ysfeesum}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_ssgas}}</nobr>
                            </td>
                            <td style="text-align: center;">
                                <nobr>{{row.f_ssfee}}</nobr>
                            </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_monthqgas}}</nobr>
                          </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_monthqfee}}</nobr>
                          </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_sumqgas}}</nobr>
                          </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_sumqfee}}</nobr>
                          </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_qqgas}}</nobr>
                          </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_qqfee}}</nobr>
                          </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_scgas}}</nobr>
                          </td>
                          <td style="text-align: center;">
                            <nobr>{{row.f_scfee}}</nobr>
                          </td>
                        </template>
                        <template partial='foot'></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">
                    应收气量合计:&emsp;{{sumsmodel.f_ysgas}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    应收金额合计:&emsp;{{sumsmodel.f_ysfee}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    红冲气量合计:&emsp;{{sumsmodel.f_hcgas}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    红冲金额合计:&emsp;{{sumsmodel.f_hcfee}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    实收气量合计:&emsp;{{sumsmodel.f_ssgas.toFixed(2)}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    实收金额合计:&emsp;{{sumsmodel.f_ssfee}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    欠费气量合计:&emsp;{{sumsmodel.f_monthqgas}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    欠费金额合计:&emsp;{{sumsmodel.f_monthqfee}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    累计欠费气量合计:&emsp;{{sumsmodel.f_sumqgas}}
                  </td>
                  <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    累计欠费金额合计:&emsp;{{sumsmodel.f_sumqfee}}
                  </td>
                <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    清欠气量合计:&emsp;{{sumsmodel.f_qqgas}}
                  </td>
                <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    清欠金额合计:&emsp;{{sumsmodel.f_qqfee}}
                  </td>
                <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    实抄气量合计:&emsp;{{sumsmodel.f_scgas}}
                  </td>
                <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
                    实抄金额合计:&emsp;{{sumsmodel.f_scfee}}
                  </td>
                </tr>
              </table>
            </div>
          <div v-if="show">
            <user-info-detail-manage :f_userinfo_id="rowdata.f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage>
          </div>
        </div>
    </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
    import defaultPrint from './config/DefaultPrint'
    import exportConfig from './config/exportConfig'
    let readySomething = async function(self) {
      self.defaultfield = [...self.defaultfield, ...self.config.defaultPrint]
      self.$MagGetSaleParam.initinputtor();
      console.log('msmms', 'sssssssssssss')
      self.getinputtores();

        self.$refs.paged.$refs.cri.model.startDate = self.$login.toStandardDateString() + ' 00:00:00'
        self.$refs.paged.$refs.cri.model.endDate = self.$login.toStandardDateString() + ' 23:59:59'
        await self.$MagLoadParams.loadParam()
      self.initParams()
      self.smallareas=[{label: '全部',value: ''},...await self.$MagGetSaleParam.getsmallarea(self.$login.f.orgid)]
        self.sumsmodel = self.$refs.paged.$refs.grid.model.sums
    }
    export default {
        title: '应收实收明细',
        name: 'YingShouMingXi',
        data () {
            return {
                model: new PagedList('api/af-revenue/sql/yingShouMingXi', 30, {startDate: 'this.model.startDate', endDate: 'this.model.endDate',id: 'this.model.id'}, {
                  f_ysgas: 0,
                  f_ysfee: 0,
                  f_hcgas: 0,
                  f_hcfee: 0,
                  f_ssgas: 0,
                  f_ssfee: 0,
                  f_monthqgas: 0,
                  f_monthqfee: 0,
                  f_sumqgas: 0,
                  f_sumqfee: 0,
                  f_qqgas: 0,
                  f_qqfee: 0,
                  f_scgas: 0,
                  f_scfee: 0
                }),
                initres: {
                    org:[this.$login.f.orgid],
                    dep:[],
                    user:[],
                },
              other: [],
              footer: [],
              meterbrands: [],
                gasproperties:[],
              inputtores:[{label: '全部',value: ''}],  //抄表员
                show:false,
                rowdata:{},
                criteriaShow: false,
                orgCondtionStr: '',
                modelval: [],
                printshow: false,
                all: false,
                fields: {},
                thead: '',
                tfoot: '',
              config: {
                defaultPrint: ['f_oughtfee', 'avg_oughtamount']
              },
              smallareas:[{label: '全部',value: ''}],  //区域
                //合计数据
                sumsmodel: {},
                defaultfield: [],
                f_filialeid: this.$login.f.f_orgid,
                f_orgid: this.$login.f.orgid,
                f_depid: [],
                f_operatorid: []
            }
        },
        ready () {
            readySomething(this)
        },
        methods: {
          async initParams() {
            // 初始化气表品牌
            let brandArr = []
            await this.$MagGetSaleParam.getGasbrand().forEach((item) => {
              let temp = {}
              temp.label = item.label
              temp.value = item.value.f_meter_brand
              brandArr.push(temp)
            })
            this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
          },
          getotherfooter() {
            // this.$refs.paged.$refs.cri.$refs.exports.otherData=[];
            // this.$refs.paged.$refs.cri.$refs.exports.footerData=[];
            this.other = [];
            this.footer = [];
            // let exportdata = this.getCondition;
            let otherInData = [];
            otherInData.push(`导出时间: ${this.$login.toStandardTimeString()}`);
            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);
            this.other.push(otherInData);
          },
          async getinputtores () {
            // 获取抄表员
            let rs = []
            if (this.$login.f.f_gasman.length > 0) {
              for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
                let temp = {
                  label: this.$login.f.f_gasman[i].name,
                  value: this.$login.f.f_gasman[i].name
                }
                rs.push(temp)
              }
            }
            this.inputtores = [{label: '全部', value: ''}, ...rs]
          },
            userTypeChange () {
                this.gasproperties=[]
                if(this.$refs.paged.$refs.cri.model !==null) {
                    this.$refs.paged.$refs.cri.model.f_gasproperties=''

                    console.log(this.$refs.paged.$refs.cri.model.f_user_type[0])
                    this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
                }
                else{
                    this.gasproperties =[{label: '全部', value: ''}]
                }
            },
            search(){
                this.$refs.paged.$refs.cri.search()
            },
            cancel() {
                this.show = false
            },
            selfSearch(args) {
              args.condition = `${args.condition}`
              args.model.id = this.$login.f.id
              new HttpResetClass().load('POST','rs/logic/ysmxLogic',{
                condition: args.condition,
                condValue: '1=1 '+this.orgCondtionStr,
                startDate: args.model.startDate,
                endDate: args.model.endDate,
                id: args.model.id
              }).then(res =>{
                this.model.search(args.condition, args.model,'1=1 '+this.orgCondtionStr)
                this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
              })
                // args.condition = `${args.condition} `
                // this.model.search(args.condition, args.model,'1=1 '+this.orgCondtionStr)
                // this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
            },
            clear() {
                //清空部门和人员
                this.$refs.paged.$refs.cri.$refs.sel.$children[1].selectres = []
                //部门和人员变为全选
                this.$refs.paged.$refs.cri.$refs.sel.$children[1].$children[0].isSelectAll = false
                this.$refs.paged.$refs.cri.$refs.sel.$children[2].$children[0].isSelectAll = false
                Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
                    this.$refs.paged.$refs.cri.model[key] = []
                })
            },
            show() {
                this.criteriaShow = true
            },
            hidden() {
                this.criteriaShow = !this.criteriaShow
            },
            showmsg(obj){
              this.rowdata=obj
              this.show=true
            },
            getRes(condition,obj) {
              this.orgCondtionStr = condition
              this.orgname = obj.orgnames[0]
              this.depname = obj.depnames[0]
            },
            put() {
                // 对Modelval进行排序
                this.sortModelval()
                this.thead = `<tr><th colspan=${this.modelval.length}>非民用用气查询</th></tr><tr>`
                for (let key of this.modelval) {
                    this.thead += '<th>' + this.fields[key] + '</th>'
                }
                this.thead += '</tr>'
            },
            print() {
                this.$refs.print.PrintAsFile()
                this.printshow = false
            },
            dealmsg(val) {
                this.rowdata=val
                this.show=true
                val.model = this.model.model
                this.$dispatch('deal-msg', val)
            },
            close() {
                this.printshow = false
                this.all = false
            },
            // 对选择的列进行排序
            sortModelval() {
                let sortModel = []
                Object.keys(this.fields).forEach((key) => {
                    if (this.modelval.includes(key)) {
                        sortModel.push(key)
                    }
                })
                this.modelval = sortModel
                console.log('选择的打印的字段', this.modelval)
            }
        },
        computed: {
            getCondition() {
                return {
                  condition: `${this.model.condition}` ,
                  condValue: `${this.model.condValue}`,
                  startDate: this.$refs.paged.$refs.cri.model.startDate,
                  endDate: this.$refs.paged.$refs.cri.model.endDate,
                  id: this.$refs.paged.$refs.cri.model.id
                }
            },
            getfield() {
                return exportConfig.ysConfig
            },
          usertypes() {
              return [{label: ' 全部  ', value: ''}, ...this.$appdata.getParam('用户类型')]
          },
          chargetype() {
              return [{label: ' 全部  ', value: ''}, ...this.$appdata.getParam('收费类型')]
          },
          metertypes() {
            return [{label: ' 全部  ', value: ''}, ...this.$appdata.getParam('气表类型')]
          },
        },
        events: {

        },
        watch: {
            'all'(val) {
                if (val) {
                    this.modelval = this.bodyData
                } else {
                    this.modelval = defaultPrint.config
                    this.put()
                }
            },
            'modelval.length'() {
                this.put()
            },
          sumsmodel: {
            handler: function (val) {
              this.getotherfooter();
            },
            deep: true
          }
        }
    }
</script>
<style>
    .datapanel {
        color: #333;
        background-color: white;
        padding: 10px 20px;
        border-radius:15px;
    }
</style>
