<template>
  <div class="flex-auto"  style="height: 60%;overflow-y: scroll;">
    <validator name='v'>
      <form novalidate class="form-horizontal select-overspread ">
        <ul class="nav nav-tabs">
          <li class="active a-tabs"><a href="#">区域状态记录查看</a></li>
        </ul>
        <div>
          <div class="row">
            <div class="col-sm-4 form-group"  :class="[$v.f_area_name.required ? 'has-error' : 'has-success']">
              <label for="f_area_name" class="font_normal_body">区域名称</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:60%"
                     v-model="model.f_area_name" :disabled="true"
                     v-validate:f_area_name='{required: true }'  placeholder="区域名称">
            </div>
            <div class="col-sm-4 form-group" :class="[$v.f_air_state.required ? 'has-error' : 'has-success']">
              <label for="f_airstate" class=" font_normal_body">供气状态</label>
              <v-select
                v-model="model.f_air_state"
                :value.sync="model.f_air_state"
                :options='airstateoptions'
                value-single
                close-on-select>
              </v-select>
            </div>
            <div class="col-sm-4 form-group"  :class="[$v.f_user_phone.required ? 'has-error' : 'has-success']">
              <label for="f_user_phone" class="font_normal_body">联系电话</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:60%"
                     v-model="model.f_user_phone"  :disabled="true"
                     v-validate:f_user_phone='{required: true }'  placeholder="联系电话">
            </div>
            <div class="col-sm-12 "   :class="[$v.f_describe.required ? 'has-error' : 'has-success']">
              <label for="f_describe" class=" font_normal_body">范围详述</label>
              <textarea class="form-control"   style="width:86.5%"   v-validate:f_describe='{required: true }'
                     v-model="model.f_describe" rows="6"
                        placeholder="范围详述"></textarea>
            </div>
            <div class="col-sm-4 " style="margin-bottom: 5px;"   >
              <label for="f_consult_phone" class="font_normal_body">咨询电话</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:86%"
                     v-model="model.f_consult_phone"
                     v-validate:f_change_type='{required: true }'  placeholder="咨询电话">
            </div>
            <div class="col-sm-4 form-group"  :class="[$v.f_operator.required ? 'has-error' : 'has-success']">
              <label for="f_operator" class="font_normal_body">登&nbsp;&nbsp;记&nbsp;人</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:60%"
                     v-model="model.f_operator" readonly
                     v-validate:f_operator='{required: true }'  placeholder="登记人">
            </div>
            <div class="col-sm-4 form-group"  :class="[$v.f_operate_date.required ? 'has-error' : 'has-success']">
              <label for="f_operate_date" class=" font_normal_body">登记时间</label>
              <input v-show="false" type="text"  v-model="model.f_operate_date"  v-validate:f_operate_date='{required: true }' >
              <datepicker placeholder="变更时间"
                          style="width:60%"
                          class="datepicker" disabled
                          v-model="model.f_operate_date"
                          :value.sync="model.f_operate_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>
          </div>
          <div style="text-align:right;height:auto;margin-top:6px;">
            <button class="button_export"  type="button"  style="width:80px;" @click="close()">取消</button>
          </div>
        </div>

      </form>


    </validator>

  </div>
</template>
<script>
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'

  export default {
    title: '变更区域记录',
    props: {
      f_islow_income: {
        type: String,
        default: '1'
      },
      data: {
        type: Object
      }
    },
    data () {
      return {
        pricename: [{value: '', label: ''}],
        model: {
          f_area_name: '',
          f_air_state: '',
          f_describe: '',
          f_consult_phone:'',
          f_change_reason: '',
          f_change_date: '',
          f_change_operator: '',
          f_user_phone: '',
          f_change_comments: '',
          f_change_type:'',
          f_operator:  this.$login.f.name,
          f_operate_date: this.$login.toStandardTimeString()
        },
        f_filialeid: '',  // 所属公司
        f_filialename: '',  // 所属公司名称
        airstateoptions: this.$appdata.getParam('供气状态'),
      }
    },
    ready () {
      if (this.data) {
        this.model = Object.assign({},this.model,this.data);
      }
    },
    watch: {
      'data' (val) {
        if (val) {
          this.initModel();
          this.model = Object.assign({},this.model,val);
        }
      }
    },
    methods: {
      getorg (id, name) {
        this.f_filialeid = id[0]
        this.f_filialename = name[0]
      },
      initModel () {
        this.model = {
          f_area_name: '',
          f_air_state: '',
          f_describe: '',
          f_change_reason: '',
          f_change_date: '',
          f_change_operator: '',
          f_user_phone: '',
          f_change_comments: '',
          f_change_type:'',
          // 限购金额
          f_operator: this.$login.f.name,
          f_operate_date: this.$login.toStandardTimeString(),
        }
      },
      close () {
        this.$dispatch('close')
      }
    }
  }
</script>
<style lang="less">
  #gas-price-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }

</style>
