<template >
  <div class="flex">
    <div class="height:auto">
      <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" width="100%">
              <div class="col-sm-4" >
                <label class="font_normal_body" >&nbsp;开始时间</label>
                <datepicker placeholder="起始时间" style="width:60%"
                            :value.sync="model.f_start_date"
                            v-model="model.f_start_date"
                            :format="'yyyy-MM-dd'"
                            condition="f_operate_date >= '{} 00:00:00' "
                ></datepicker>
              </div>
              <div class="col-sm-4" >
                <label class="font_normal_body" >结束时间</label>
                <datepicker placeholder="结束时间" style="width:60%"
                            :value.sync="model.f_end_date"
                            v-model="model.f_end_date"
                            :format="'yyyy-MM-dd'"
                            condition="f_operate_date <= '{} 23:59:59' "
                ></datepicker>
              </div>
              <div class="span" style="float:right;">
                <button class="button_search"  @click="search()" v-el:cba>查询</button>
                <print-data :model="$parent.$parent.printModel" :field="$parent.$parent.fields" :defaultfield="$parent.$parent.defaultfield" print-name="购气流水"
                            :is-selected="true" @print-data="$parent.$parent.print()"></print-data>
              </div>
            </div>
            </div>


        </criteria>
        <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <th style="padding: 0;border: 0">
                <input type="checkbox" id="f_operator" v-model="$parent.$parent.$parent.all[$parent.model.pageIndex-1]"
                       @change="$parent.$parent.$parent.select()" style="width: 22px;height: 22px"/>
              </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' v-ref:grid>
            <tr >
              <td style="text-align: center;padding: 0;border: 0">
                <input type='checkbox' @change="$parent.$parent.$parent.selectOne($event,row,$index)"
                       :checked="$parent.$parent.$parent.ischecked($parent.model.pageIndex-1,$index)" style="width: 22px;height: 22px;"/>
              </td>
              <td style="text-align:center">{{row.f_preamount}}</td>
              <td style="text-align:center">{{row.f_pregas}}</td>
              <td style="text-align:center">{{row.f_collection}}</td>
              <td style="text-align:center">{{row.f_operator}}</td>
              <td style="text-align:center">{{row.f_operate_date}}</td>
              <td style="text-align:center">{{row.f_comments}}</td>
              <td style="text-align:center">
                <button v-if="row.f_state==='有效'" type="button" name="button" class="btn btn-link"
                        @click.stop="$parent.$parent.$parent.report(row)">票据补打</button>
              </td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
    <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">
          气量合计:&emsp;{{model.sums.f_pregas}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          金额合计:&emsp;{{model.sums.f_preamount}}
        </td>
      </tr>
    </table>
    <reissue-bill v-if="reissue_show" :show.sync="reissue_show" :data="reissue_data" @reissue-success="reissueSucc()" @cancel="reissueOper()"></reissue-bill>

  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import co from "co";
  let reprintGen = function *(self, row) {

    try {
      row.f_bill_type = row.type
      row.f_bill_style = '普通收据'
      row.f_operator= self.$login.f.name
      row.f_operatorid= self.$login.f.id
      row.f_orgid= self.$login.f.orgid
      row.f_orgname= self.$login.f.orgs
      row.f_depid= self.$login.f.depids
      row.f_depname= self.$login.f.deps
      row.billUrl = self.getBillUrl(row.type)
      self.reissue_data = row
      self.reissue_show = true
    } catch (error) {
      if (error.status) {
        self.$warn(`加载数据出错, ${JSON.stringify(error)}`, 'CardList')
      }
      throw error
    }
  }
  export default {
    title: '收费',
    data () {
      return {
        reissue_show: false,
        reissue_data: null,
        condition: '1=1',
        model: new PagedList('rs/sql/sale_ChargeQuery', 20,{}, {
          f_preamount: 0,
          f_pregas: 0,
        }),

        //控制单选
        radio: [],
        //选中的页
        all: [],
        //row数据
        rowsdata: [],
        fields:{'f_preamount': '购气金额','f_pregas':'购气量','f_operate_date': '缴费时间','f_operator': '操作员','f_comments':'备注'},
        defaultfield: [
          "f_preamount","f_pregas","f_operate_date","f_operator","f_comments"
        ],
        printModel: {
          rows: []
        },
      }
    },
    props:['row'],
    ready () {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      search() {
        this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_userid = '${this.row.f_userid}'`
        this.model.search(this.condition,this.model)
      },
      //多选框初始化
      selectInit(){
        this.rowsdata = []
        this.all = []
        this.radio = []

      },
      reissueSucc () {
        this.reissue_show = false
        this.$dispatch('refresh')
      },
      reissueOper () {
        this.reissue_data = null
        this.reissue_show = false
      },
      getBillUrl (type) {
        let name = ''
        // 根据type数据 选择调用的Logic
        if (type === '机表收费') {
          name = 'rs/report/machine_bill'
        } else if (type === '物联网收费') {
          name = 'rs/report/pre_sell'
        } else if (type === '超用收费') {
          name = 'rs/report/overuse_bill'
        } else if (type === '其他收费') {
          name = 'rs/report/otherCharge_bill'
        }  else if (type === '发卡售气') {
          name = 'rs/report/sendCard_bill'
        } else if (type === '卡表收费') {
          name = 'rs/report/card_bill'
        }
        return name
      },
      report(row){
        let reprint = reprintGen(this, row)
        return co(reprint)
      },
      print(){
        this.selectInit()
      },
      select(){
        let index = this.model.pageIndex-1
        if(!this.radio[index]){
          this.radio.$set(index,[])
        }
        if(this.all[index]){
          //数据
          this.rowsdata[index] = Object.assign([],this.model.rows)
          //勾选
          for(var i=0;i<this.model.rows.length;i++){
            this.radio[index].$set(i,true)
          }
        }else{
          //数据
          this.rowsdata[index] = []
          //不勾选
          for(var i=0;i<this.model.rows.length;i++){
            this.radio[index].$set(i,false)
          }
        }
        let z = 0;
        for(let i = 0; i< this.all.length;i++){
          for(let j= 0; this.rowsdata[i] && j < this.rowsdata[i].length; j++){
            this.printModel.rows[z++] = this.rowsdata[i][j]
          }
        }

      },
      selectOne(event,row,i){
        let index = this.model.pageIndex-1
        if(!this.rowsdata[index]){
          this.rowsdata[index] = []
        }
        if(!this.radio[index]){
          this.radio.$set(index,[])
        }
        if(event.target.checked){
          //数据
          this.rowsdata[index][i] = row
          //勾选
          this.radio[index].$set(i,true)
          //判断是否全部选中
          var allState = true
          if (this.model.rows.length != this.radio[index].length){
            allState = false
          }
          for(var state of this.radio[index]){
            if(!state){
              allState = false
            }
          }
          if(allState){
            this.all.$set(index,true)
          }else{
            this.all.$set(index,false)
          }
        }else{
          //数据
          this.rowsdata[index][i] = []
          //不勾选
          this.radio[index].$set(i,false)
          //任意取消一个则全选状态设为false
          this.all.$set(index,false)
        }
        let z = 0;
        this.printModel.rows = []
        for(let i = 0; i< this.all.length;i++){
          for(let j= 0;this.rowsdata[i] && j < this.rowsdata[i].length; j++){
            if(this.rowsdata[i][j] && this.rowsdata[i][j].f_userid){
              this.printModel.rows[z++] = this.rowsdata[i][j]
            }
          }
        }
      }
    },
    computed: {
      ischecked() {
        return function (index, i) {
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      }
    }
  }
</script>

