<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_user_state.required ? 'has-error' : 'has-success']">
              <label for="f_area_name" class="font_normal_body">用户状态</label>
              <input v-show="false" type="text"  v-model="model.f_user_state"  v-validate:f_user_state='{required: true }' >
              <v-select
                v-model="model.f_user_state"
                :value.sync="model.f_user_state"
                :options='userstate'
                value-single
                close-on-select>
              </v-select>
            </div>
            <div class="col-sm-4 form-group"  :class="[$v.f_in_time.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_in_time"  v-validate:f_in_time='{required: true }' >
              <datepicker placeholder="入户时间"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.f_in_time"
                          :value.sync="model.f_in_time"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>
            <div class="col-sm-4 form-group"  :class="[$v.f_valve_wall.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_valve_wall"
                     v-validate:f_valve_wall='{required: true }'  placeholder="所属阀井">
            </div>
            <div class="col-sm-4 form-group"  :class="[$v.f_fdcard_id.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_fdcard_id"
                     v-validate:f_fdcard_id='{required: true }'  placeholder="防盗卡号">
            </div>
            <div class="col-sm-4 form-group" :class="[$v.f_check_type.required ? 'has-error' : 'has-success']">
              <label for="f_airstate" class=" font_normal_body">安检类型</label>
              <input v-show="false" type="text"  v-model="model.f_check_type"  v-validate:f_check_type='{required: true }' >
              <v-select
                v-model="model.f_check_type"
                :value.sync="model.f_check_type"
                :options='checktypes'
                value-single
                close-on-select>
              </v-select>
            </div>

            <div class="col-sm-4 form-group"   >
              <label for="f_change_date" class=" font_normal_body">上次时间</label>
              <input v-show="false" type="text"  v-model="model.f_last_time"  v-validate:f_change_date='{required: true }' >
              <datepicker placeholder="上次时间"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.f_last_time"
                          :value.sync="model.f_last_time"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>

            <div class="col-sm-12 "  :class="[$v.f_change_comments.required ? 'has-error' : 'has-success']">
              <label class="font_normal_body">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
              <textarea class="form-control" rows="3"  style="width:86.5%"
                        v-model="model.f_change_comments"   v-validate:f_change_comments='{required: true }'
                        placeholder="备注"></textarea>
            </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_search" type="button" style="width:80px;" @click="confirm('新增')"  :disabled='!$v.valid'>
              保存
            </button>
            <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_user_state: '',
          f_in_time: '',
          f_change_comments:'',
          f_last_time:'',
          f_fdcard_id:'',
          f_valve_wall:'',
          f_check_type:'',
          f_operator:  this.$login.f.name,
          f_operate_date: this.$login.toStandardTimeString()
        },
        // 编辑控制
        isBlackList: false,
        f_filialeid: '',  // 所属公司
        f_filialename: '',  // 所属公司名称
        userstate: this.$appdata.getParam('停气通知用户状态'),
        checktypes: this.$appdata.getParam('停气安检类型')

      }
    },
    ready () {
        if(this.data){
          this.model.f_last_time = this.data.f_last_time;
          this.model.f_operator =  this.$login.f.name;
          this.model.f_operate_date = this.$login.toStandardTimeString();
        }else{
          this.initModel();
          this.model.f_operator =  this.$login.f.name;
          this.model.f_operate_date = this.$login.toStandardTimeString();
        }
    },
    watch: {
      'data' (val) {
        if (val) {
          this.isBlackList = true;
          this.initModel();
          this.model = Object.assign({},this.model,val);
        } else {
          this.isBlackList = false;
          this.initModel();
        }
      }
    },
    methods: {
      async confirm (type) {
        let data = {};
          //新增
        data = {
          f_user_state: this.model.f_user_state,
          f_user_name: this.data.f_user_name,
          f_address: this.data.f_address,
          f_userinfo_id: this.data.f_userinfo_id,
          f_in_time: this.model.f_in_time,
          f_comments:this.model.f_change_comments,
          f_last_time:this.model.f_last_time ,
          f_fdcard_id:this.model.f_fdcard_id,
          f_check_type:this.model.f_check_type,
          f_valve_wall:this.model.f_valve_wall,
          f_operator: this.model.f_operator,
          f_operate_date: this.model.f_operate_date,
          f_operatorid: this.$login.f.id,
          f_orgid: this.$login.f.orgid,
          f_orgname: this.$login.f.orgs,
          f_depid: this.$login.f.depids,
          f_depname: this.$login.f.deps
        }
        console.log('查看参数data', data)
        await this.$resetpost('rs/logic/stopairusersave ', data, {resolveMsg: `${type}成功`, rejectMsg: `${type}失败，请重试`})
        this.initModel()
        this.$dispatch('success')
      },
      getorg (id, name) {
        this.f_filialeid = id[0]
        this.f_filialename = name[0]
      },
      initModel () {
        this.model = {
          f_user_state: '',
          f_in_time: '',
          f_change_comments:'',
          f_last_time:'',
          f_fdcard_id:'',
          f_valve_wall:'',
          f_check_type:'',
          f_operator: this.$login.f.name,
          f_operate_date: this.$login.toStandardTimeString(),
          isblacklist: 'false'
        }
      },
      close () {
        this.$dispatch('close')
      }
    }
  }
</script>
<style lang="less">
  #gas-price-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }

</style>
