<template>
  <div>
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
            <div novalidate class="form-inline auto" partial>
              <div class="row">
                <div class="col-sm-4 form-group" >
                  <label for="f_operate_date" class="font_normal_body">开始日期</label>
                  <datepicker  placeholder="开始日期" style="width:60%"
                               v-model="model.f_startDate"
                               :value.sync="model.f_startDate"
                               :format="'yyyy-MM-dd HH:mm:ss'"
                               class="datepicker"
                               condition="f_operate_date >= '{}'"
                               :show-reset-button="true"
                               class="select"
                  >
                  </datepicker>
                </div>
                <div class="col-sm-4 form-group" >
                  <label for="f_operate_date" class="font_normal_body">结束日期</label>
                  <datepicker  placeholder="结束日期" style="width:60%"
                               v-model="model.f_endDate"
                               :value.sync="model.f_endDate"
                               :format="'yyyy-MM-dd HH:mm:ss'"
                               class="datepicker"
                               condition="f_operate_date <= '{}'"
                               :show-reset-button="true"
                  >
                  </datepicker>
                </div>
                <div class="span" style="float:right;">
                  <button class="button_search" @click="search()">查 询</button>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()" class="button_spacing" style="float: right"></div>
                </div>

              </div>
              <div class="row" v-show="$parent.$parent.criteriaShow">
                <res-select-group  :show-component="['company']" style="col-sm-4 form-group" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>

                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">缴&nbsp;费&nbsp;人&nbsp;</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_charge_person"
                         condition="f_charge_person like '%{}%'" placeholder='缴费人姓名'>
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">联系电话</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_charge_phone"
                         condition="f_charge_phone like '%{}%'" placeholder='缴费人电话'>
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">地&emsp;&emsp;址</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_charge_address"
                         condition="f_charge_address like '%{}%'" placeholder='缴费人地址'>
                </div>
<!--                <div class="col-sm-4 form-group">-->
<!--                  <label class="font_normal_body">状&emsp;&emsp;态</label>-->
<!--                  <v-select :value.sync="model.f_state"-->
<!--                            :options='$parent.$parent.states'-->
<!--                            placeholder='状态' close-on-select-->
<!--                            condition="f_state = '{}'"-->
<!--                            search v-model='model.f_state'></v-select>-->
<!--                </div>-->
              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <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>
                <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'>
              <td style="text-align: center;"><nobr>{{$index + 1}}</nobr></td>
              <td style="text-align: center;"><nobr>
                <button type="button" name="button" class="button_search-2 button_spacing width-60"
                        @click.stop="$parent.$parent.$parent.modifyRecord(row)">查看
                </button>
                <button type="button" name="button" class="button_search-2 button_spacing width-60"
                        v-if="row.f_state === '有效'&&this.$login.r.includes('气损收费撤销')"
                        @click.stop="$parent.$parent.$parent.gaslossCancel(row)">撤销
                </button></nobr>
              </td>
              <td style="text-align: center;"><nobr>{{row.f_collection}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_payment}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_bill_style}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_serial_id}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_pay_id}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_charge_person}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_charge_phone}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_charge_address}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_orgname}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_depname}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_operator}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_comments}}</nobr></td>
<!--              <td style="text-align: center;"><nobr>-->
<!--                <button v-if="row.is_has_file=='是'" class="btn btn-link" @click.stop="$parent.$parent.$parent.view(row)">查看</button>-->
<!--              </nobr></td>-->
            </template>
          </data-grid>
        </criteria-paged>
        <modal v-if="edit" :show.sync="edit" styles="border-radius: 25px;">
          <header slot="modal-header" class="modal-header">
            <h4 class="modal-title">查看气损收费</h4>
          </header>
          <article slot="modal-body" class="modal-body">
                <gas-loss-form :selectrow.sync="selectrow"></gas-loss-form>
          </article>
          <footer slot="modal-footer" class="modal-footer" >

          </footer>
        </modal>
      </div>
    </div>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'
  import Vue from 'vue'
  export default {
    'title': '气损收费修改',
    data () {
      return {
        model: new PagedList('rs/sql/singleTable_OrderBy', 20, {items: '"*"', tablename: '"t_gasloss"', orderitem: '"id desc"'}),
        // pj: this.$appdata.getParam('是否有附件') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('是否有附件')] : [],
        states: [{label: '全部', value: ''}, {label: '有效', value: '有效'}, {label: '冲正', value: '冲正'}, {label: '撤销', value: '撤销'}],
        selectrow: null,
        edit: false,
        // 公司下拉
        initres: {
          org: [this.$login.f.orgid],
          dep: [],
          user: []
        },
        f_filialeid: this.$login.f.f_orgid,
        allorgid: [],
        f_orgid: '',
        criteriaShow: false,
        types: this.$appdata.getParam('气损分类'),
        printstyle: this.$appdata.getParam('打印格式'),
        paytype: this.$appdata.getParam('付款方式'),
        hasfile: [{label: '全部', value: ''}, {label: '是', value: '是'}, {label: '否', value: '否'}],
        orgCondtionStr: ''
      }
    },
    async ready () {
      this.$refs.paged.$refs.criteria.model.f_startDate = this.$login.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.criteria.model.f_endDate = this.$login.toStandardDateString() + ' 23:59:59'
      // await this.getinputtores()
      // readyGen(this)
      this.$refs.paged.$refs.criteria.search()
      // this.getwarehouse()
    },

    methods: {
      async modifyRecord(row){
        this.selectrow=row
        this.edit=true
        // let http = new HttpResetClass()
        // await http.load('POST', 'rs/sql/singleTable_OrderBy', {
        //   data: {
        //     items: '*',
        //     tablename: 't_gasloss_detail',
        //     condition: ` f_gasloss_id  = '${row.id}'`,
        //     orderitem: ' id desc'
        //   }
        // }, {resolveMsg: null, rejectMsg: null}).then((res)=>{
        //   row.gaslossdetail=res.data
        //
        //   console.log("------------为啥显示不出来",this.selectrow)
        //   this.edit=true
        // })

      },
      async gaslossCancel(row){
        this.$showMessage('确定要撤销该收费记录吗', ['confirm', 'cancel']).then((res) => {
            if (res === 'confirm') {
              let http = new HttpResetClass()
              let params = {
                recordData: {
                  id: row.id
                },
                f: {
                  name: Vue.$login.f.name,
                  id: Vue.$login.f.id,
                  orgid: Vue.$login.f.orgid,
                  orgs: Vue.$login.f.orgs,
                  depids: Vue.$login.f.depids,
                  deps: Vue.$login.f.deps
                }
              }
              http.load('POST', 'rs/logic/gasLossCancel', params, {resolveMsg: '气损收费撤销成功', rejectMsg: '气损收费撤销失败'}).then((res)=>{
                this.search()
              })

            }
          })
      },
      confirmcancel(){
        this.edit=false
        this.selectrow=null
      },
      async confirmEdit(){
        let http = new HttpResetClass()
        this.selectrow.f_operat_type='气损收费'
        await http.load('POST', 'rs/entity/t_gasloss', this.selectrow, {resolveMsg: '气损收费修改成功', rejectMsg: '气损收费修改失败'})
        this.confirmcancel()
      },
      async getRes (condition, obj) {
        this.orgCondtionStr = condition
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },

      // view (row) {
      //   this.$parent.showupload = true
      //   this.$parent.row = row
      // },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        if (!this.f_orgid) {
          this.f_orgid = this.$login.f.orgid
        }
        let f_orgstr = this.orgCondtionStr ? this.orgCondtionStr : "and f_orgid in ('" + this.f_orgid + "')"
        args.condition = `${args.condition} ${f_orgstr} and f_state='有效'`
        this.model.search(args.condition, args.model)
      }

    },
    watch: {
      async 'orgCondtionStr' (val) {
        let res = val.match(/'(.*?)'/)
        this.$refs.paged.$refs.criteria.model.f_inputtor = []
        console.log('正则提取:', res && res[1])
        if (res) {
          this.f_filialeid = res[1]
          if (res.input != null) {
            let resorgid = res.input.substring(res.input.indexOf("'"))
            if (resorgid != null && resorgid != '') {
              resorgid = resorgid.substring(0, resorgid.lastIndexOf("'") + 1)
            // resorgid = resorgid.replaceAll("'","");
              resorgid = resorgid.replace(/'/g, '')
              this.allorgid = resorgid.split(',')
            }
          }
        }
      }
    },
    computed: {
      losstypes(){
        if (this.selectrow.f_type) {
          return this.$appdata.getParam(this.selectrow.f_type)
        } else {
          return []
        }
      }
    },
    events:{
      'clean'(){
        this.confirmcancel()
      }
    }
  }
</script>
<style>
  .datapanel {
    color: #333;
    background-color: white;
    padding: 10px 20px;
    border-radius: 15px;
  }
</style>
