<template>
  <div class="auto">
    <validator name='m'>
      <form novalidate class="form-horizontal select-overspread">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">表具信息</a></li>
        </ul>
        <div class="form-group">
          <div :class="[$m.f_meternumber.required ? 'has-error' : 'has-success']">
            <label for="f_meternumber" class=" col-sm-2 control-label">表号</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_meternumber"
                     v-validate:f_meternumber='{required:true}' placeholder="表具号" :readonly="!isEdit"/>
            </div>
          </div>
          <div :class="[$m.f_metertitles.required ? 'has-error' : 'has-success']">
            <label for="f_metertitles" class=" col-sm-2 control-label">表封号</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_metertitles"
                     v-validate:f_metertitles='{required:true}' placeholder="表具封号" :readonly="!isEdit"/>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div :class="[$m.f_barcode.required ? 'has-error' : 'has-success']">
            <label for="f_barcode" class=" col-sm-2 control-label">条码号</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_barcode"
                     v-validate:f_barcode='{required:true}' placeholder="表具条码号" :readonly="!isEdit"/>
            </div>
          </div>
          <div :class="[$m.f_gasbrand_id.required ? 'has-error' : 'has-success']">
            <input type="text" v-show="false" v-model="$refs.brand.selectedItems" :readonly="!isEdit"
                   v-validate:f_gasbrand_id='{required: true }'>
            <label for="f_gasbrand_id" class=" col-sm-2 control-label">气表品牌</label>
            <div class="col-sm-3">
              <v-select :value.sync="model.f_gasbrand"
                        :options='meterbrands'
                        placeholder='气表品牌'
                        v-model='model.f_gasbrand'
                        v-ref:brand close-on-select>
              </v-select>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div :class="[$m.f_gasmodel_id.required ? 'has-error' : 'has-success']">
            <input type="text" v-show="false" v-model="$refs.model.selectedItems" :readonly="!isEdit"
                   v-validate:f_gasmodel_id='{required: true }'>
            <label for="f_gasmodel_id" class=" col-sm-2 control-label">气表型号</label>
            <div class="col-sm-3">
              <v-select :value.sync="model.f_gasmodel"
                        :options='model.f_gasbrand[0].gasmodel'
                        placeholder='气表型号' close-on-select
                        v-model='model.f_gasmodel'
                        v-ref:model></v-select>
            </div>
          </div>
          <div :class="[$m.f_initial_base.required ? 'has-error' : 'has-success']">
            <label for="f_initial_base" class=" col-sm-2 control-label">初始表底数</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_initial_base" :readonly="!isEdit"
                     v-validate:f_initial_base='{required:true}' placeholder="初始表底数"/>
            </div>
          </div>
        </div>


        <div class="form-group">
          <div :class="[$m.f_real_base.required ? 'has-error' : 'has-success']">
            <label for="f_real_base" class=" col-sm-2 control-label">表具底数</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_real_base" :readonly="!isEdit"
                     v-validate:f_real_base='{required:true}' placeholder="表具底数"/>
            </div>
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;" v-if="model.f_state !== '无效'">
        <button class="btn btn-success" @click="confirm()" :disabled='!$m.valid'>确认
        </button>
        <button class="btn btn-default" @click="close()">取消
        </button>
      </div>
    </validator>
  </div>
</template>
<script>
  /**
   *阶梯气价管理组件
   */

  import co from 'co'

  let getDetailPriceGen = function* (self) {

  }

  export default {
    data() {
      return {
        model: '',
        isEdit: false
      }
    },
    props: ['data'],
    watch: {},
    ready() {
      this.model = Object.assign({}, this.model, this.data)
      this.isEdit = this.model.f_meter_state === '入库' || this.model.f_meter_state === '调拨'
      console.log("vvv", this.model)
    },
    methods: {
      initModel() {
        this.model = {
          f_meternumber: '',//表号
          f_metertitles: '',//表封号
          f_barcode: '',//表条码号
          f_gasbrand_id: '',//气表品牌
          f_gasmodel_id: '',//气表型号
          f_table_state: '',//表状态
          f_initial_base: '',//初始表底数
          f_real_base: '',//表底数
          f_meter_state: '入库'
        }
      },
      close() {
        this.$dispatch('close')
      },
      confirm() {
        this.$LogicService.saveMeter(this.model, this.data).then((res) => {
          this.$dispatch('success', '表具追溯', this.data, res)
        }).catch((error) => {
          this.$dispatch('error', '表具追溯', this.data, error)
        })
      }
    },
    computed: {
      meterbrands() {
        return this.$GetSaleParam.getGasbrand()
      }
    }
  }
</script>
<style lang="less">
  #meter-trace-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }

</style>
