<template>
  <div class="auto select-overspread" style="margin-left: 25px; border: 1px solid #EEF3F6">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <!-- <p class="bg-info text-center" style="padding: 8px;">分配信息</p> -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">卡分配信息</a></li>
        </ul>
        <div class="row" style="margin-top:10px;">
          <label for="f_operator"  class="col-sm-3 control-label">卡类型</label>
          <div class="col-sm-3" >
            <v-select :value.sync="model.f_card_type"
              v-model="model.f_card_type"
              :options='cardtype'
              placeholder='请选择'
              v-model="model.f_card_type"
              close-on-select>
            </v-select>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_start_number" class="col-sm-3 control-label">起始卡号</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_start_number" placeholder='0' >
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_end_number" class="col-sm-3 control-label">终止卡号</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_end_number" placeholder='0'  >
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_user" class="col-sm-3 control-label">卡使用人</label>
          <div class="col-sm-3" >
            <v-select :value.sync="model.f_user"
              v-model="model.f_user"
              :options='user'
              placeholder='请选择'
              v-model="model.f_user"
              close-on-select>
            </v-select>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <label for="f_operator"  class="col-sm-3 control-label">卡分配人</label>
          <div class="col-sm-3" >
            <v-select :value.sync="model.f_operator"
              v-model="model.f_operator"
              :options='operates'
              placeholder='请选择'
              v-model="model.f_operator"
              close-on-select>
            </v-select>
          </div>
        </div>


        <div class="row" style="margin-top:10px;">
          <label for="f_number" class="col-sm-3 control-label">发卡量总数</label>
          <div class="col-sm-3">
            <input  type="number" class="form-control" v-model="model.f_number" placeholder='0' disabled>
          </div>
        </div>
      </form>
      <div style="text-align:right;margin-top:30px;margin-right:50px;">
        <!-- <button class="btn btn-success width-100" @click="confirm()" :disabled='!$v.valid'>重新分配</button> -->
        <button class="btn btn-success width-120" @click="confirm()" v-if='data.id'  :disabled='!$v.valid'>重新分配</button>
        <button class="btn btn-success width-60" @click="confirm()"  v-else  :disabled='!$v.valid'>确认</button>
        <button class="btn btn-default width-60" @click="clean()">取消</button>
      </div>
    </validator>
  </div>
</template>
<script>


export default {
  title: '发卡信息编辑',
  data () {
    return {
      model: {
        f_start_number: null,
        f_end_number: null,
        f_number: null,
        f_now_number: null,
        f_card_type: [],
        f_user: [],
        f_operator: this.$login.f.name,
        f_operator_date: this.$login.toStandardTimeString(),
        f_state: '停用',
        f_filiale: this.$login.f.f_fengongsi,
        f_outlets: this.$login.f.f_parentname
      }
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.datatomodel()
    },
    'model.f_start_number' (val) {
      let number = this.model.f_end_number - this.model.f_start_number + 1
      number >= 0 ? this.model.f_number = number : this.model.f_number = 0
    },
    'model.f_end_number' (val) {
      let number = this.model.f_end_number - this.model.f_start_number + 1
      number >= 0 ? this.model.f_number = number : this.model.f_number = 0
    }
  },
  ready () {
    this.datatomodel()
  },
  methods: {
    /*
    更改选择框里面的值
    传进来时转换为数组，
    保存时转换为字符串
    */
    selectChangeString (type) {
      this.model.f_user = this.model.f_user[0]
      this.model.f_operator = this.model.f_operator[0]
      this.model.f_card_type = this.model.f_card_type[0]
    },
    selectChangeArr (type) {
      this.model.f_user = [`${this.model.f_user}`]
      this.model.f_operator = [`${this.model.f_operator}`]
      this.model.f_card_type = [`${this.model.f_card_type}`]
    },
    // 接受数据时转换为本页面的model
    datatomodel () {
      console.log('获取到参数并进行转换')
      Object.assign(this.$data.model, this.$options.data().model)
      this.model = Object.assign({}, this.model, this.data)
      this.selectChangeArr()
    },
    confirm () {
      this.selectChangeString()
      this.model.f_now_number ? null : this.model.f_now_number = this.model.f_start_number
      this.$resetpost('rs/entity/t_cardallot', this.model, {resolveMsg: '分配成功', rejectMsg: null})
      .then(
        (res) => {
          this.model = this.$options.data().model
          // Object.assign(this.$data.model, this.$options.data().model)
          this.$dispatch('refrash', '发卡分配成功', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '发卡分配失败', this.data, error)
        }
      )
    },
    cancel () {
      this.$dispatch('clean', this.data)
    }
  },
  computed: {
    'operates' () {
      return AppData.getParam('票据分配人')
    },
    'user' () {
      return AppData.getParam('票据使用人')
    },
    'printtypes' () {
      return AppData.getParam('打印格式')
    },
    'cardtype' () {
      return AppData.getParam('气表品牌')
    }
  }
}
</script>
