<template>
  <div class="basic-main" style="height: 98%">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <!--<div class="col-sm-2 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="startDate"  class="font_normal_body">开始日期</label>
              <datepicker id="startDate" placeholder="开始日期"
                          v-model="model.startDate"  style="width: 60%"
                          :value.sync="model.startDate"
                          condition="f_delivery_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: 60%"
                          :value.sync="model.endDate"
                          condition="f_delivery_date <= '{} 23:59:59'"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="reset">
              </datepicker>
            </div>
            <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" placeholder='客户编号'
                     condition="f_userinfo_code = '{}'">
            </div>
            <div class="col-sm-2  form-group">
              <label  class="font_normal_body" title="订单状态">订单状态</label>
              <v-select
                v-model="model.msg"
                placeholder='订单状态'
                condition="f_states like '%{}%'"
                :value.sync="model.msg"
                :options='$parent.$parent.letter'
                close-on-select ></v-select>
            </div>
            <div class="col-sm-2  form-group">
              <label  class="font_normal_body" title="操作标识">操作标识</label>
              <v-select
                v-model="model.pay_state"
                placeholder='操作标识'
                condition="pay_state like '%{}%'"
                :value.sync="model.pay_state"
                :options='$parent.$parent.paystate'
                close-on-select ></v-select>
            </div>
            <div class="span" style="float:right;">
              <button class="button_search button_spacing width-60" @click="search()" v-el:cx>查询</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">
            <div class="form-group col-sm-2">
              <label class="font_normal_body">终端编号</label>
              <input type="text" class="input_search" style="width:60%"  v-model="model.f_terminal_num" placeholder='终端编号'
                     condition="f_terminal_num like '%{}%'">
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body">客户名称</label>
              <input type="text" class="input_search" style="width:60%"  v-model="model.f_user_name" placeholder='客户名称'
                     condition="f_user_name like '%{}%'">
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body">&nbsp;&nbsp;&nbsp;电话&nbsp;&nbsp;&nbsp;</label>
              <input type="text" class="input_search" style="width:60%"  v-model="model.f_user_phone" placeholder='电话'
                     condition="f_user_phone like '{}%'">
            </div>
            <div class="form-group col-sm-4">
              <label class="font_normal_body">客户地址</label>
              <input type="text" class="input_search" style="width:80%" v-model="model.f_address" placeholder='客户地址'
                     condition="f_address like '%{}%'">
            </div>
            <!--<div class="col-sm-2  form-group">-->
            <!--<label  class="font_normal_body">订单状态</label>-->
            <!--<v-select-->
            <!--v-model="model.msg"-->
            <!--placeholder='订单状态'-->
            <!--condition="f_states like '%{}%'"-->
            <!--:value.sync="model.msg"-->
            <!--:options='$parent.$parent.letter'-->
            <!--close-on-select ></v-select>-->
            <!--</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>
            <th>购气金额</th>
            <th>系统收费时间</th>
            <th>系统收费状态</th>
            <th>系统写卡状态</th>
            <th>操作人</th>
            <th>操作标识</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;"><nobr>{{$index+1}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_userinfo_code}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_user_name}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_user_phone}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_address}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_terminal_num}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_transaction_id}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_total_fee}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_time_out}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_states}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_payment}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_pregas}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_collection}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_delivery_date}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_charge_state}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_write_card}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_operator}}</nobr></td>
          <td v-if="row.pay_state==='正常'" style="text-align: center;">
            正常
          </td>
          <td v-if="row.pay_state==='退款'" style="text-align: center;">
            <button type="button" name="button"  class="btn btn-link" @click="$parent.$parent.$parent.updateState(row)">退款</button>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
  <modal v-if="show" :show.sync="show" >
    <header slot="modal-header" class="modal-header">
      <h4 class="modal-title">退费</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <validator name='v'>
        <form class="form-horizontal select-overspread">
          <div class="form-group">
            <label class=" col-sm-3 control-label">退费原因:</label>
            <div class="col-sm-8">
              <textarea class="form-control" v-model="watchComment" placeholder="退费原因" ></textarea>
            </div>
          </div>
        </form>
      </validator>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-success" @click='confirm()'>确认</button>
      <button type="button" class="btn btn-default" @click='close'>取消</button>
    </footer>
  </modal>
</template>
<script>
  import { PagedList } from 'vue-client'
  import Vue from 'vue'

  let readyGen = async function (self) {
    // self.$refs.paged.$refs.cri.model.startDate = self.$login.toStandardDateString()
    // self.$refs.paged.$refs.cri.model.endDate = self.$login.toStandardDateString()
  }

  export default {
    title: '自助机对账',
    data () {
      return {
        model: new PagedList('rs/sql/wechatSelling', 20),
        letter: this.$appdata.getParam('订单状态') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('订单状态')] : [],
        paystate: this.$appdata.getParam('操作标识') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('操作标识')] : [],
        criteriaShow: false,
        show: false,
        watchComment: '',
        msgData: []
      }
    },
    props: [],
    ready () {
      readyGen(this)
    },
    methods: {
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      updateState (val) {
        this.show = true
        this.msgData = val
      },
      async confirm () {
        this.msgData.f_operator = this.$login.f.name
        let updateWechatData = {
          watchComment: this.watchComment,
          msgData: this.msgData
        }
        await Vue.resetpost('rs/logic/updateWechatState', {data: updateWechatData}, {resolveMsg: '退款请求已发送成功,稍后到账！', rejectMsg: '退款失败'})
        this.close()
        this.search()
      },
      close () {
        this.show = false
        this.watchComment = ''
        this.msgData = []
      },
      search () {
        this.$refs.paged.$refs.cri.search()
      },
      selfSearch (args) {
        this.model.params.startDate = this.$refs.paged.$refs.cri.model.startDate
        this.model.params.endDate = this.$refs.paged.$refs.cri.model.endDate
        this.model.search(args.condition, args.model)
      }

    },
    events: {

    },
    computed: {

    }
  }
</script>
