<template>
  <div  class="auto select-overspread" style="padding-left: 10px;">
    <ul class="nav nav-tabs" >
      <li role="presentation" class="active"><a href="#">气表品牌</a></li>
    </ul>
    <validator name='v'>
      <form class="form-horizontal user-meter-padding" style="flex: 1;">
         <div class="row auto" >
           <div class="form-group form-input-group col-sm-4" :class="[$v.f_meter_brand.required ? 'has-error' : 'has-success']">
             <label for="f_meter_brand"  class="col-sm-2 control-label">气表品牌:</label>
             <div class="col-sm-2"  >
               <input class="form-control"  type="text" v-model="gasmessage.f_meter_brand" v-validate:f_meter_brand='{required: true }'>
             </div>
           </div>

           <div class="form-group form-input-group col-sm-4" :class="[$v.metertype.required ? 'select-error' : '']">
             <label for="f_meter_type" class="col-sm-2 control-label">气表类型:</label>
             <div class="col-sm-2">
               <input type="text" v-show="false" v-model="$refs.metertype.selectedItems" v-validate:metertype='{required: true }'>
                <v-select :value.sync="gasmessage.f_meter_type"
                   v-model="gasmessage.f_meter_type"
                   :options='meterType' placeholder='气表类型'
                   close-on-select v-ref:metertype></v-select>
             </div>
           </div>

           <div class="form-group form-input-group col-sm-4">
             <label for="f_manufacturers" class="col-sm-2 control-label">气表厂家:</label>
             <div class="col-sm-2">
               <input class="form-control"  type="text" v-model="gasmessage.f_manufacturers"  required="required">
             </div>
           </div>


         </div>
         <div class="row auto" style="margin-top:10px;margin-left: 0px; margin-right: 0px;" >

           <div class="form-group form-input-group col-sm-4">
             <label for="f_meter_limit" class="col-sm-2 control-label">气表年限:</label>
             <div class="col-sm-2" >
               <input class="form-control"  type="number" v-model="gasmessage.f_meter_limit"  required="required">
             </div>
           </div>

           <div class="form-group form-input-group col-sm-4">
             <label for="f_topup_ceil" class="col-sm-2 control-label ">充值上限:</label>
             <div class="col-sm-2">
               <input class="form-control"  type="number" v-model="gasmessage.f_topup_ceil"  >
             </div>
           </div>

           <div class="form-group form-input-group col-sm-4">
             <label for="f_police_gas" class="col-sm-2 control-label">报警气量:</label>
             <div class="col-sm-2">
               <input class="form-control"  type="number" v-model="gasmessage.f_police_gas"  >
             </div>
           </div>
        </div>
        <div class="row auto" style="margin-top:10px;margin-left: 0px; margin-right: 0px;">

          <div class="form-group form-input-group col-sm-4" :class="[$v.f_alias.required ? 'has-error' : 'has-success']">
            <label for="f_alias" class="col-sm-2 control-label">别名:</label>
            <div class="col-sm-2" >
              <input class="form-control"  type="text" v-model="gasmessage.f_alias" v-validate:f_alias='{required: true }'>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_overdr_lines" class="col-sm-2 control-label">透支额度:</label>
            <div class="col-sm-2">
              <input class="form-control"  type="number" v-model="gasmessage.f_overdr_lines"  >
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_checkout_limit" class="col-sm-2 control-label">校检年限:</label>
            <div class="col-sm-2" >
              <input class="form-control"  type="number" v-model="gasmessage.f_checkout_limit">
            </div>
          </div>

        </div>
        <div class="row auto" style="margin-top:10px;margin-left: 0px; margin-right: 0px;">

          <div class="form-group form-input-group col-sm-4" v-if="gasmessage.f_meter_type[0].includes('卡表')">
            <label for="f_card_password"  class="col-sm-2 control-label" v-if="gasmessage.f_meter_type[0] !=='机表'">卡密码:</label>
            <div class="col-sm-2">
              <input class="form-control"  type="text" v-model="gasmessage.f_card_password"  >
            </div>
          </div>
          <div v-if="gasmessage.f_meter_type[0].includes('卡表')">
            <div class="form-group form-input-group col-sm-4">
              <label for="f_isdecimal" class="col-sm-2 control-label">支持小数:</label>
              <div class="col-sm-2" >
                <v-select :value.sync="gasmessage.f_isdecimal"
                   v-model="gasmessage.f_isdecimal"
                   :options='isdecimal' placeholder='是否支持小数'
                   v-model="gasmessage.f_isdecimal"
                   close-on-select></v-select>
              </div>
            </div>
            <div class="form-group form-input-group col-sm-4">
              <label for="f_isdecimal" class="col-sm-2 control-label">支付方式:</label>
              <div class="col-sm-2" >
                <v-select :value.sync="gasmessage.f_collection_type"
                   v-model="gasmessage.f_collection_type"
                   :options='collectiontypes' placeholder='支付方式'
                   v-model="gasmessage.f_collection_type"
                   close-on-select :disabled='colletype'></v-select>
              </div>
            </div>
          </div>
        </div>
        <p class="bg-info text-center" style="padding: 8px;">气表型号</p>
        <div style="flex: 1" class="span">
          <add-gas-model-info v-on:toggle = "getArrParam" :data = "gasmessage" @self-valid='valida' v-ref:addgasmodel> </add-gas-model-info>
        </div>
        <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
          <button class="btn btn-success " @click="confirm()" title="演示系统暂不支持" :disabled="true" v-if ='isConfirm'>保存</button>
          <button class="btn btn-success " @click="modify()" title="演示系统暂不支持" :disabled="true" v-if ='isModify' >修改</button>
          <button class="btn btn-default " @click="cancel()" >取消</button>
        </div>
      </form>
    </validator>
  </div>
</template>
<script>

/**
*阶梯气价管理组件
*/
export default {
  title: '修改气表品牌',
  data () {
    return {
      model: {},
      addGasModelArray: [],
      isConfirm: true,
      isModify: false,
      gasmessage: {
        id: '',
        f_meter_type: '',
        f_isdecimal: '否'
      },
      modelvalid: false, // 验证型号

      colletype: false,
      isdecimal: [{label: '是', value: '是'}, {label: '否', value: '否'}],
      collectiontypes: [{label: '按金额', value: '按金额'}, {label: '按气量', value: '按气量'}],
      meterType: this.$appdata.getParam('气表类型')
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.judgeInitValue(val)
    },
    'gasmessage.f_meter_type' (val) {
      if (this.gasmessage.f_meter_type[0] === '金额卡表') {
        this.gasmessage.f_collection_type = ['按金额']
        this.colletype = true
      } else {
        this.colletype = false
      }
    }
  },
  ready () {
    console.log(4)
    this.judgeInitValue(this.data)
  },
  methods: {
    getArrParam () {
      this.addGasModelArray = this.$refs.addgasmodel.addGasModelArr
      for (var i = 0; i < this.addGasModelArray.length; i++) {
        this.addGasModelArray[i].f_type = this.addGasModelArray[i].type[0]
        if(this.gasmessage.f_meter_type[0] === '物联网表'){
          this.addGasModelArray[i].f_billing = this.addGasModelArray[i].f_billing[0]
          this.addGasModelArray[i].f_calculation = this.addGasModelArray[i].f_calculation[0]
          this.addGasModelArray[i].f_coding = ''
        }else{
          this.addGasModelArray[i].f_size_card = this.addGasModelArray[i].cardsize[0]
        }
      }
    },
    judgeInitValue (val) {
      if (!this.isEmpty(val)) {
        this.gasmessage = Object.assign({}, this.gasmessage, val)
        this.gasmessage.f_meter_type = [this.gasmessage.f_meter_type]
        this.gasmessage.f_isdecimal = this.gasmessage.f_isdecimal ? [this.gasmessage.f_isdecimal] : ['否']
        this.gasmessage.f_collection_type = this.gasmessage.f_collection_type ? [this.gasmessage.f_collection_type] : ''
        this.isConfirm = false
        this.isModify = true
      } else {
        this.initgasmessage()
        this.isConfirm = true
        this.isModify = false
      }
    },
    confirm () {
      this.model = Object.assign({}, this.gasmessage)
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.model.f_isdecimal = this.model.f_isdecimal[0]
      this.model.f_collection_type = this.model.f_collection_type[0]
      this.getArrParam()
      this.$LogicService.addGasBrand(this.model, this.addGasModelArray)
      .then(
        (res) => {
          this.$dispatch('success', '气表品牌增加', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '气表品牌增加', this.data, error)
        }
      )
      this.data = {}
    },
    transfer () {
      this.model.f_isdecimal = this.model.f_isdecimal[0]
      this.model.f_collection_type = this.model.f_collection_type[0]
      this.$LogicService.modifyGasBrand(this.model, this.addGasModelArray)
      .then(
        (res) => {
          this.$dispatch('success', '气表品牌修改', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '气表品牌修改', this.data, error)
        }
      )
    },
    cancel () {
      this.$dispatch('close')
    },
    valida (bool) {
      this.modelvalid = bool
    },
    modify () {
      this.model = Object.assign({}, this.gasmessage)
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.getArrParam()
      this.transfer()
      this.data = {}
    },
    initgasmessage () {
      this.gasmessage = {
        f_meter_type: [],
        f_isdecimal: '否',
        f_collection_type: []
      }
    },
    isEmpty (value) {
      for (let name in value) {
        return false
      }
      return true
    }
  }
}
</script>
