<template >
  <div class="flex" style="justify-content: space-between;">
    <div @keyup.enter="search" style="">
      <criteria-paged :model="model" v-ref:paged>
        <criteria @condition-changed='$parent.search' partial='criteria' v-ref:criteria>
          <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
            <div class="row">
              <div class="col-sm-2 form-group">
                <label class="font_normal_body" title="归属日期" >开始时间</label>
                <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_start_date"
                            class="datepicker"
                            condition="f_hand_date >= '{} 00:00:00' "
                            placeholder="起始时间"
                            style="width:60%"
                            v-model="model.f_start_date"
                ></datepicker>
              </div>
              <div class="col-sm-2 form-group" >
                <label class="font_normal_body" title="归属日期">结束时间</label>
                <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_end_date"
                            class="datepicker"
                            condition="f_hand_date <= '{} 23:59:59' "
                            placeholder="结束时间"
                            style="width:60%"
                            v-model="model.f_end_date"
                ></datepicker>
              </div>
              <div class="col-sm-2 form-group" v-if="!row.f_meter_type.includes('物联网表')">
                <label class="font_normal_body">是否缴费</label>
                <v-select :value.sync="model.f_whether_pay" v-model='model.f_whether_pay'
                          style="width:60%"
                          :options='$parent.$parent.whetherpaies' placeholder='是否缴费'
                          close-on-select
                          condition="f_whether_pay = '{}'"></v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body" title="抄表状态">抄表状态</label>
                <v-select :value.sync="model.f_meter_state" v-model='model.f_meter_state'
                          style="width:60%"
                          :options='$parent.$parent.meterstates' placeholder='抄表状态'
                          close-on-select
                          condition="f_meter_state = '{}'"></v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body" title="表单状态">表单状态</label>
                <v-select :value.sync="model.f_hand_state" v-model='model.f_hand_state'
                          style="width:60%"
                          :options='$parent.$parent.handstates' placeholder='表单状态'
                          close-on-select
                          condition="f_hand_state = '{}'"></v-select>
              </div>

              <div style="float: right">
                <button @click="search()"  class="button_search" style="margin-right: 10px" v-el:cba>查询</button>
                <print-data :defaultfield="$parent.$parent.defaultfield" :field="$parent.$parent.fields" :is-selected="true" :model="$parent.$parent.printModel"
                            @print-data="$parent.$parent.print()"
                            :starthead="$parent.$parent.starthead"
                            titletable="预存气费打印明细"
                             ></print-data>
              </div>
            </div>


          </div>

        </criteria>
        <data-grid :model="model" class="list_area table_sy" class="list_area table_sy" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>

              <th v-show="false"><nobr>抄表月份</nobr></th>
              <th v-show="false"><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 v-if="!row.f_meter_type.includes('物联网表')"><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' v-ref:grid>
            <tr>
            <td style="text-align:center" v-show="false">{{row.f_hand_date.substring(0,7)}}</td>
              <th v-show="false"><nobr >{{row.datas}}</nobr></th>
              <td style="text-align:center">{{row.f_input_date}}</td>
              <td style="text-align:center">{{row.f_hand_date}}</td>
              <td style="text-align:center">{{row.f_last_tablebase}}</td>
              <td style="text-align:center">{{row.f_tablebase}}</td>
            <td style="text-align:center">{{row.f_balance}}</td>
              <td style="text-align:center">{{row.f_oughtamount}}</td>
              <td style="text-align:center">{{row.f_oughtfee}}</td>
            <td style="text-align:center">{{row.f_curbalance}}</td>
              <td style="text-align:center" v-if="!row.f_meter_type.includes('物联网表')">{{row.f_whether_pay}}</td>
              <td style="text-align:center">{{row.f_stair1price}}</td>
              <td style="text-align:center">{{row.f_stairamount1}}</td>
              <td style="text-align:center">{{row.f_stair2price}}</td>
              <td style="text-align:center">{{row.f_stair2amount}}</td>
              <td style="text-align:center">{{row.f_stair3price}}</td>
              <td style="text-align:center">{{row.f_stair3amount}}</td>
              <td style="text-align:center">{{row.f_meter_state}}</td>
              <td style="text-align:center">{{row.f_result_state?row.f_result_state:''}}</td>
              <td style="text-align:center">{{row.f_hand_state}}</td>
              <td style="text-align:center">{{row.f_inputtor}}</td>
            <td style="text-align:center">{{row.f_input_person}}</td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>

    </div>
    <table class="table-hover">
      <tr class="table-bordered" style="position: relative">
        <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_oughtamount}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          用气金额合计:&emsp;{{model.sums.f_oughtfee}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          一阶用气量合计:&emsp;{{model.sums.f_stairamount1}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          一阶用气金额合计:&emsp;{{model.sums.f_stair1fee}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          二阶用气量合计:&emsp;{{model.sums.f_stair2amount}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          二阶用气金额合计:&emsp;{{model.sums.f_stair2fee}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          三阶用气量合计:&emsp;{{model.sums.f_stair3amount}}
        </td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">
          三阶用气金额合计:&emsp;{{model.sums.f_stair3fee}}
        </td>
      </tr>
    </table>
  </div>

</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'

  export default {
    title: '抄表',
    data () {
      return {
        condition: '1=1',
        model: new PagedList(`${this.row.f_meter_type === '物联网表'?'rs/sql/sale_WebHandplanQuery':'rs/sql/sale_HandplanQuery'}`, 20, {f_user_id: this.row.f_user_id}, {
          f_oughtfee: 0,
          f_oughtamount: 0,
          f_stairamount1: 0,
          f_stair1fee: 0,
          f_stair2amount: 0,
          f_stair2fee: 0,
          f_stair3amount: 0,
          f_stair3fee: 0
        }),
        show: false,
        lists: [],
        meterstates: this.$appdata.getParam('抄表状态') ? [{
          label: '全部',
          value: ''
        }, ...this.$appdata.getParam('抄表状态')] : [],
        handstates: this.$appdata.getParam('表单状态') ? [{
          label: '全部',
          value: ''
        }, ...this.$appdata.getParam('表单状态')] : [],
        // 控制单选
        radio: [],
        // 选中的页
        all: [],
        // row数据
        rowsdata: [],
        starthead: '',
        fields: {'f_userinfo_code': '用户编号',
          'f_user_name': '姓名',
          'f_last_tablebase': '上期底数',
          'f_tablebase': '本期底数',
          'f_oughtamount': '用气量',
          'f_oughtfee': '用气金额',
          'f_detailprice': '结算明细',
          'datas': '用气周期',
          'money1': '违约金',
          'price1': '单价',
          'f_oughtfee1': '应交金额',
          'f_inputtor': '抄表员',
          'f_input_date': '抄表日期',
          'f_whether_pay': '是否缴费',
          'f_hand_date': '录入时间'},
        defaultfield: [
          'datas', 'f_last_tablebase', 'f_last_tablebase', 'f_oughtamount', 'f_oughtfee', 'f_oughtfee1', 'money1', 'price1'
        ],
        fooinfo: [
          '单位',
          '收款人'
        ],
        printModel: {
          rows: []
        }
      }
    },
    props: ['row'],
    ready () {
      this.$refs.paged.$refs.criteria.model.f_hand_state = ['有效']
      this.$refs.paged.$refs.criteria.search()
      // this.sumgasandmoney= this.$refs.paged.$refs.grid.model.sums
      for (let i in this.all) {
        this.money += i.f_oughtamount
        this.gas += i.f_oughtfee
      }
    },
    methods: {
      // search() {
      //   this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_user_id = '${this.row.f_user_id}'`
      //   this.model.search(this.condition, this.model)
      // },
      async search () {
        this.condition = `${this.$refs.paged.$refs.criteria.condition} and f_user_id = '${this.row.f_user_id}' and f_orgid = '${this.$login.f.orgid}'`
        this.model.search(this.condition, this.model)
        let http = new HttpResetClass()
        let res = await http.load('POST', `${this.row.f_meter_type === '物联网表'?'rs/sql/sale_WebHandplanQuery':'rs/sql/sale_HandplanQuery'}`, {
          data: {
            condition: this.condition,
            f_user_id: this.row.f_user_id
          }
        }, {resolveMsg: null, rejectMsg: null})
        this.printModel.rows = res.data

        this.starthead = '用户编号:' + this.row.f_userinfo_code + '&emsp;&emsp;用户姓名:' + this.row.f_user_name + '&emsp;&emsp;用户地址:' + this.row.f_address
      },
      // 多选框初始化
      selectInit () {
        this.rowsdata = []
        this.all = []
        this.radio = []
      },
      print () {
        console.log('====================================')
        console.log('print')
        console.log(this.printModel)
        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_user_id) {
              this.printModel.rows[z++] = this.rowsdata[i][j]
            }
          }
        }
      }
    },
    computed: {
      whetherpaies () {
        return [
          {label: '全部', value: ''},
          {label: '已缴费', value: '是'},
          {label: '未缴费', value: '否'}
        ]
      },
      ischecked () {
        return function (index, i) {
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      }
    }
  }
</script>

