<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  novalidate class="form-horizontal select-overspread container-fluid auto">
         <div class="row" >
           <div class="col-sm-4" :class="[$v.f_meter_brand.required ? 'has-error' : 'has-success']">
             <label for="f_meter_brand"  class="font_normal_body">气表品牌</label>
               <input class="input_search" style="width: 60%"  type="text" v-model="gasmessage.f_meter_brand" v-validate:f_meter_brand="['required']">
           </div>

           <div class="col-sm-4" :class="[$v.metertype.required ? 'select-error' : '']">
             <label for="f_meter_type" class="font_normal_body">气表类型</label>
               <input type="text" class="input_search" style="width: 60%" 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 style="width: 60%"></v-select>
           </div>
           <div class="col-sm-4">
             <label for="f_police_gas" class="font_normal_body">报警气量</label>
               <input class="input_search" style="width: 60%" type="number" v-model="gasmessage.f_police_gas"  >
           </div>
          <div class="col-sm-4" :class="[$v.f_alias.required ? 'has-error' : 'has-success']">
            <label for="f_alias" class="font_normal_body">&nbsp;&nbsp;&nbsp;别名&nbsp;&nbsp;&nbsp;</label>
              <input class="input_search" style="width: 60%" type="text" v-model="gasmessage.f_alias" v-validate:f_alias='{required: true }'>
          </div>
          <div class="col-sm-4">
            <label for="f_overdr_lines" class="font_normal_body">透支额度</label>
            <input class="input_search" style="width: 60%" type="number" v-model="gasmessage.f_overdr_lines"  >
          </div>
          <div class="col-sm-4">
            <label for="f_collection_type" class="font_normal_body">缴费方式</label>
            <v-select :value.sync="gasmessage.f_collection_type"
                      v-model="gasmessage.f_collection_type"
                      :options='collectiontypes' placeholder='缴费方式'
                      close-on-select :disabled='colletype'  style="width: 60%"></v-select>
          </div>
          <div class="col-sm-4" v-if="!gasmessage.f_meter_type[0].includes('物联网')">
            <label for="f_isdecimal" class="font_normal_body">支持小数</label>
              <v-select :value.sync="gasmessage.f_isdecimal"
                        v-model="gasmessage.f_isdecimal"
                        :options='isdecimal' placeholder='是否支持小数'
                        close-on-select style="width: 60%"></v-select>
          </div>
         <div class="col-sm-4" v-if="gasmessage.f_meter_type[0].includes('物联网')" :class="[$v.calculation.required ? 'select-error' : '']">
           <label for="f_calculation" class="font_normal_body">结算方式</label>
           <input type="text" v-show="false" v-model="$refs.calculation.selectedItems" v-validate:calculation='{required: true }'>
           <v-select :value.sync="gasmessage.f_calculation" :width="'60%'" :options='calculation' placeholder='结算方式' close-on-select v-ref:calculation>
           </v-select>
         </div>
         <div class="col-sm-4" v-if="gasmessage.f_meter_type[0].includes('物联网')">
           <label for="f_hascard" class="font_normal_body">是否带卡</label>
           <div style="float: right;width:60%;margin: auto">
             <input type="radio"  value="是" v-model="gasmessage.f_hascard">
             <label for="true" class="font_normal_body">是</label>
             <input type="radio"  value="否" v-model="gasmessage.f_hascard">
             <label for="false" class="font_normal_body">否</label>
           </div>
         </div>
           <div class="col-sm-4" v-if="gasmessage.f_meter_type[0].includes('物联网') && gasmessage.f_hascard==='是'">
             <label for="f_hascard" class="font_normal_body">是否共用次数</label>
             <div style="float: right;width:50%;margin: auto">
               <input type="radio"  value="是" v-model="gasmessage.f_share_times">
               <label for="true" class="font_normal_body">是</label>
               <input type="radio"  value="否" v-model="gasmessage.f_share_times">
               <label for="false" class="font_normal_body">否</label>
             </div>
           </div>
           <div class="col-sm-4" v-if="gasmessage.f_meter_type[0].includes('气量卡表')">
             <label for="hasCard" class="font_normal_body">支持蓝牙</label>
             <div style="float: right;width:60%;margin: auto">
               <input type="radio" value="是" v-model="gasmessage.f_support_bluetooth">
               <label class="font_normal_body">是</label>
               <input type="radio" value="否" v-model="gasmessage.f_support_bluetooth">
               <label  class="font_normal_body">否</label>
             </div>
           </div>
          <div v-if="gasmessage.f_meter_type[0].includes('卡表') || gasmessage.f_hascard==='是'">
            <div class="col-sm-4" :class="[$v.f_cardnumber.required ? 'has-error' : 'has-success']">
              <label for="f_card_password"  class="font_normal_body">&nbsp;&nbsp;&nbsp;卡号&nbsp;&nbsp;&nbsp;</label>
              <input class="input_search" style="width: 60%" type="text" v-model="gasmessage.f_cardnumber"  v-validate:f_cardnumber='{required: true }'>
            </div>
            <div class="col-sm-4" >
              <label for="f_card_password"  class="font_normal_body">&nbsp;&nbsp;&nbsp;卡密码</label>
              <input class="input_search" style="width: 60%" type="text" v-model="gasmessage.f_card_password"  >
            </div>
          </div>
           <div class="col-sm-12">
             <label  class="font_normal_body " style="margin-top:-20px">&nbsp;&nbsp;&nbsp;备注&nbsp;&nbsp;&nbsp;</label>
             <textarea class="input_textarea" rows="3" style="width:87%;margin-top:5px" v-model="gasmessage.f_comments"></textarea>
           </div>
         </div>
        <p class="bg-info text-center" style="padding: 8px;">气表型号</p>
        <add-gas-model :data="gasmessage"  :modelvalid.sync="modelvalid" v-on:toggle = "getArrParam"   v-ref:addgasmodel></add-gas-model>
        <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
          <button type="button" class="button_search " @click="confirm()" :disabled='!($v.valid && modelvalid) ' v-if ='isConfirm'>保存</button>
          <button type="button" class="button_search " @click="modify()" :disabled='!($v.valid && modelvalid)' v-if ='isModify' >修改</button>
          <button type="button" class="button_search " @click="delMeter()" v-if='data.counts===0 && isModify'>删除</button>
          <button type="button" class="button_clear" @click="cancel()" >取消</button>
        </div>
      </form>
    </validator>
  </div>
</template>
<script>

import ViewOrg from "./ViewOrg";
import AddGasModel from "./AddGasModel";
/**
*阶梯气价管理组件
*/
export default {
  components: {AddGasModel, ViewOrg},
  title: '修改气表品牌',
  data () {
    return {
      model: {},
      addGasModelArray: [],
      isConfirm: true,
      isModify: false,
      gasmessage: {
        id: '',
        f_meter_type: '',
        f_isdecimal: [],
        f_meter_brand: '',
        f_alias: '',
        f_calculation:'',
        f_comments:'',
        f_hascard:'否',
        f_support_bluetooth:"否",
        f_share_times:'否'
      },
      modelvalid: false, // 验证型号
      colletype: false,
      // 默认分公司显示
      defaultOrg: [],
      // 记录使用改气表的分公司
      useOrg: [],
      // 分公司详情展示
      orgShow: false,

      isdecimal: [{label: '否', value: '否'},{label: '是', value: '是'}],
      collectiontypes: [{label: '按金额', value: '按金额'}, {label: '按气量', value: '按气量'}],
      meterType: [{label: '金额卡表', value: '金额卡表'}, {label: '气量卡表', value: '气量卡表'},{label: '机表', value: '机表'},{label: '物联网表', value: '物联网表'}],
      calculation: [{label: '表端结算', value: '表端结算'}, {label: '系统结算', value: '系统结算'}],
    }
  },
  props: ['data', 'f_filialeid'],
  watch: {
    'data' (val) {
      this.judgeInitValue(val)
    },
    'gasmessage.f_meter_type' (val) {
      if (val.length > 0) {
        if (this.gasmessage.f_meter_type[0].includes('卡表')) {
          if (this.gasmessage.f_meter_type[0] === '金额卡表') {
            this.gasmessage.f_collection_type = ['按金额']
            this.colletype = true
          } else {
            // this.gasmessage.f_collection_type = ['按气量']
            this.colletype = false
          }
          this.model.f_isdecimal = ['否']
        }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] === '物联网表'){
        }else{
          this.addGasModelArray[i].f_size_card = this.addGasModelArray[i].cardsize[0]
        }
      }
    },
    async judgeInitValue (val) {
      this.initgasmessage()
      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.gasmessage.f_calculation = this.gasmessage.f_calculation ? [this.gasmessage.f_calculation]:''
        this.isConfirm = false
        this.gasmessage.f_hascard = this.gasmessage.f_hascard ? this.gasmessage.f_hascard :'否'
        this.gasmessage.f_share_times = this.gasmessage.f_share_times ? this.gasmessage.f_share_times : '否'
        this.gasmessage.f_support_bluetooth = this.gasmessage.f_support_bluetooth ? this.gasmessage.f_support_bluetooth : '否'
        this.isModify = true
      } else {
        this.defaultOrg = [this.f_filialeid]
        this.isConfirm = true
        this.isModify = false
      }
      this.$resetValidation()

    },
    confirm () {
      this.model = Object.assign({}, this.gasmessage)
      console.log(this.model,"=========================")
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.model.f_isdecimal = this.model.f_meter_type.includes('物联网')?'是':this.model.f_isdecimal[0]
      this.model.f_collection_type = this.model.f_collection_type[0]
      this.model.f_calculation = this.model.f_calculation[0]
      this.model.useOrg = this.useOrg
      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 = {}
    },
    getorg (val) {
      this.useOrg = val
    },
    delMeter () {
      this.$showMessage(`确定要将气表品牌${this.data.f_meter_brand}删除吗？`, ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          this.$LogicService.delGasBrand(this.data)
            .then(
              (res) => {
                this.$dispatch('success')
              }
            ).catch(
            (error) => {
              this.$dispatch('error', '气表品牌删除', this.data, error)
            }
          )
        }
      })
    },
    transfer () {
      console.log("+++++++++++++",this.model)
      if(this.model.f_meter_type !== '物联网表'){
        this.model.f_hascard ='否'
        this.model.f_share_times = '否'
      }
      if(this.model.f_meter_type !== '气量卡表'){
        this.model.f_support_bluetooth = '否'
      }
      this.model.f_isdecimal = this.model.f_isdecimal[0]
      this.model.f_collection_type = this.model.f_collection_type[0]
      this.model.f_calculation = this.model.f_calculation[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)
      console.log(this.model.f_hascard,"==============")
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.getArrParam()
      this.transfer()
      this.data = {}
    },
    initgasmessage () {
      this.gasmessage = {
        f_meter_brand: '',
        f_meter_type: [],
        f_isdecimal: [],
        f_collection_type: [],
        f_alias: '',
        f_calculation:'',
        f_comments:'',
        f_cardnumber: '',
        f_card_password:'',
        f_hascard: '否',
        f_support_bluetooth: '否',
        f_police_gas:'',
        f_overdr_lines:'',
        f_share_times:'否'
      }
    },
    isEmpty (value) {
      for (let id in value) {
        return false
      }
      return true
    },

    viewOrg () {
      this.orgShow = true
    }
  }
}
</script>
