<template>
  <div class="auto">
    <validator name='v'>

      <div v-if="row.limit_state ==='已限购'" style="height: 100%">
        <form novalidate class="form-horizontal">
          <ul class="nav nav-tabs" style="margin-bottom: 10px">
            <li class="active"><a href="#">限购信息</a></li>
          </ul>
          <div class="row">
            <div class="col-sm-6 form-group">
              <label class="font_normal_body">限购方式</label>
              <input class="input_search" style="width:60%" type="text" placeholder='限购方式'
                     v-model="limit.f_limit_style">
            </div>
            <div class="col-sm-6 form-group" >
              <label for="f_user_name" class="font_normal_body">限购类型</label>
              <input class="input_search" style="width:60%" type="text" placeholder='限购类型'
                     v-model="limit.f_limit_type" readonly >
            </div>

            <div class="col-sm-6 form-group" >
              <label class="font_normal_body">周期类型</label>
              <input class="input_search" style="width:60%" type="text" placeholder='目标用户气表类型'
                     v-model="limit.f_time_type" readonly >
            </div>
            <div class="col-sm-6 form-group" >
              <label class="font_normal_body">周期时长</label>
              <input class="input_search" style="width:60%" type="text" placeholder='目标用户气表类型'
                     v-model="limit.f_time_value" readonly >
            </div>
            <div class="col-sm-6 form-group" v-if="limit.f_limit_style ==='按总量' && limit.f_limit_type==='气量'">
              <label class="font_normal_body">限购气量</label>
              <input class="input_search" style="width:60%" type="text" placeholder='目标用户气表类型'
                     v-model="limit.f_limit_value" readonly >
            </div>
            <div class="col-sm-6 form-group" v-if="limit.f_limit_style ==='按总量' && limit.f_limit_type==='金额'">
              <label class="font_normal_body">限购金额</label>
              <input class="input_search" style="width:60%" type="text" placeholder='目标用户气表类型'
                     v-model="limit.f_limit_amount" readonly >
            </div>
            <div class="col-sm-6 form-group" v-if="limit.f_limit_style !=='按总量'">
              <label class="font_normal_body">限购次数</label>
              <input class="input_search" style="width:60%" type="text" placeholder='目标用户气表类型'
                     v-model="limit.f_limit_times" readonly >
            </div>
            <div class="col-sm-6 form-group" v-if="limit.f_limit_style !=='按总量' && limit.f_limit_type==='气量'">
              <label class="font_normal_body">单次限购</label>
              <input class="input_search" style="width:60%" type="text" placeholder='目标用户气表类型'
                     v-model="limit.f_limit_value" readonly >
            </div>
            <div class="col-sm-6 form-group" v-if="limit.f_limit_style !=='按总量' && limit.f_limit_type==='金额'">
              <label class="font_normal_body">单次限购</label>
              <input class="input_search" style="width:60%" type="text" placeholder='目标用户气表类型'
                     v-model="limit.f_limit_amount" readonly >
            </div>
          </div>
        </form>
        <br>
        <br>
        <div style="text-align:right;">
          <button class="button_search btn-gn" @click="cancellimit()" :disabled='!$v.valid'>取消限购</button>
          <button class="button_clear btn-gn" @click="cancel()">关闭</button>
        </div>
      </div>
        <div v-if="row.limit_state ==='未限购'" style="height: 100%">

          <form class="form-horizontal  select-overspread">
            <ul class="nav nav-tabs" style="margin-bottom: 10px">
              <li class="active"><a href="#">限购信息</a></li>
            </ul>
            当前用户未设置限购
            <div class="row">
              <div class="col-sm-6 form-input-group">
                <label class="font_normal_body col-sm-3">第三方缴费</label>
                <v-select
                  :value.sync="model.f_third_pay"
                  v-model="model.f_third_pay"
                  :options='thirdPays'
                  :value-single="true"
                  close-on-select></v-select>
              </div>
              <div class="col-sm-6 form-input-group">
                <label class="font_normal_body col-sm-3">限制类型</label>
                <v-select
                  :value.sync="model.f_limit_style"
                  v-model="model.f_limit_style"
                  :options='limitstyle'
                  :value-single="true"
                  close-on-select></v-select>
              </div>
            </div>
            <div class="row" style="margin-top:10px;" >
              <div class="col-sm-6 form-input-group">
                <label class="font_normal_body col-sm-3">周期类型</label>
                <v-select
                  :value.sync="model.f_time_type"
                  v-model="model.f_time_type"
                  :options='timeTypes'
                  :value-single="true"
                  close-on-select></v-select>
              </div>
              <div class="col-sm-6 form-input-group">
                <label class="font_normal_body col-sm-3">周期时长</label>
                <input type="text" v-model="model.f_time_value" placeholder="周期时长" style="vertical-align:middle">
              </div>
            </div>

            <div class="row" style="margin-top:10px;" v-if="model.f_limit_style !=='按总量'">
              <div class="col-sm-6 form-input-group">
                <label class="font_normal_body col-sm-3">限制次数</label>
                <input type="text" v-model="model.f_limit_times" placeholder="限制次数">
              </div>
              <div class="col-sm-6 form-input-group" v-if="model.f_limit_type ==='气量'">
                <label class="font_normal_body col-sm-3">单次限购</label>
                <input type="text" v-model="model.f_limit_value" placeholder="单次限购">
              </div>
              <div class="col-sm-6 form-input-group" v-if="model.f_limit_type ==='金额'">
                <label class="font_normal_body-label col-sm-3">单次限购</label>
                <input type="text" v-model="model.f_limit_amount" placeholder="单次限购">
              </div>
            </div>
            <div class="row" style="margin-top:10px;" v-if="model.f_limit_style ==='按总量'">
              <div class="col-sm-6 form-input-group" v-if="model.f_limit_type ==='气量'">
                <label class="font_normal_body col-sm-3">总限购量</label>
                <input type="text" v-model="model.f_limit_value" placeholder="单次限购">
              </div>
              <div class="col-sm-6 form-input-group" v-if="model.f_limit_type ==='金额'">
                <label class="font_normal_body col-sm-3">总限购量</label>
                <input type="text" v-model="model.f_limit_amount" placeholder="单次限购">
              </div>
            </div>
            <div class="row" style="margin-top:10px;">
              <div class="col-sm-6 form-input-group">
                <label class="font_normal_body col-sm-3">支付限制</label>
                <v-select
                  :value.sync="model.f_limit_type"
                  v-model="model.f_limit_type"
                  :options='limitTypes'
                  :value-single="true"
                  close-on-select></v-select>
              </div>
              <div class="col-sm-6 form-input-group">
                <label class="font_normal_body col-sm-3">执行时间</label>
                <datepicker placeholder="执行时间"
                            v-model="model.f_start_date"
                            :value.sync="model.f_start_date"
                            :format="'yyyy-MM-dd'">
                </datepicker>
              </div>
            </div>
          </form>
          <br>
          <br>
          <div style="text-align:right;">
            <button class="button_search btn-gn" @click="confirm">确认</button>
            <button class="button_clear btn-gn" @click="cancel">关闭</button>
          </div>
        </div>
      <div class="auto" v-if="false" style="height: 500px">
        <h3 align="center">限购历史</h3>
        <data-grid :model="history" class="list_area table_sy"  partial='list' v-ref:grid >
          <template partial='head'>
            <tr>
              <th style="white-space: nowrap;" ><nobr>限购类型</nobr></th>
              <th style="white-space: nowrap;" ><nobr>支付限制</nobr></th>
              <th style="white-space: nowrap;" ><nobr>周期类型</nobr></th>
              <th style="white-space: nowrap;" ><nobr>限购开始时间</nobr></th>
              <th style="white-space: nowrap;" ><nobr>限购量</nobr></th>
              <th style="white-space: nowrap;" ><nobr>当前状态</nobr></th>
              <th style="white-space: nowrap;" ><nobr>创建人员</nobr></th>
              <th style="white-space: nowrap;" ><nobr>创建时间</nobr></th>
              <th style="white-space: nowrap;" ><nobr>作废人员</nobr></th>
              <th style="white-space: nowrap;" ><nobr>作废时间</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td style="white-space: nowrap;" >{{row.f_limit_style}}</td>
              <td style="white-space: nowrap;" >{{row.f_limit_type}}</td>
              <td style="white-space: nowrap;" >{{row.f_time_type}}</td>
              <td style="white-space: nowrap;" >{{row.f_start_date}}</td>
              <td style="white-space: nowrap;" >
                <div v-if="row.f_limit_style ==='按总量' && row.f_limit_type==='金额'">限购金额：{{row.f_limit_amount}}</div>
                <div v-if="row.f_limit_style ==='按总量' && row.f_limit_type==='气量'">限购气量：{{row.f_limit_value}}</div>
                <div v-if="row.f_limit_style !=='按总量' && row.f_limit_type==='气量'">限购{{row.f_limit_times}}次，每次最多{{row.f_limit_value}}方</div>
                <div v-if="row.f_limit_style !=='按总量' && row.f_limit_type==='金额'">限购{{row.f_limit_times}}次，每次最多{{row.f_limit_amount}}元</div>
              </td>
              <td style="white-space: nowrap;" >
                <div v-if="row.f_state !=='无效'">使用中</div>
                <div v-else>已作废</div>
              </td>
              <td style="white-space: nowrap;" >{{row.f_operate_people}}</td>
              <td style="white-space: nowrap;" >{{row.f_operate_date}}</td>
              <td style="white-space: nowrap;" >{{row.f_cancel_people}}</td>
              <td style="white-space: nowrap;" >{{row.f_cancle_date}}</td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </div>
    </validator>
    <!--<print-bill :show="print" :bill-manager='config.hasBillManage' v-ref:printbill :bill-url='billUrl' v-on:toggle="clean" @printok="printok" :data='printModel'></print-bill>-->
  </div>
</template>


<script>
  export default {
    title: '限购查看',
    data () {
      return {
        model: {
          f_third_pay: '0',
          f_time_type: '按月',
          f_limit_times: '',
          f_time_value: '',
          f_limit_type: '气量',
          f_limit_style:'',
          f_limit_value: 0,
          f_limit_amount: 0,
          f_start_date: this.$login.toStandardDateString()
        },
        thirdPays: [{label: '支持', value: '1'},{label: '不支持', value: '0'}],
        timeTypes: [{label: '按月', value: '按月'},{label: '按日', value: '按日'}],
        limitTypes: [{label: '气量', value: '气量'},{label: '金额', value: '金额'}],
        limitstyle: [{label: '按次数', value: '按次数'},{label: '按总量', value: '按总量'}],
        limit:null
      }
    },
    props: ['row'],
    async ready () {
      if (this.row && this.row.limit_state === '已限购'){
        await this.getLimit()
      }
    },
    methods: {
      cancel () {
        this.model = {
          f_third_pay: '0',
          f_time_type: '按月',
          f_limit_times: '',
          f_time_value: '',
          f_limit_type: '气量',
          f_limit_style:'',
          f_limit_value: 0,
          f_limit_amount: 0,
          f_start_date: this.$login.toStandardDateString()
        }
        this.$dispatch('close')
      },
      async cancellimit(){
        this.$showMessage('确定取消该用户的限购吗？', ['confirm', 'cancel']).then(async (res) => {
        if (res === 'confirm') {
          this.limit.f_state = '无效'
          this.limit.f_cancel_people = this.$login.f.name
          this.limit.f_cancle_date = this.$login.toStandardTimeString()
          await this.$resetpost('rs/entity/t_limit_gas',this.limit)
          this.$dispatch('close')
        }
      })
      },
      async confirm(){
        this.model.f_state = '有效'
        this.model.f_userinfo_id = this.row.f_userinfo_id
        this.model.f_operate_people = this.$login.f.name
        this.model.f_operate_date = this.$login.toStandardTimeString()
        await this.$resetpost('rs/entity/t_limit_gas',this.model)
        this.model = {
          f_third_pay: '0',
          f_time_type: '按月',
          f_limit_times: '',
          f_time_value: '',
          f_limit_type: '气量',
          f_limit_style:'',
          f_limit_value: 0,
          f_limit_amount: 0,
          f_start_date: this.$login.toStandardDateString()
        }
        this.$dispatch('close')
      },
      async getLimit (){
        let limit = await this.$resetpost('rs/sql/saleSingleTable',
          {data: {tablename: 't_limit_gas', condition: `isnull(f_state,'') != '无效' and f_userinfo_id ='${this.row.f_userinfo_id}'`}},
          {resolveMsg: null, rejectMsg: null})
        if(limit.data.length >0){
          this.limit = limit.data[0]
        }
      }
    },
    watch: {
      async 'row' (){
        if (this.row && this.row.limit_state === '已限购'){
          await this.getLimit()
        }
      }
    }
  }
</script>
