<template>
  <div class="auto select-overspread" style="padding-left: 10px;">
    <ul class="nav nav-tabs" style="margin-bottom: 10px">
      <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 form-group" :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 form-group" :class="[$v.metertype.required ? 'has-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 form-group" :class="[$v.f_alias.required ? 'has-error' : 'has-success']">
            <label for="f_alias" class="font_normal_body">别&emsp;&emsp;名</label>
            <input class="input_search" style="width: 60%" type="text" v-model="gasmessage.f_alias"
                   v-validate:f_alias='{required: true }' @blur="getInitMeterParamBefore">
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_checkout_limit" class="font_normal_body ">校检年限</label>
            <input class="input_search" style="width: 60%" type="number" v-model="gasmessage.f_checkout_limit">
          </div>
          <div class="col-sm-4 form-group">
            <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 form-group">
            <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 form-group" v-if="gasmessage.f_isdecimal[0] ==='是'">
            <label for="f_isdecimal" class="font_normal_body">气量位数</label>
            <v-select :value.sync="gasmessage.f_gas_decimal"
                      v-model="gasmessage.f_gas_decimal"
                      :value-single="true"
                      :search="false"
                      :options='decimalArray' placeholder='气量位数'
                      close-on-select style="width: 60%"></v-select>
          </div>
          <div class="col-sm-4 form-group" v-if="gasmessage.f_isdecimal[0] ==='是'">
            <label for="f_isdecimal" class="font_normal_body">金额位数</label>
            <v-select :value.sync="gasmessage.f_fee_decimal"
                      v-model="gasmessage.f_fee_decimal"
                      :value-single="true"
                      :search="false"
                      :options='decimalArray' placeholder='金额位数'
                      close-on-select style="width: 60%"></v-select>
          </div>
          <div class="col-sm-4 form-group" 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 form-group" v-if="gasmessage.f_meter_type[0].includes('物联网') && gasmessage.f_calculation.length
                                                && gasmessage.f_calculation[0] == '表端结算'">
            <label for="f_calculation" class="font_normal_body">系统结算</label>
            <v-select :value.sync="gasmessage.f_system_settlement" :width="'60%'"
                      v-model="gasmessage.f_system_settlement"
                      :search="false"
                      :options='isdecimal' placeholder='系统是否结算' close-on-select>
            </v-select>
          </div>
          <div class="col-sm-4 form-group" v-if="gasmessage.f_meter_type[0].includes('物联网')">
            <label for="f_hascard" class="font_normal_body">是否带卡</label>

            <v-select :value.sync="gasmessage.f_hascard"
                      v-model="gasmessage.f_hascard"
                      :options='isdecimal' placeholder='是否带卡'
                      close-on-select style="width: 60%"></v-select>

          </div>
          <div class="col-sm-4 form-group"
               v-if="gasmessage.f_meter_type[0].includes('物联网') && gasmessage.f_hascard[0]==='是'">
            <label for="f_hascard" class="font_normal_body">共用次数</label>

            <v-select :value.sync="gasmessage.f_share_times"
                      v-model="gasmessage.f_share_times"
                      :options='isdecimal' placeholder='是否共用次数'
                      close-on-select style="width: 60%"></v-select>

          </div>
          <div class="col-sm-4 form-group"
               v-if="gasmessage.f_meter_type[0].includes('物联网') && gasmessage.f_hascard[0]==='是'">
            <label for="f_hascard" class="font_normal_body">共用开户</label>

            <v-select :value.sync="gasmessage.f_share_open"
                      v-model="gasmessage.f_share_open"
                      :value-single="true"
                      :options='isdecimal' placeholder='是否共用开户'
                      close-on-select style="width: 60%"></v-select>

          </div>
          <div class="col-sm-4 form-group" v-if="gasmessage.f_meter_type[0].includes('气量卡表')">
            <label for="hasCard" class="font_normal_body">支持蓝牙</label>

            <v-select :value.sync="gasmessage.f_support_bluetooth"
                      :value-single="true"
                      v-model="gasmessage.f_support_bluetooth"
                      :options='isdecimal' placeholder='是否支持蓝牙'
                      close-on-select style="width: 60%"></v-select>

          </div>
          <div class="col-sm-4 form-group"
               v-if="gasmessage.f_meter_type[0].includes('卡表')||gasmessage.f_meter_type[0].includes('物联网表')">
            <label for="hasCard" class="font_normal_body">是否累购</label>
            <v-select :value.sync="gasmessage.f_support_purchase"
                      :value-single="true"
                      v-model="gasmessage.f_support_purchase"
                      :options='isdecimal' placeholder='是否支持累购'
                      close-on-select style="width: 60%"></v-select>
          </div>
          <div class="col-sm-4 form-group" v-if="gasmessage.f_meter_type[0].includes('物联网表')">
            <label for="hasCard" class="font_normal_body">是否扣费</label>
            <v-select :value.sync="gasmessage.f_issupport_feededuction"
                      :value-single="true"
                      v-model="gasmessage.f_issupport_feededuction"
                      :options='isdecimal' placeholder='是否支持扣费'
                      close-on-select style="width: 60%"></v-select>
          </div>
          <div v-if="gasmessage.f_meter_type[0].includes('卡表') || gasmessage.f_hascard[0]==='是'" class="row">
            <div class="col-sm-4 form-group" :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 form-group">
              <label for="f_card_password" class="font_normal_body">卡&ensp;密&ensp;码</label>
              <input class="input_search" style="width: 60%" type="text" v-model="gasmessage.f_card_password">
            </div>
          </div>

          <div class="col-sm-4 form-group">
            <label class="font_normal_body ">优&ensp;先&ensp;级</label>
            <input class="input_search" placeholder="优先级" style="width:60%" type="text"
                   v-model="gasmessage.f_priority">
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_is_check" class="font_normal_body">是否校验</label>
            <v-select :value.sync="gasmessage.f_is_check"
                      v-model="gasmessage.f_is_check"
                      :options='ischeck' placeholder='是否校验'
                      close-on-select style="width: 60%"></v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_is_step" class="font_normal_body">支持阶梯</label>
            <v-select :value.sync="gasmessage.f_is_step"
                      v-model="gasmessage.f_is_step"
                      :options='isstep' placeholder='是否支持阶梯'
                      close-on-select style="width: 60%"></v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label for="f_is_step" class="font_normal_body">表计验证</label>
            <v-select :value.sync="gasmessage.f_meterverification" value-single
                      v-model="gasmessage.f_meterverification"
                      :options='isstep' placeholder='是否表计强验证'
                      close-on-select style="width: 60%"></v-select>
          </div>
          <div class="col-sm-4 form-group">
            <label class="font_normal_body ">表号长度</label>
            <input class="input_search" placeholder="表号长度" style="width:60%" type="number"
                   v-model="gasmessage.f_meternumber_len">
          </div>
          <div class="col-sm-4 form-group" v-if="gasmessage.f_meter_type[0].includes('卡表')">
            <label for="hasCard" class="font_normal_body">动&ensp;态&ensp;库<br/>到&ensp;期&ensp;日</label>
            <datepicker placeholder="动态库到期日" style="width: 60%"
                        v-model="gasmessage.f_dynamic_expire"
                        :value.sync="gasmessage.f_dynamic_expire"
                        :format="'yyyy-MM-dd'">
            </datepicker>
          </div>


          <div class="col-sm-12 form-group" style="height: auto !important;">
            <label class="font_normal_body " style="margin-top:-20px">备&emsp;&emsp;注</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;margin: 8px">气表型号</p>
        <add-gas-model :data="gasmessage" :modelvalid.sync="modelvalid" v-on:toggle="getArrParam"
                       v-ref:addgasmodel></add-gas-model>
        <add-gas-meter-init-param :alias="alias"
                                  :show="meterInitParamShow"
                                  :paramstring="gasmessage.f_init_param"
                                  v-if="meterInitParamShow"
                                  >
        </add-gas-meter-init-param>
        <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 " v-if="permission('设置气表初始参数')"
                  @click="meterInitParamClick()">设置气表初始参数
          </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 '../../../../../components/revenue/comprehen/gasbrand/ViewOrg'
import AddGasModel from './AddGasModel'
import {HttpResetClass} from 'vue-client'

/**
 *阶梯气价管理组件
 */
export default {
  components: {AddGasModel, ViewOrg},
  title: '修改气表品牌',
  data () {
    return {
      model: {},
      addGasModelArray: [],
      isConfirm: true,
      isModify: false,
      gasmessage: {
        id: '',
        f_meter_type: '',
        f_isdecimal: [],
        f_gas_decimal: 4,
        f_fee_decimal: 4,
        f_meter_brand: '',
        f_alias: '',
        f_calculation: '',
        f_comments: '',
        f_hascard: '',
        f_support_bluetooth: '',
        f_support_purchase: '',
        f_issupport_feededuction: '',
        f_system_settlement: '',
        f_share_times: '',
        f_share_open: '',
        f_priority: 100,
        f_is_check: [],
        f_is_step: [],
        f_meterverification: '',
        f_meternumber_len: '',
        f_init_param: '',
        f_dynamic_expire: ''
      },
      alias: '',
      modelvalid: false, // 验证型号
      colletype: false,
      meterInitParamShow: false,
      // 默认分公司显示
      defaultOrg: [],
      // 记录使用改气表的分公司
      useOrg: [],
      // 分公司详情展示
      orgShow: false,
      ischeck: [{label: '否', value: '否'}, {label: '是', value: '是'}],
      isstep: [{label: '否', value: '否'}, {label: '是', value: '是'}],
      isdecimal: [{label: '否', value: '否'}, {label: '是', value: '是'}],
      decimalArray: [{label: 1, value: 1}, {label: 2, value: 2}, {label: 3, value: 3}, {label: 4, value: 4}],
      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.colletype = true
            this.gasmessage.f_collection_type = ['按金额']
          } else {
            this.colletype = true
            this.gasmessage.f_collection_type = ['按气量']
          }
        } else {
          // this.gasmessage.f_collection_type =['按金额']
          this.colletype = false
        }
      }
    }
  },
  ready () {
    console.log(4)
    this.judgeInitValue(this.data)
  },
  events: {
    'init-param-cancel' () {
      this.meterInitParamShow = false
      this.alias = ''
    },
    'init-param-confirm' (val) {
      this.gasmessage.f_init_param = val
      this.meterInitParamShow = false
      this.alias = ''
    }
  },
  methods: {
    permission (name) {
      if (!this.$login.r.find(value => value == name)) {
        return false
      }
      return true
    },
    meterInitParamClick () {
      if (this.gasmessage.f_meter_type[0] !== '物联网表') {
        this.$showMessage('只有物联网表才可以设置气表初始参数！！！', ['confirm'])
        return
      }
      if (!this.gasmessage.f_alias) {
        this.$showMessage('请输入气表别名！！！', ['confirm'])
        return
      }
      this.alias = this.gasmessage.f_alias
      this.meterInitParamShow = true
    },
    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)
        console.log('========this.gasmessage=======>', this.gasmessage)
        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_is_check = this.gasmessage.f_is_check ? [this.gasmessage.f_is_check] : []
        this.gasmessage.f_is_step = this.gasmessage.f_is_step ? [this.gasmessage.f_is_step] : []
        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.gasmessage.f_system_settlement = this.gasmessage.f_system_settlement ? [this.gasmessage.f_system_settlement] : ''
        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_share_open = this.gasmessage.f_share_open ? this.gasmessage.f_share_open : 0
        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_is_check = this.model.f_is_check[0]
      this.model.f_is_step = this.model.f_is_step[0]
      this.model.f_hascard = this.model.f_hascard[0]
      this.model.f_share_open = this.model.f_share_open ? this.model.f_share_open : ''
      this.model.f_share_times = this.model.f_share_times[0]
      this.model.f_support_bluetooth = this.model.f_support_bluetooth[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_collection_type[0]: ''
      this.model.f_calculation = this.model.f_calculation[0] ? this.model.f_calculation[0] : ''
      this.model.f_system_settlement = this.model.f_system_settlement ? this.model.f_system_settlement[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) => {
                let http = new HttpResetClass()
                http.load('POST', 'rs/logic/delSaleInitData', {data: {}}, {resolveMsg: null, rejectMsg: null})
                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.model.f_system_settlement = this.model.f_system_settlement[0]
      this.$LogicService.modifyGasBrand(this.model, this.addGasModelArray)
        .then(
          (res) => {
            let http = new HttpResetClass()
            http.load('POST', 'rs/logic/delSaleInitData', {data: {}}, {resolveMsg: null, rejectMsg: null})
            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.model.f_is_check = this.model.f_is_check[0]
      this.model.f_is_step = this.model.f_is_step[0]
      this.model.f_hascard = this.model.f_hascard[0]
      this.model.f_share_open = this.model.f_share_open ? this.model.f_share_open : ''
      this.model.f_share_times = this.model.f_share_times[0]
      this.model.f_support_bluetooth = this.model.f_support_bluetooth[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_support_purchase: '',
        f_issupport_feededuction: '',
        f_police_gas: '',
        f_overdr_lines: '',
        f_share_times: '',
        f_gas_decimal: 4,
        f_fee_decimal: 4,
        f_is_check: [],
        f_is_step: []
      }
    },
    isEmpty (value) {
      for (let id in value) {
        return false
      }
      return true
    },

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