<template>
  <div id="unit" class="flex-row">
    <div class="basic-main">
      <div class="flex" :class="{showbottom:showbottomsum}" v-if="!show">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria  @condition-changed='$parent.search'>
            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
              <div class="row" >
                <div class="col-sm-2">
                  <label class="font_normal_body">组织机构</label>
                  <res-select :initresid="$parent.$parent.org"
                              style="width:60%"
                              @res-select="$parent.$parent.getorg"
                              :is-mul=false
                              restype='organization'>
                  </res-select>
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">客户编号</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_userinfo_code" placeholder='客户编号'
                         condition="ss.f_userinfo_code like '%{}%'" v-next-el='f_userinfo_code' v-el:meternumber
                  >
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">客户名称</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_username" placeholder='客户名称'
                         condition="ss.f_user_name = '{}'" v-next-el='userid' v-el:username>
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">客户地址</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_address" placeholder='客户地址'
                         condition="ss.f_address like '%{}%'" v-next-el='f_address' v-el:f_address>
                </div>
                <div class="span" style="float:right;margin-top:10px">
                  <button class="button_search button_spacing" @click="search()">查询</button>
                  <button class="button_clear button_spacing" @click="$parent.$parent.clearmsg">清空</button>
                  <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                                :field="$parent.$parent.getfield"
                                sqlurl="api/af-revenue/logic/openapi/exportfile" sql-name="newGasStatisticsQuery" 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="缴费记录报表" :starthead="$parent.$parent.getstart"
                              :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">
                  <label class="font_normal_body">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_user_phone" placeholder='电话'
                         condition="ss.f_user_phone like '%{}%'" v-next-el='f_user_phone' v-el:f_user_phone
                  >
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_residential_area" placeholder='小区'
                         condition="ss.f_residential_area like '%{}%'" v-next-el='f_residential_area' v-el:f_residential_area>
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_meternumber" placeholder='表号'
                         condition="ss.f_meternumber like '%{}%'" v-next-el='meternumber' v-el:meternumber
                  >
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">燃气证号</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_gascode" placeholder='燃气证号'
                         condition="ss.f_gascode like '%{}%'" v-next-el='f_gascode' v-el:f_gascode
                  >
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气价类型</label>
                  <v-select :value.sync="model.pricetype" v-model="model.pricetype"
                            placeholder='气价类型' :options="$parent.$parent.pricetypes"
                            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_price_name"
                            v-model="model.f_price_name"
                            :options="$parent.$parent.getPricenames"
                            condition="ss.f_price_name = '{}'"
                            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"
                            v-model="model.f_meter_brand"
                            :options="$parent.$parent.meterbrands"
                            condition="ss.f_meter_brand = '{}'"
                            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_changetable_state"
                            v-model="model.f_changetable_state"
                            :options="$parent.$parent.isChange"
                            condition="ss.f_changetable_state = '{}'"
                            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_gas_state"
                            v-model="model.f_gas_state"
                            :options="$parent.$parent.gasState"
                            condition="ss.f_gas_state = '{}'"
                            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_table_state"
                            v-model="model.f_table_state"
                            :options="$parent.$parent.tableState"
                            condition="f_table_state = '{}'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group  flex-row" style="white-space: nowrap">
                  <label class="font_normal_body">用气量区间</label>
                  <div class="row">
                    <input type="text" style="width:27%" class="input_search" v-model="model.f_oughtamount1"
                           condition="ss.f_oughtamount >= {} " placeholder="">
                    <label class="font_normal_body"> ≤ x ≤ </label>
                    <input type="text" style="width:27%" class="input_search" v-model="model.f_oughtamount2"
                           condition="ss.f_oughtamount <= {} " placeholder="">
                  </div>
                </div>
                <div class="col-sm-2 form-group  flex-row" style="white-space: nowrap">
                  <label class="font_normal_body">&nbsp;充值区间&nbsp;&nbsp;</label>
                  <div class="row">
                    <input type="text" style="width:27%" class="input_search" v-model="model.f_collection1"
                           condition="ss.f_collection >= {} " placeholder="">
                    <label class="font_normal_body"> ≤ x ≤ </label>
                    <input type="text" style="width:27%" class="input_search" v-model="model.f_collection2"
                           condition="ss.f_collection <= {} " placeholder="">
                  </div>
                </div>
                <div class="col-sm-2 form-group" >
                  <label class="font_normal_body" for="startDate">开始时间</label>
                  <datepicker id="startDate" placeholder="开始日期" style="width: 60%"
                              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 form-group" >
                  <label  class="font_normal_body" for="endDate">结束时间</label>
                  <datepicker id="endDate" placeholder="结束日期" style="width: 60%"
                              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 form-group  flex-row" style="white-space: nowrap">
                  <label class="font_normal_body">余额区间</label>
                  <div class="row">
                    <input type="text" style="width:27%" class="input_search" v-model="model.f_balance_amount_sta"
                           condition="ss.f_balance_amount >= {} " placeholder="">
                    <label class="font_normal_body"> ≤ x ≤ </label>
                    <input type="text" style="width:27%" class="input_search" v-model="model.f_balance_amount_end"
                           condition="ss.f_balance_amount <= {} " placeholder="">
                  </div>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户类型</label>
                  <v-select :value.sync="model.f_user_type"
                            v-model="model.f_user_type" condition="f_user_type = '{}'"
                            :options='$parent.$parent.userTypes' placeholder='请选择'
                            close-on-select></v-select>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy">
            <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>
              </tr>
            </template>
            <template partial='body' partial='list'>
              <tr >
                <td style="text-align: left;"><nobr> <span @click="$parent.$parent.$parent.showmsg(row)"><a>{{row.f_userinfo_code}}</a></span></nobr></td>
                <td style="text-align: left;"><nobr>{{row.f_user_name}}</nobr></td>
                <td style="text-align: left;"><nobr>{{row.f_residential_area}}</nobr></td>
                <td style="text-align: left;"><nobr>{{row.f_address}}</nobr></td>
                <td style="text-align: center;"><nobr>{{row.f_user_phone}}</nobr></td>
                <td style="text-align:center"><nobr>{{row.f_table_state}}</nobr></td>
                <td style="text-align:center"><nobr>{{row.f_gascode}}</nobr></td>
                <th style="text-align:center"><nobr>{{row.f_meternumber}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_meter_classify}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_meter_title}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_price_name}}</nobr></th>

<!--                <th style="text-align:center"><nobr>{{row.f_stair1price}}</nobr></th>-->
<!--                <th style="text-align:center"><nobr>{{row.f_stair2price}}</nobr></th>-->
<!--                <th style="text-align:center"><nobr>{{row.f_stair3price}}</nobr></th>-->

                <th style="text-align:center"><nobr>{{row.f_gasproperties}}</nobr></th>


                <th style="text-align:center"><nobr>{{row.f_balance}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_last_tablebase}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_tablebase}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_oughtamount}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_oughtfee}}</nobr></th>

                <th style="text-align:center"><nobr>{{row.f_collection}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_curbalance}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_gas_state}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_changetable_state}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_input_date}}</nobr></th>
              </tr>
            </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_oughtamount}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              期间用气金额:&emsp;{{sumsmodel.f_oughtfee}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              期间充值金额:&emsp;{{sumsmodel.f_collection}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              一阶气量合计:&emsp;{{sumsmodel.f_stairamount1}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              一阶气费合计:&emsp;{{sumsmodel.f_stair1fee}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              二阶气量合计:&emsp;{{sumsmodel.f_stairamount2}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              二阶气费合计:&emsp;{{sumsmodel.f_stair2fee}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              三阶气量合计:&emsp;{{sumsmodel.f_stairamount3}}
            </td>
            <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
              三阶气费合计:&emsp;{{sumsmodel.f_stair3fee}}
            </td>
          </tr>
        </table>
      </div>
      <div  class="flex" style="width:99%;height:98%;margin-bottom:0px" v-if="show">
        <user-info-detail-manage-new :f_userinfo_id="rowdata.f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage-new>
      </div>
    </div>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'
  import exportConfig from './config/exportConfig'
  import * as Util from './../../Util'
  import plugins from '../../plugins/GetLoginInfoService'

  let readySomething = async function (self) {
    await self.$MagLoadParams.loadParam()
    self.initParams()
    self.defaultfield = [...self.defaultfield, ...self.config.defaultPrint]
    self.sumsmodel = self.$refs.paged.$refs.grid.model.sums;
  }
  export default {
    title: '用气量统计表',
    data () {
      return {
        show:false,
        org:[this.$login.f.orgid],
        orgcondition: ' and ss.f_orgid = ' + this.$login.f.orgid,
        //f_filialeid: this.$login.f.f_orgid,
        detaillist: [],
        meterbrands: [],
        prices: [],
        gasproperties:[],
        condition:'',
        rowdata:{},
        getstart:'',
        config: {
          defaultPrint: ['f_userinfo_code', 'f_user_name', 'f_meternumber', 'f_gasproperties', 'f_balance', 'f_last_tablebase','f_tablebase',
            'f_oughtamount', 'f_oughtfee', 'f_collection', 'f_curbalance', 'f_gas_state', 'f_changetable_state', 'f_input_date']
        },
        sumsmodel: {},
        orgid:[this.$login.f.orgid],
        criteriaShow:false,
        //默认打印列
        defaultfield: [],
        orgCondtionStr: '',
        model: new PagedList('api/af-revenue/sql/newGasStatisticsQuery', 50,{
          startDate: 'this.model.startDate',
          endDate: 'this.model.endDate'
        },{
          f_oughtamount: 0,
          f_oughtfee: 0,
          f_collection:0,
          f_stairamount1:0,
          f_stair1fee:0,
          f_stairamount2:0,
          f_stair2fee:0,
          f_stairamount3:0,
          f_stair3fee:0
        }),
        showbottomsum:false  //页面下方是否有合计: 默认为false, 在watch修改
      }
    },
    ready () {
      // this.$refs.paged.$refs.criteria.search()
      readySomething(this).then(() => {
        this.$emit('ready')
      }).catch((error) => {
        this.$emit('error', error)
      })
      this.$refs.paged.$refs.criteria.model.startDate = Util.addDate(new Date(),-1).substring(0,10) + ' 00:00:00'
      this.$refs.paged.$refs.criteria.model.endDate = Util.addDate(new Date(),-1).substring(0,10) + ' 23:59:59'
      this.$refs.paged.$refs.criteria.model.inputStartDate = Util.addDate(new Date(),-1).substring(0,10) + ' 00:00:00'
      this.$refs.paged.$refs.criteria.model.inputEndDate = Util.addDate(new Date(),-1).substring(0,10) + ' 23:59:59'
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      initParams() {
        // 初始化气表品牌
        let brandArr = []
        this.$MagGetSaleParam.getGasbrand().forEach((item) => {
          if (item.value.f_meter_type==='物联网表'){
            let temp = {}
            temp.label = item.label
            temp.value = item.value.f_meter_brand
            brandArr.push(temp)
          }
        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
        //初始化气表价格
        this.prices = this.$MagGetSaleParam.getPrices();
      },
      async updateParams() {
        await this.$MagLoadParams.loadParam(this.f_filialeid)
        this.initParams()
      },
      getorg(obj) {
        if(plugins.convertToIn(obj)!==null&&plugins.convertToIn(obj)!==''){
          this.orgcondition = " and ss.f_orgid  in " + plugins.convertToIn(obj)
        }else{
          this.orgcondition = " and ss.f_orgid  = " + this.$login.f.orgid
        }
      },
      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
      },
      cancel() {
        this.show = false
      },
      clearmsg () {
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = []
        })
      },
      getRes (obj) {
        this.orgCondtionStr = condition
        this.orgname = obj.orgnames[0]
        this.depname = obj.depnames[0]
      },
      showmsg(obj){
        this.rowdata=obj
        this.show=true
      },
      search (args) {
        args.condition =  `${args.condition}`+this.orgcondition
        this.condition = args.condition
        this.model.search(args.condition, args.model)
        this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
        // args.condition = `${args.condition}`
        // if (this.orgcondition)
        //   args.condition = `${args.condition}` +  this.orgcondition
        // else
        //   args.condition = `${args.condition}` + 'and m.f_orgid in ' + '(' + this.$login.f.orgid + ')'
        // this.model.search(args.condition, args.model)
      }
    },
    watch: {
      'model.rows'(val) {
        //如果有合计 这里为true, 其他为false ,反正相反
        this.showbottomsum=true;
        if(val.length === 0){
          this.sumsmodel = {}
          this.showbottomsum=false;
        }
      },
      'orgCondtionStr'(val) {
        let res = val.match(/'(.*?)'/)
        console.log('正则提取:',res && res[1])
        if (res) {
          this.f_filialeid = res[1]
          // this.updateParams()
        }
      }
    },
    computed: {
      userTypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      getstart(){
        return `开始时间：${this.$refs.paged.$refs.criteria.model.startDate} 结束时间：${this.$refs.paged.$refs.criteria.model.endDate}`
      },
      getPricenames() {
        let f_user_type = this.$refs.paged.$refs.criteria.model.f_user_type;
        let f_gasproperties = this.$refs.paged.$refs.criteria.model.f_gasproperties;
        let pricetype = this.$refs.paged.$refs.criteria.model.pricetype;
        console.log("打印一下:",f_user_type,f_gasproperties,pricetype,this.f_filialeid,this.prices)
        console.log("查看f_orgid:",this.$login.f.f_orgid)
        if(this.$refs.paged.$refs.criteria.model !==null) {
          let rs = []
          let priceArr = []
          if ( pricetype.length >0) {
            let params = {
              f_price_type: pricetype[0],
              filter: this.org[0],
              prices: this.prices
            }
            console.log("打印一下params:",params)
            this.$MagGetSaleParam.getPrice(params).forEach((item) => {
              console.log("====================================》")
              let temp = {}
              temp.label = item.label
              temp.value = item.value.f_price_name
              priceArr.push(temp)
              console.log("打印一下temp:",temp)
            })

            rs = [{label: '全部', value: ''}, ...priceArr]
          }
          if (rs.length === 0) {
            console.log('rs读出来是空')
            this.$refs.paged.$refs.criteria.model.f_price_name = ''
          }
          return rs
        }
      },
      getfield () {
        return exportConfig.GasStatistics
      },
      usertypes() {
        return [{label: ' 全部 ', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      tableState() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
      },
      pricetypes() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气价类型')]
      },
      gasState() {
        return [{label:'正常', value:'正常'},
          {label:'异常', value:'异常'},
        ]
      },
      isChange() {
        return [{label:'是', value:'是'},
          {label:'否', value:'否'},
        ]
      },
      getCondition () {
        // var con = ""
        // if (this.orgCondtionStr) {
        //   con = `${this.$refs.paged.$refs.criteria.condition} and m.f_orgid in  (${this.orgCondtionStr})`
        // }
        // else {
        //   con = `${this.$refs.paged.$refs.criteria.condition}and m.f_orgid in ('${this.$login.f.orgid}' )`
        // }
        return {
          startDate: this.$refs.paged.$refs.criteria.model.startDate,
          endDate: this.$refs.paged.$refs.criteria.model.endDate,
          condition: this.condition
        }
      }
    }
  }
</script>

<style>
  .showbottom{
    height:95%
  }
</style>

