<template>
  <div class="auto">
    <modal :show.sync="show"  v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h3 style="color:black" class="modal-title">限购配置</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <validator name='v'>
          <form class="form-horizontal  select-overspread">
            <div class="row">
              <div class="col-sm-6 form-group" :class="[$v.f_third_pay.required ? 'has-error' : '']">
                <label class="font_normal_body col-sm-3" >第三方缴费</label>
                <input type="text" v-show="false" v-model="$refs.f_third_pay.selectedItems"
                       v-validate:f_third_pay='{required: true }'>
                <v-select width="60%"
                  :value.sync="model.f_third_pay"
                  v-model="model.f_third_pay"
                  :options='thirdPays'
                  :value-single="true" v-ref:f_third_pay
                  close-on-select></v-select>
              </div>
              <div class="col-sm-6 form-group" :class="[$v.f_limit_style.required ? 'has-error' : '']">
                <label class="font_normal_body col-sm-3" >限制类型</label>
                <input type="text" v-show="false" v-model="$refs.f_limit_style.selectedItems"
                       v-validate:f_limit_style='{required: true }'>
                <v-select width="60%"
                  :value.sync="model.f_limit_style"
                  v-model="model.f_limit_style"
                  :options='limitstyle'
                  :value-single="true" v-ref:f_limit_style
                  close-on-select></v-select>
              </div>
            </div>
            <div class="row" style="margin-top:10px;" >
              <div class="col-sm-6 form-group" :class="[$v.f_time_type.required ? 'has-error' : '']">
                <label class="font_normal_body col-sm-3" >周期类型</label>
                <input type="text" v-show="false" v-model="$refs.f_time_type.selectedItems"
                       v-validate:f_time_type='{required: true }'>
                <v-select width="60%"
                  :value.sync="model.f_time_type"
                  v-model="model.f_time_type"
                  :options='timeTypes'
                  :value-single="true" v-ref:f_time_type
                  close-on-select></v-select>
              </div>
              <div class="col-sm-6 form-group" :class="[$v.f_time_value.required ? 'has-error' : '']">
                <label class="font_normal_body col-sm-3" >周期时长</label>
                <input type="text" class="input_search" v-model="model.f_time_value" placeholder="周期时长"  v-validate:f_time_value='{required: true }' style="vertical-align:middle;width: 60%">
              </div>
            </div>

            <div class="row" style="margin-top:10px;" v-if="model.f_limit_style !=='按总量'">
              <div class="col-sm-6 form-group" :class="[$v.f_limit_times.required ? 'has-error' : '']">
                <label class="font_normal_body col-sm-3" >限制次数</label>
                <input type="text" class="input_search" v-model="model.f_limit_times"  style="vertical-align:middle;width: 60%" v-validate:f_limit_times='{required: true }' placeholder="限制次数">
              </div>
              <div class="col-sm-6 form-group" :class="[$v.f_limit_value.required ? 'has-error' : '']" v-if="model.f_limit_type ==='气量'">
                <label class="font_normal_body col-sm-3" >单次限购</label>
                <input type="text" class="input_search" v-model="model.f_limit_value"  style="vertical-align:middle;width: 60%" v-validate:f_limit_value='{required: true }' placeholder="单次限购">
              </div>
              <div class="col-sm-6 form-group" :class="[$v.f_limit_amount.required ? 'has-error' : '']" v-if="model.f_limit_type ==='金额'">
                <label class="font_normal_body col-sm-3" >单次限购</label>
                <input type="text" class="input_search" v-model="model.f_limit_amount"  style="vertical-align:middle;width: 60%" v-validate:f_limit_amount='{required: true }' placeholder="单次限购">
              </div>
            </div>
            <div class="row" style="margin-top:10px;" v-if="model.f_limit_style ==='按总量'">
              <div class="col-sm-6 form-group" :class="[$v.f_limit_value.required ? 'has-error' : '']" v-if="model.f_limit_type ==='气量'">
                <label class="font_normal_body col-sm-3" >总限购量</label>
                <input type="text" class="input_search" v-model="model.f_limit_value" style="vertical-align:middle;width: 60%" v-validate:f_limit_value='{required: true }' placeholder="单次限购">
              </div>
              <div class="col-sm-6 form-group" :class="[$v.f_limit_amount.required ? 'has-error' : '']" v-if="model.f_limit_type ==='金额'">
                <label class="font_normal_body col-sm-3" >总限购量</label>
                <input type="text" class="input_search" v-model="model.f_limit_amount"  style="vertical-align:middle;width: 60%" v-validate:f_limit_amount='{required: true }' placeholder="单次限购">
              </div>
            </div>
            <div class="row" style="margin-top:10px;">
              <div class="col-sm-6 form-group" :class="[$v.f_limit_type.required ? 'has-error' : '']">
                <label class="font_normal_body col-sm-3" >支付限制</label>
                <input type="text" v-show="false" v-model="$refs.f_limit_type.selectedItems"
                       v-validate:f_limit_type='{required: true }'>
                <v-select width="60%"
                  :value.sync="model.f_limit_type"
                  v-model="model.f_limit_type"
                  :options='limitTypes'
                  :value-single="true" v-ref:f_limit_type
                  close-on-select></v-select>
              </div>
              <div class="col-sm-6 form-group" :class="[$v.f_start_date.required ? 'has-error' : '']">
                <label class="font_normal_body col-sm-3" >执行时间</label>
                <input type="text" v-show="false" v-model="model.f_start_date"
                       v-validate:f_start_date='{required: true }'>
                <datepicker placeholder="执行时间" style="width:60%"
                            v-model="model.f_start_date"
                            :value.sync="model.f_start_date" v-ref:f_start_date
                            :format="'yyyy-MM-dd'">
                </datepicker>
              </div>
            </div>
          </form>
        </validator>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button class="btn btn-success" v-if="limitshow" @click="cancellimit">取消限购</button>
        <button class="button_search btn-gn" :disabled="!$v.valid" @click="confirm">确认</button>
        <button class="button_clear btn-gn" @click="cancel">取消</button>
      </footer>
    </modal>
  </div>
</template>
<script>

  import {HttpResetClass} from 'vue-client'

  let getLimitDataGen = async function (self) {
    let param = {
      tablename: 't_limit_gas'
    }
    if (self.f_price_id) {
      param.condition = ` f_price_id = '${self.f_price_id}'  and isnull(f_state,'') != '无效'`
    } else if  (self.f_userinfo_id) {
      param.condition = ` f_userinfo_id = '${self.f_userinfo_id}' and isnull(f_state,'') != '无效'`
    }
    let http = new HttpResetClass()
    let res = await http.load('POST', 'rs/sql/saleSingleTable', {data: param}, {resolveMsg: null, rejectMsg: '获取限购配置失败！！'})
    console.log('获取的限购数据', res)
    if (res.data.length > 0 ) {
      self.model = Object.assign({}, self.model, res.data[0])
      self.model.f_third_pay = self.model.f_third_pay + ''
      self.limitshow = true
    } else {
      self.limitshow = false
    }

  }


  export default {
    title: '限购配置',
    data () {
      return {
        model: {
          f_third_pay: '0',
          f_time_type: '按月',
          f_limit_times: '',
          f_time_value: '0',
          f_limit_type: '气量',
          f_limit_style: '',
          f_limit_value: '',
          f_limit_amount: '',
          f_start_date: this.$login.toStandardDateString()
        },
        limitshow: false,
        thirdPays: [{label: '包含', value: '1'}, {label: '不包含', value: '0'}, {label: '仅第三方', value: '-1'}],
        timeTypes: [{label: '按月', value: '按月'}, {label: '按日', value: '按日'}],
        limitTypes: [{label: '气量', value: '气量'}, {label: '金额', value: '金额'}],
        limitstyle: [{label: '按次数', value: '按次数'}, {label: '按总量', value: '按总量'}]
      }
    },
    props: ['show', 'f_price_id', 'f_userinfo_id'],
    ready () {
      this.getLimitData()
    },
    watch: {
      'f_price_id' () {
        this.getLimitData()
      },
      'f_userinfo_id' () {
        this.getLimitData()
      }
    },
    methods: {
      getLimitData () {
        console.log('获取限购配置。。', this.f_price_id, this.f_userinfo_id)
        if (this.f_price_id || this.f_userinfo_id) {
          getLimitDataGen(this)
        }
      },
      computed: {
        limitValid () {
          let result = true
          for (let key in this.model) {
            if (this.model[key] === '') {
              result = false
            }
          }
          return result
        },
      },
      confirm () {
        this.$dispatch('limit', this.model)
        this.model = {
          f_third_pay: this.model.f_third_pay,
          f_time_type: this.model.f_time_type,
          f_limit_times: this.model.f_limit_times,
          f_time_value: this.model.f_time_value,
          f_limit_type: this.model.f_limit_type,
          f_limit_style: this.model.f_limit_style,
          f_limit_value: this.model.f_limit_value,
          f_limit_amount: this.model.f_limit_amount,
          f_start_date: this.$login.toStandardDateString()
        }
        console.log('提交限购数据', this.model)
        this.show = false
      },
      async cancellimit() {
        let sql = `update t_limit_gas set f_state = '无效' where id = '${this.model.id}'`
        let data = {
          sql: sql
        }
        await this.$resetpost('rs/logic/runSQL',data)
        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()
        }
        getLimitDataGen(this)
      },
      cancel () {
        this.show = false
      }
    }

  }

</script>
