<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
          <div  partial novalidate class="form-inline auto">
            <print-table v-show=false :model='$parent.model'  v-ref:print
            top='1cm' left='0cm' width='100%' height='90%' id="handplanprint"
            :thead='"<th>序号</th><th>缴费号</th><th>客户名称</th><th>客户地址</th><th>客户电话</th><th>表号</th><th>余额</th><th>上次抄表底数</th><th>本次抄底数</th><th>用气量</th>"
            + "<th>单价</th><th>金额</th>"'
            :style='"table{font-size:15px;border-width: 2px;border-collapse: collapse;border:solid 2px ; border-color:black;width:100%;}" +
                "table th {border-width: 1px;padding: 2px;border-style: solid;}table td {border-width: 1px;padding: 2px;border-style: solid;}" +
                "textarea {border: none;display: none;} .div-input{text-align: left; padding: 8px;}"'
            :fields='["f_userinfoid","f_username","f_address", "f_phone", "f_userid","fee","lastinputgasnum","lastrecord","f_oughtamount","f_stair1price","f_oughtfee"]'
            @print="$parent.$parent.print()"
            >
            </print-table>
            <button class="btn btn-default" @click="$parent.$parent.print()">批量打印</button>
            <div class="flex" id="handplanprint">
              <div style="text-align: center;">
                <h1>常德中石油昆仑燃气有限公司</h1>
              </div>
              <div  style="text-align: center;">
                <h2>========================</h2>
              </div>
              <div style="text-align: center;" class="form-inline auto">
                <div class="form-group">
                  区域: {{$parent.$parent.f_area}}
                  抄表员: {{$parent.$parent.inputtor}}({{$parent.$parent.nowdate}})
                 抄表日期: __________________（户内）
                </div>
              </div>
            </div>
        </div>
          </criteria>
            <data-grid :model="model" partial='list' v-ref:grid>
              <template partial='head'>
                <tr>
                  <th>序号</th>
                  <th>缴费号</th>
                  <th>客户名称</th>
                  <th>客户地址</th>
                  <th>客户电话</th>
                  <th>表号</th>
                  <th>余额</th>
                  <th>上次抄表底数</th>
                  <th>本次抄表底数</th>
                  <th>用气量</th>
                  <th>单价</th>
                  <th>金额</th>
                </tr>
              </template>
              <template partial='body'>
                <td>{{$index+1}}</td>
                <td >{{row.f_userinfoid}}</td>
                <td>{{row.f_username}}</td>
                <td>{{row.f_address}}</td>
                <td>{{row.f_phone}}</td>
                <td>{{row.f_userid}}</td>
                <td>{{row.fee.toFixed(2)}}</td>
                <td>{{row.lastinputgasnum}}</td>
                <td>{{row.lastrecord}}</td>
                <td>{{row.f_oughtamount}}</td>
                <td>{{row.f_stair1price}}</td>
                <td>{{row.f_oughtfee}}</td>
              </template>
            </data-grid>
        </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import * as GetParames from '../../stores/GetParames.js'
import * as util from '../../stores/Util.js'
export default {
  title: '抄表欠费打印',
  data() {
    return {
      model: new PagedList('rs/sql/handplayfee', 300),
      obj: {},
      nowdate: '',
      f_area: '',
      id: '',
      inputtor: '',
      index: 0,
      area: [],
      condition : '1=1'
    }
  },
  methods: {
    getparam () {
      // let id = `{"b.f_districtname":"常德市广播电视台","b.f_gasmeterstyle":"机表","b.f_filiale":"常德中石油昆仑燃气"}`
      this.id = GetParames.getParames('id')
	    console.log('银光拿到的json' + this.id)
	    this.obj = JSON.parse(this.id)
    },
    print() {
      if (this.obj['b.f_districtname']) {
          this.index = this.index + 1
          if (this.index <= this.area.length) {
            this.$refs.paged.$refs.cri.$refs.print.PrintAsFile()
          }else {
            this.index = 0
          }
      } else {
        this.index = this.index + 1
        console.log('88888888888888', this.obj)
        this.f_area =  `${this.area[this.index-1].f_districtname}`
        let con= this.condition + `and b.f_districtname = '${this.area[this.index-1].f_districtname}'`
        if (this.index <= this.area.length) {
          this.$refs.paged.model.params.condition = con
          this.model.search(con).then((res)=>{
            if (this.$refs.paged.$refs.cri.$refs.print.model.rows.length > 0) {
              this.$nextTick(() => {
                this.$refs.paged.$refs.cri.$refs.print.PrintAsFile()
              })
            } else {
              this.print()
            }

          })
        }
        else {
          this.index = 0
        }
      }

    }
  },
  watch: {
  'obj': {
    deep: true,
    handler(val) {
      this.model.obj = val
    }
  }
},
  ready () {
    this.getparam()
    console.log('0000000000000', this.obj)
    this.nowdate = util.getStandardDatetime().substring(0,7)
    this.f_area =  `${this.obj['b.f_districtname']}`
    this.inputtor = `${this.obj['b.f_inputtor']}`
    for (var key in this.obj) {
      if (key === 'b.f_usertype' || key === 'b.f_districtname') {
        this.condition  += ` and ${key} = '${this.obj[key]}'`
      } else {
        this.condition  += ` and ${key} like '%${this.obj[key]}%'`
      }
    }
    if (this.obj['b.f_districtname']) {
        let data = {f_districtname:this.obj['b.f_districtname']}
        this.area.push(data)
        this.model.search(this.condition)
    } else {
      this.$post('rs/sql/district',{data: {condition:this.condition}},{resolveMsg: null, rejectMsg: null})
      .then((res)=>{
        this.area = res.data
        this.model.search(this.condition)
      })
    }
  }
}
</script>

<style lang="css">
</style>
