<template>
  <div class="auto select-overspread">
    <validator name='v'>
      <ul class="nav nav-tabs" >
        <li role="presentation" class="active"><a href="#">银行信息</a></li>
      </ul>
      <form class="form-horizontal" style="margin-top:20px;flex: 1;">
        <div class="row">
          <div class="col-sm-6 form-group form-input-group"  :class="[$v.f_bank_name.required? 'has-error' : '']">
            <label for="f_adjustable_id" class="control-label">设备归属银行</label>
            <v-select :value.sync="model.f_bank_name" v-model="model.f_bank_name"
                      :options='f_bank_name' placeholder='银行名称'
                      close-on-select></v-select>
          </div>

          <div class="col-sm-6 form-group form-input-group"  :class="[$v.f_outlets.required? 'has-error' : '']">
            <label for="f_outlets" class="control-label">设备所在地</label>
            <v-select :value.sync="model.f_outlets" v-model="model.f_outlets"
                      :options='outlets' placeholder='设备所在地'
                      close-on-select></v-select>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 form-group form-input-group"   :class="[$v.f_terminal_num.required ? 'has-error' : '']">
            <label for="f_terminal_num" class="control-label">设备号</label>
            <input type="text"  v-model="model.f_terminal_num"  v-validate:f_terminal_num="{required: true }" class="form-control" placeholder="终端号" v-el:name v-next-el="address">
          </div>

          <div class="col-sm-6 form-group form-input-group"  :class="[$v.f_terminal_name.required ? 'has-error' : '']">
            <label for="f_terminal_name" class="control-label">设备名称</label>
            <input type="text" v-model="model.f_terminal_name" v-validate:f_terminal_name='{required: true }'
                   class="form-control" placeholder="设备名称" v-el:type v-next-el="street" >
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success " @click="confirm()" :disabled='!$v.valid' style="width:80px;margin-left:20px;" >保&nbsp;&nbsp;&nbsp;存</button>
        <button class="btn btn-default " @click="cancel()" style="width:80px;margin-left:20px;" >取&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>

  import co from 'co'

  let saveGen = async function (self) {
    try {
      await self.$resetpost('rs/entity/t_bankdocking', self.model, {resolveMsg: '终端保存成功。', rejectMsg: '终端保存失败!!!'})
      self.$dispatch('success')
    } catch (error) {
      self.$dispatch('error')
    }
  }

  export default {
    data () {
      return {
        model: {
          f_state:'启用'
        },
        areas: [],
        sliceArea: [],
      }
    },
    props: ['data'],
    watch: {
      'data' (val) {
        if (val) {
          this.datatomodel()
        }
      }
    },
    ready () {
      if (this.data) {
        this.datatomodel()
      }
    },
    methods: {
      confirm () {
        this.model.f_outlets = this.model.f_outlets[0]
        this.model.f_bank_name = this.model.f_bank_name[0]
        this.model.f_operator = this.$login.f.name
        console.log('保存银行数据', this.model)
        saveGen(this)
      },
      datatomodel () {
        this.$nextTick(() => {
          this.model = Object.assign({}, this.model,this.data)
          this.model.f_bank_name = [this.model.f_bank_name]
          this.model.f_outlets = [this.model.f_outlets]
        })
        console.log('修改数据', this.model)
      },
      cancel () {
        this.$dispatch('close')
      },
      modify () {
        this.model = Object.assign({}, this.gasmessage)
        this.model.f_meter_type = this.model.f_meter_type[0]
        this.data = {}
      },
      getBankinfo (val) {
        let getAll = getBankinfoGen(this, val)
        co(getAll)
      },
    },
    computed: {
      f_bank_name () {
        return this.$appdata.getParam('设备归属银行')
      },
      outlets () {
        return this.$appdata.getParam('设备所在地')
      }
    }
  }

  // 从资源服务获取的银行，这里用不着
  // let getBankinfoGen = function * (self, val) {
  //   let getAreas = yield self.$post('/rs/search', {source: 'tool.getChildrenOfResName($银行$)', userid: ''}, {resolveMsg: null, rejectMsg: null})
  //   getAreas.data.forEach((item, next) => {
  //     let temp = {}
  //     temp.label = item.name
  //     temp.value = item.id
  //     console.log(self.model.f_bank_name)
  //     if (item.name===self.model.f_bank_name) {
  //         self.areas.push(temp)
  //     }
  //   })
  //   console.log('wo要的是' +   self.areas)
  //   console.log(self.areas.length);
  //   self.model.f_state ='停用'
  //   self.model.f_bank_id = self.areas[0].value
  //   console.log('获取的id'+  self.model.f_bank_id )
  //   self.$resetpost('rs/entity/t_bankdocking', self.model, {resolveMsg: '终端保存成功。', rejectMsg: '保存失败!!!'})
  //   .then(
  //     (res) => {
  //       self.$dispatch('success', '终端保存成功', self.model, res)
  //     }
  //   ).catch(
  //     (error) => {
  //       self.$dispatch('error', '终端保存失败', self.model, error)
  //     }
  //   )
  // }
</script>


