<template>
  <div class="basic-main" style="height: 98%">
    <div class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div
              :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
              class="form-group">
              <label class="font_normal_body">组织机构</label>
              <res-select :initresid='$parent.$parent.curorgid'
                          @res-select="$parent.$parent.getorg"
                          class="select select_list"
                          restype='organization'
                          style="width: 60%">
              </res-select>
            </div>
              <div class="col-sm-2  form-group">
                <label for="f_bank_name"  class="font_normal_body">银行名称:</label>
                <v-select id="f_bank_name"
                          v-model="model.f_bank_name"
                          placeholder='银行名称'
                          condition="(s.f_bank_name= '{}' or s.bankname='{}') "
                          :value.sync="model.f_bank_name"
                          :options='$parent.$parent.bankname'
                          close-on-select ></v-select>
              </div>
              <div class="col-sm-2  form-group">
                <label for="msg"  class="font_normal_body" title="对账信息">对账信息:</label>
                <v-select id="msg"
                          v-model="model.msg"
                          placeholder='对账信息'
                          condition="msg = '{}' "
                          :value.sync="model.msg"
                          :options='$parent.$parent.msg'
                          close-on-select ></v-select>
              </div>
              <div class="col-sm-2  form-group">
                <label for="startDate"  class="font_normal_body">开始日期:</label>
                <datepicker id="startDate" placeholder="开始日期"
                            v-model="model.startDate"  style="width: 55%"
                            :value.sync="model.startDate"
                            condition="(f_trade_date >= '{} 00:00:00' or s.f_operate_date >= '{} 00:00:00')"
                            :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd'"
                            :show-reset-button="reset">
                </datepicker>
              </div>
              <div class="col-sm-2  form-group">
                <label for="endDate"  class="font_normal_body"> 结束日期:</label>
                <datepicker id="endDate" placeholder="结束日期"
                            v-model="model.endDate"  style="width: 55%"
                            :value.sync="model.endDate"
                            condition="(f_trade_date < '{} 23:59:59' or s.f_operate_date < '{} 23:59:59' )"
                            :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd'"
                            :show-reset-button="reset">
                </datepicker>

              </div>
            <div class="form-group button-range" style="float: right">
              <button class="button_search button_spacing width-60" @click="search()" v-el:cx>查询</button>
              <!--                <export-excel :data="{orderitem: 'msg_id,f_delivery_date DESC',condition: condition,startDate: this.model.startDate,endDate: this.model.endDate,bankname: this.model.f_bank_name[0]}"-->
              <!--                              bean="银行对账查询导出" sqlurl="rs/logic/exportfile"></export-excel>-->
              <export-excel :data="$parent.$parent.getCondition"  sql-name="bankPayment"
                            template-name="银行对账查询导出" sqlurl="rs/logic/saleExport"
                            :field="$parent.$parent.getfield" :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.criteriaShow = !$parent.$parent.criteriaShow"></div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.criteriaShow">

            <div class="col-sm-2 form-group">
              <label class="font_normal_body">用户编号:</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code"
                     condition="f_userinfo_code = '{}'" placeholder='用户编号'>
            </div>
            <div class="col-sm-2 form-group">
              <label class="font_normal_body">&emsp;订单号:</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_serial_id"
                     condition="(f_serial_id = '{}' or f_trade_number = '{}')" placeholder='订单号'>
            </div>

          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list'  class="list_area table_sy" 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 style="text-align: center;">{{$index+1}}</td>
          <td>{{row.f_userinfo_code}}</td>
          <th>{{row.f_bank_name?row.f_bank_name:row.bankname}}</th>
          <td>{{row.f_serial_id}}</td>
          <td>{{row.f_trade_number}}</td>
          <td>{{row.f_collection}}</td>
          <td>{{row.f_total_charge}}</td>
          <td>{{row.f_operate_date}}</td>
          <td>{{row.f_trade_date}}</td>
          <td>{{row.f_state}}</td>
          <td>{{row.msg}}</td>
          <td>
            <button type="button" name="button" class="button_search button_spacing width-60" @click="$parent.$parent.$parent.chargecal(row)"
                    v-if="row.msg === '燃气方单方面账单' && row.maxid !== '' && row.maxid!== null">冲正</button>
<!--            <button type="button" name="button" class="button_search button_spacing width-60" @click="$parent.$parent.$parent.charge(row)"-->
<!--                    v-if="row.msg === '银行方单方面账单'&& row.f_userinfo_id !=='' && row.f_userinfo_id !==null" >缴费</button>-->
            <button type="button" name="button" class="button_search button_spacing width-60" @click="$parent.$parent.$parent.charge(row)"
                    v-if="row.msg === '银行方单方面账单'" >缴费</button>
<!--            <span v-if="row.f_type !== 1 && row.msg !== '对账成功' && row.msg !== '燃气方单方面账单'">需人工处理</span>-->
            <span v-if="row.msg === '对账成功'">正常</span>
          </td>
        </template>
        <!--<template partial='foot'>-->
          <!--<td style="text-align: center;">合计</td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;">{{model.sums.f_collection.toFixed(2)}}</td>-->
          <!--<td style="text-align: center;">{{model.sums.f_total_charge.toFixed(2)}}</td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;"></td>-->
          <!--<td style="text-align: center;"></td>-->
        <!--</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;{{model.sums.f_collection.toFixed(2)}}
        </td>
        <td
          style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
          银行金额汇总:&emsp;{{model.sums.f_total_charge.toFixed(2)}}
        </td>
        <td
          style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
          差额汇总:&emsp;{{((model.sums.f_total_charge -0) - (model.sums.f_collection.toFixed(2) -0)).toFixed(2)}}
        </td>
      </tr>
    </table>
    </div>
  </div>
</template>
<script>
  import { PagedList } from 'vue-client'
  import Vue from 'vue'

  export default {
    title: '银行对账',
    data () {
      return {
        resid: [],  // 存放新增的f_files表中id
        criteriaShow:false,
        curorgid: [this.$login.f.orgid],
        model: new PagedList('rs/sql/bankPayment', 20, {bankname: 'this.model.f_bank_name[0]', startDate: 'this.model.startDate', endDate: 'this.model.endDate', orderitem: '"delivery_date DESC "'}, {f_collection: '', f_total_charge: ''}),
        bodydata: ['f_userinfo_code', 'f_bank_name', 'f_serial_id', 'f_trade_number', 'f_collection', 'f_total_charge', 'f_operate_date', 'f_state', 'msg'],
        header: ['用户编号', '银行名称', '燃气方流水号', '银行流水号', '燃气方金额', '银行金额', '燃气方日期', '银行日期', '燃气方记录是否有效', '对账信息']

      }
    },
    props: [],
    ready () {
    },
    methods: {
      search () {
        this.$refs.paged.$refs.cri.search()
      },
      selfSearch (args) {
        if (!this.f_orgid) {
          this.getorg([this.$login.f.orgid])
        }
        console.log('查询。。。', this.f_orgid)
        if (this.f_orgid) {
          args.condition = `${args.condition} and f_orgid  in ${this.f_orgid}`
        }
        this.model.search(args.condition, args.model)
      },
      async chargecal (row) {
        let param = {
          f_sell_id: row.maxid,
          f_cancel_reason: '',
          f_orgid: Vue.$login.f.orgid,
          f_orgname: Vue.$login.f.orgs,
          f_depid: Vue.$login.f.depids,
          f_depname: Vue.$login.f.deps,
          f_zoneid: Vue.$login.f.zoneid,
          f_zones: Vue.$login.f.zones
        }
        await Vue.resetpost('rs/logic/commonCancel', {data: param}, {resolveMsg: '撤销成功', rejectMsg: '撤销失败'})
        this.$refs.paged.$refs.cri.search()
      },
      getorg (val) {
        this.f_orgid = this.$login.convertToIn(val)
        this.f_filialeid = val[0]
      },
      // 微信单方账单，系统可缴费
      async charge (row) {
          row.f_operator=Vue.$login.f.name,
          row.f_operatorid= Vue.$login.f.id,
          row.f_orgid= Vue.$login.f.orgid,
          row.f_orgname= Vue.$login.f.orgs,
          row.f_depid= Vue.$login.f.depids,
          row. f_depname= Vue.$login.f.deps,
          row. f_zoneid= Vue.$login.f.zoneid,
          row. f_zones= Vue.$login.f.zones
            let res = await this.$resetpost('rs/logic/cardOneBank',row,{resolveMsg:'缴费成功',rejectMsg:'缴费失败'})
          let param = []
          for (let row of this.resid) {
            param.push({id: row.id})
          }
          let data = {
            param: param,
            f_blobid: res.data
          }

          await this.$resetpost('rs/logic/updatefiles', data)
          this.$refs.paged.$refs.cri.search()
      }
        // })
    },
    events: {
      // 删除Resid数组元素
      'delResid' (val) {
        this.resid.$remove({id: val, f_biobid: ''})
      // this.resid.splice(this.resid.indexOf({id:val,f_biobid:''}),1);
      },
      // 增加Resid数组元素
      'resid' (val) {
        console.log('-=', val)
        this.resid.push({id: val, f_biobid: ''})
      }
    },
    computed: {
      bankname () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('银行名称')]
      },
      msg () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('对账信息')]
      },
      filiales () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('分公司')]
      },
      getCondition () {
        return {condition: this.$refs.paged.$refs.cri.condition, orderitem: 'delivery_date DESC ' }
      },
      getfield () {
        let data = {}
        this.bodydata.forEach((value, index) => {
          data[this.bodydata[index]] = this.header[index]
        })
        return data
        console.log('field' + data)
      }
    }
  }
</script>
