<template>
  <div id="unit" class="flex-row">
    <div class="basic-main">
      <div class="flex" 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">表&nbsp;钢&nbsp;号&nbsp;</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_meternumber" placeholder='表钢号'
                         condition="s.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_userinfo_code" placeholder='客户编号'
                         condition="s.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="s.f_user_name like '%{}%'" v-next-el='userid' v-el:username>
                </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="rechargeInstruct" template-name='欠费查询'
                                :choose-col="true"></export-excel>
                  <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">客户地址</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_address" placeholder='客户地址'
                         condition="s.f_address like '%{}%'" v-next-el='userid' v-el:username>
                </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="s.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="s.f_gasproperties = '{}'"
                            closfe-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="s.f_meter_brand = '{}'"
                            close-on-select></v-select>
                </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>
            </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>
              </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_meternumber}}</nobr></td>
                <td style="text-align: left;"><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>
                <th style="text-align:center"><nobr>{{row.f_curbalance}}</nobr></th>
                <th style="text-align:center"><nobr>{{row.f_oughtamount}}</nobr></th>
              </tr>
            </template>
            <template partial='foot'></template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

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

  let readySomething = async function (self) {
    await self.$MagLoadParams.loadParam()
    self.initParams()
    // self.sumsmodel = self.$refs.paged.$refs.grid.model.sums;
  }
  export default {
    title: '欠费查询',
    data () {
      return {
        show:false,
        org:[this.$login.f.orgid],
        orgcondition: ' and s.f_orgid = ' + this.$login.f.orgid,
        //f_filialeid: this.$login.f.f_orgid,
        detaillist: [],
        meterbrands: [],
        prices: [],
        gasproperties:[],
        condition:'',
        rowdata:{},
        sumsmodel: {},
        orgid:[this.$login.f.orgid],
        criteriaShow:false,
        orgCondtionStr: '',
        model: new PagedList('api/af-revenue/sql/arrearageQuery', 50,{
          startDate: 'this.model.startDate',
          endDate: 'this.model.endDate'
        })
      }
    },
    ready () {
      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.search()
    },
    methods: {
      initParams() {
        // 初始化气表品牌
        let brandArr = []
        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]
        //初始化气表价格
        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 s.f_orgid  in " + plugins.convertToIn(obj)
        }else{
          this.orgcondition = " and s.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: ''}]
        }
      },
      showdetail(val) {
        console.log('24detail==', val)
        if(val){
          let detail = eval("("+val+")")
          this.detaillist = detail
          this.detail24 = true
        }else{
          console.log('无数据')
        }
      },
      close() {
        this.detail24 = false
      },
      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
        console.log(args.condition+"args.condition")
        this.condition = args.condition
        this.model.search(args.condition, args.model)
        // console.log(this.$refs.paged.$refs.grid.model.sums+"--this.$refs.paged.$refs.grid.model.sums")
        // 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: {
      'orgCondtionStr'(val) {
        let res = val.match(/'(.*?)'/)
        console.log('正则提取:',res && res[1])
        if (res) {
          this.f_filialeid = res[1]
          // this.updateParams()
        }
      }
    },
    computed: {
      getfield () {
        return exportConfig.ArrearageConfig
      },
      usertypes() {
        return [{label: ' 全部 ', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      getCondition () {
        var con = ""
        if (this.orgCondtionStr) {
          con = `${this.$refs.paged.$refs.criteria.condition} and s.f_orgid in  (${this.orgCondtionStr})`
        }
        else {
          con = `${this.$refs.paged.$refs.criteria.condition}and s.f_orgid in ('${this.$login.f.orgid}' )`
        }
        return {
          condition: con
        }
      }
    }
  }
</script>

<style>
  .mystyle{
    margin-left:80px;
  }
  .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>
