<template>
  <div class="select-overspread" style="padding: 40px 100px 0px 100px">
    <tabset v-ref:tabs :close="false">
      <tab header='报建申请' style="background-color: #ffffff!important;padding: 20px;overflow: scroll">
        <validator name="v">
          <form class="form-horizontal select-overspread">
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_apply_type.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">报建类型</label>
              <div class="col-sm-6">
                <input type="text" v-show="false" v-model="from.f_apply_type" v-validate:f_apply_type = "['required']" >
                <input-select
                  class="select select_list"
                  :value.sync="applyType"
                  v-model="applyType"
                  :options='applyTypeList'
                  @change="applyTypeChange"
                  :valueSingle="true"></input-select>
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_apply_nature.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">报建性质</label>
              <div class="col-sm-6">
                <input type="text" v-show="false" v-model="from.f_apply_nature" v-validate:f_apply_nature = "['required']" >
                <input-select
                  class="select select_list"
                  :value.sync="from.f_apply_nature"
                  v-model="from.f_apply_nature"
                  :options='applyType.applyNature'
                  @change="applyTypeChange"
                  :valueSingle="true"></input-select>
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_user_name.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">用户名称</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_user_name = "['required']"
                       v-model="from.f_user_name"
                       :value="from.f_user_name"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_phone.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">用户电话</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_phone = "['required']"
                       v-model="from.f_phone"
                       :value="from.f_phone"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group">
              <label class="control-label-justify control-label col-sm-6">微信号</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-model="from.f_wechat_number"
                       :value="from.f_wechat_number"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_credentials.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">证件类型</label>
              <div class="col-sm-6">
                <input type="text" v-show="false" v-model="from.f_credentials" v-validate:f_credentials = "['required']" >
                <input-select
                  class="select select_list"
                  :value.sync="from.f_credentials"
                  v-model="from.f_credentials"
                  :options='credentialsList'
                  @change="applyTypeChange"
                  :valueSingle="true"></input-select>
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_idnumber.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">证件号码</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_idnumber = "['required']"
                       v-model="from.f_idnumber"
                       :value="from.f_idnumber"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" v-if="from.f_apply_nature !== '散户'" :class="[$v.f_business_license.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">营业执照</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_business_license = "['required']"
                       v-model="from.f_business_license"
                       :value="from.f_business_license"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_apply_count.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">
                {{from.f_apply_type === '非民用报建' ? '申请处数' : '申请户数'}}
              </label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_apply_count = "['required']"
                       v-model="from.f_apply_count"
                       :value="from.f_apply_count"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" v-if="from.f_apply_nature !== '散户'" :class="[$v.f_taxpayer_id.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">单位识别号</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_taxpayer_id = "['required']"
                       v-model="from.f_taxpayer_id"
                       :value="from.f_taxpayer_id"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" v-else>
              <label class="control-label-justify control-label col-sm-6">单位识别号</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-model="from.f_taxpayer_id"
                       :value="from.f_taxpayer_id"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" :class="[$v.f_paper_name.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">单位名称</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_paper_name = "['required']"
                       v-model="from.f_paper_name"
                       :value="from.f_paper_name"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" v-if="from.f_apply_nature !== '散户'" :class="[$v.f_paper_account.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-6">单位银行账号</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-validate:f_paper_account = "['required']"
                       v-model="from.f_paper_account"
                       :value="from.f_paper_account"
                />
              </div>
            </div>
            <div style="height: 40px;margin-bottom: 20px" class="col-sm-4 form-group" v-else>
              <label class="control-label-justify control-label col-sm-6">单位银行账号</label>
              <div class="col-sm-6">
                <input class="form-control input_view" style=""
                       v-model="from.f_paper_account"
                       :value="from.f_paper_account"
                />
              </div>
            </div>
            <div style="margin-bottom: 20px" class="col-sm-12 form-group" v-if="from.f_apply_nature !== '散户'" :class="[$v.f_address_phone.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-3">单位地址电话</label>
              <div class="col-sm-10">
                <textarea
                  class="form-control input_view"
                  style="width: 100%;height: 100%" rows="1"
                  v-validate:f_address_phone = "['required']"
                  v-model="from.f_address_phone"
                  :value="from.f_address_phone"
                ></textarea>
              </div>
            </div>
            <div style="margin-bottom: 20px" class="col-sm-12 form-group"v-else>
              <label class="control-label-justify control-label col-sm-3">单位地址电话</label>
              <div class="col-sm-10">
                <textarea
                  class="form-control input_view"
                  style="width: 100%;height: 100%" rows="1"
                  v-model="from.f_address_phone"
                  :value="from.f_address_phone"
                ></textarea>
              </div>
            </div>
            <div style="margin-bottom: 20px" class="col-sm-12 form-group" :class="[$v.f_order_address.required ? 'has-error' : '']">
              <label class="control-label-justify control-label col-sm-3">地址</label>
              <div class="col-sm-10">
                <textarea
                  class="form-control input_view"
                  style="width: 100%;height: 100%" rows="1"
                  v-validate:f_order_address = "['required']" readonly
                  v-model="from.f_order_address"
                  :value="from.f_order_address"
                ></textarea>
              </div>
            </div>
            <div style="margin-bottom: 20px" class="col-sm-12 form-group">
              <label class="control-label-justify control-label col-sm-3">备注</label>
              <div class="col-sm-10">
                <textarea
                  class="form-control input_view"
                  style="width: 100%;height: 100%" rows="2"
                  v-model="from.f_apply_remarks"
                  :value="from.f_apply_remarks"
                ></textarea>
              </div>
            </div>
            <div style="margin-bottom: 20px" class="col-sm-12 form-group text-center">
              <button style="min-width:100px" class="btn btn-primary button_spacing" :disabled='!$v.valid'>
                提交
              </button>
            </div>
          </form>
        </validator>
      </tab>
      <tab header='地图' style="background-color: #ffffff!important;padding: 20px;overflow: scroll">
        <amap-pick-main
          @locationclick="locationclick"
        ></amap-pick-main>
      </tab>
    </tabset>
  </div>
</template>

<script>
import {isEmpty} from '../../components/Util'

export default {
  title: '报装预约',
  data () {
    return {
      from: {
        f_apply_type: null,
        f_apply_nature: null,
        f_user_name: null,
        f_phone: null,
        f_wechat_number: null,
        f_credentials: null,
        f_idnumber: null,
        f_business_license: null,
        f_taxpayer_id: null,
        f_paper_name: null,
        f_paper_account: null,
        f_address_phone: null,
        f_apply_count: null,
        f_order_address: null,
        f_lng: null,
        f_lat: null,
        f_apply_remarks: null
      },
      applyTypeList: [
        {
          label: '民用报建',
          value: {
            f_apply_type: '民用报建',
            applyNature: [
              {
                label: '散户',
                value: '散户'
              },
              {
                label: '小区',
                value: '小区'
              }
            ]
          }
        },
        {
          label: '非民用报建',
          value: {
            f_apply_type: '非民用报建',
            applyNature: [
              {
                label: '工业',
                value: '工业'
              },
              {
                label: '商业',
                value: '商业'
              }
            ]
          }
        }
      ],
      applyType: null,
      credentialsList: [
        {
          label: '身份证',
          value: '身份证'
        },
        {
          label: '营业执照',
          value: '营业执照'
        }
      ]
    }
  },
  ready () {
  },
  methods: {
    locationclick (res) {
      this.from.f_order_address = res.pname + res.cityname + res.adname + res.address + res.name
      this.from.f_lng = res.location.lng
      this.from.f_lat = res.location.lat
    },
    applyTypeChange () {
      if (!isEmpty(this.applyType)) {
        this.from.f_apply_type = this.applyType.f_apply_type
      }
    }
  }
}
</script>

<style>
.bg-info a {
  color: #555050!important;
}
.active {
  background-color: #5ac0d9;
}
.datepicker{
  width: 100%!important;
}
.datepicker-input{
  background-color: #ffffff!important;
  width: 100%!important;
}
.datepicker-input:disabled{
  border: 1px solid #DDD!important;
  color: #ACA899!important;
  width: 100%!important;
}
</style>
<style scoped>
th{
  font-size: 15px !important;
  text-align: center !important;
  background-color: #dfedfb!important;
  color: #666666 !important;
  font-family: PINGFANG-BOLD !important;
  font-weight: normal!important;
}
/*清除model中的浮动*/
.clearfix:after,.clearfix:before{
  display: table;
}
.clearfix:after{
  clear: both;
}

.input_view{
  background-color: #ffffff;
  border-radius: 2px;
  border: solid 1px #c7c7c7!important;
  color: #333333!important;
  font-size: 15px!important;
}

.input_view[readonly]{
  border: 1px solid #DDD!important;
  color:#ACA899!important;
}
.input_view:disabled{
  border: 1px solid #DDD!important;
  color:#ACA899!important;
}

.control-label-justify {
  display: inline-block;
  vertical-align: top;
  width: 110px;
  text-align: justify;
  font-family: PingFang-SC-Bold;
}

.control-label-justify::after {
  content: "";
  display: inline-block;
  width: 100%;
  overflow: hidden;
  height: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

</style>
