<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 v-if="!isBlackList" class="active a-tabs"><a href="#">区域状态记录登记</a></li>
          <li v-if="isBlackList" 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="isBlackList"
                     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="isBlackList"
                     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-12 " v-if="isBlackList" style="margin-bottom: 5px;margin-top:4px;" :class="[$v.f_change_reason.required ? 'has-error' : 'has-success']">
              <label class="font_normal_body">变更原因</label>
              <textarea class="form-control" rows="3"  style="width:86.5%"
                        v-model="model.f_change_reason"   v-validate:f_change_reason='{required: true }'
                      placeholder="变更原因"></textarea>
            </div>
            <div class="col-sm-4 " style="margin-bottom: 5px;"  v-if="isBlackList" :class="[$v.f_change_type.required ? 'has-error' : 'has-success']">
              <label for="f_change_type" class="font_normal_body">变更方式</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:86%"
                     v-model="model.f_change_type"
                     v-validate:f_change_type='{required: true }'  placeholder="变更方式">
            </div>
            <div class="col-sm-4 " style="margin-bottom: 5px;"  v-if="isBlackList" >
              <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"   v-if="isBlackList" :class="[$v.f_change_date.required ? 'has-error' : 'has-success']">
              <label for="f_change_date" class=" font_normal_body">变更时间</label>
              <input v-show="false" type="text"  v-model="model.f_change_date"  v-validate:f_change_date='{required: true }' >
              <datepicker placeholder="变更时间"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.f_change_date"
                          :value.sync="model.f_change_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>
            <div class="col-sm-4 "  v-if="isBlackList" :class="[$v.f_change_operator.required ? 'has-error' : 'has-success']">
              <label for="f_change_operator" class="font_normal_body">变&nbsp;&nbsp;更&nbsp;人</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:86%"
                     v-model="model.f_change_operator"
                     v-validate:f_change_operator='{required: true }'  placeholder="变更人">
            </div>

            <div class="col-sm-12 "  v-if="isBlackList" :class="[$v.f_change_comments.required ? 'has-error' : 'has-success']">
              <label class="font_normal_body">变更备注</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  v-if="!isBlackList" class="button_search" type="button" style="width:80px;" @click="confirm('新增')"  :disabled='!$v.valid'>
              保存
            </button>
            <button  v-if="isBlackList" 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_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()
        },
        // 编辑控制
        isBlackList: false,
        f_filialeid: '',  // 所属公司
        f_filialename: '',  // 所属公司名称
        airstateoptions: this.$appdata.getParam('供气状态'),

      }
    },
    ready () {
      if (this.data) {
        this.isBlackList = true;
        this.model = Object.assign({},this.model,this.data);
        this.model.f_change_reason='';
        this.model.f_change_comments = '';
        this.model.f_change_type = '';
        this.model.f_change_operator = this.$login.f.name;
        this.model.f_change_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 = {};
        if(this.isBlackList) {
          //变更
          data = {
            f_area_name: this.model.f_area_name,
            f_air_state: this.model.f_air_state,
            f_change_reason: this.model.f_change_reason,
            f_describe: this.model.f_describe,
            f_user_phone: this.model.f_user_phone,
            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,
            f_change_type: this.model.f_change_type,
            f_change_date: this.model.f_change_date,
            f_change_comments: this.model.f_change_comments,
            f_change_operator: this.model.f_change_operator,
            id : this.model.id,
            f_type:type
          }
        }else{
          //新增
          data = {
            f_area_name: this.model.f_area_name,
            f_air_state: this.model.f_air_state,
            f_describe: this.model.f_describe,
            f_user_phone: this.model.f_user_phone,
            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,
            f_type:type
          }
        }
        console.log('查看参数data', data)
        await this.$resetpost('rs/logic/airinfosave ', 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_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(),
          isblacklist: 'false'
        }
      },
      close () {
        this.$dispatch('close')
      }
    }
  }
</script>
<style lang="less">
  #gas-price-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }

</style>
