<template>
  <div class="auto">
    <validator name='a' @valid="addressValid(true)" @invalid="addressValid(false)">
      <form class="form-horizontal">
        <div class="row">
          <div class="col-sm-6" :class="[!model.f_user_name ? 'has-error' : '']">
            <label class="font_normal_body">客户名称</label>
            <input type="text" v-model="model.f_user_name" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6" :class="[!model.f_user_type ? 'has-error' : '']">
            <label class="font_normal_body">客户类型</label>
            <v-select :value.sync="model.f_user_type" v-model="model.f_user_type"
                      placeholder='客户类型'
                      :search="false"
                      :value-single="true"
                      :options='userTypes'
                      close-on-select
            ></v-select>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_contact ? 'has-error' : '']">
            <label class="font_normal_body">联系人</label>
            <input type="text" v-model="model.f_contact" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6" :class="[!model.f_phone ? 'has-error' : '']">
            <label class="font_normal_body">联系电话</label>
            <input type="text" v-model="model.f_phone" style="width: 60%" class="input_search">
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_credentials ? 'has-error' : '']">
            <label class="font_normal_body">证件类型</label>
            <v-select :value.sync="model.f_credentials" v-model="model.f_credentials"
                      placeholder='证件类型'
                      :search="false"
                      :value-single="true"
                      :options='documentTypes'
                      close-on-select
            ></v-select>
          </div>
          <div class="col-sm-6" :class="[!model.f_idnumber ? 'has-error' : '']">
            <label class="font_normal_body">证件号码</label>
            <input type="text" v-model="model.f_idnumber" style="width: 60%" class="input_search">
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_apply_type ? 'has-error' : '']">
            <label class="font_normal_body">报建类型</label>
            <v-select :value.sync="model.f_apply_type" v-model="model.f_apply_type"
                      placeholder='报建类型'
                      :search="false"
                      :value-single="true"
                      :options='applyTypes'
                      close-on-select
            ></v-select>
          </div>
          <div class="col-sm-6" :class="[!model.f_apply_source ? 'has-error' : '']">
            <label class="font_normal_body">报建来源</label>
            <v-select :value.sync="model.f_apply_source" v-model="model.f_apply_source"
                      placeholder='报建来源'
                      :search="false"
                      :value-single="true"
                      :options='applySources'
                      close-on-select
            ></v-select>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_order_address ? 'has-error' : '']">
            <label class="font_normal_body">预约地址</label>
            <input type="text" v-model="model.f_order_address" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6" :class="[!model.f_quantity ? 'has-error' : '']">
            <label class="font_normal_body">申请户数</label>
            <input type="text" v-model="model.f_quantity" style="width: 60%" class="input_search">
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_auth_type ? 'has-error' : '']">
            <label class="font_normal_body">认证类型</label>
            <v-select :value.sync="model.f_auth_type" v-model="model.f_auth_type"
                      placeholder='认证类型'
                      :search="false"
                      :value-single="true"
                      :options='authTypes'
                      close-on-select
            ></v-select>
          </div>
          <div class="col-sm-6" >
            <label class="font_normal_body">票据类型</label>
            <v-select :value.sync="model.f_invoice_type" v-model="model.f_invoice_type"
                      placeholder='票据类型'
                      :search="false"
                      :search="false"
                      :value-single="true"
                      :options='invoicesTypes'
                      close-on-select
            ></v-select>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_buy_name ? 'has-error' : '']">
            <label class="font_normal_body">购方单位名称</label>
            <input type="text" v-model="model.f_buy_name" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6">
            <label class="font_normal_body">购方开票识别号</label>
            <input type="text" v-model="model.f_buy_tax_id" style="width: 60%" class="input_search">
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" >
            <label class="font_normal_body">购方开户行及账号</label>
            <input type="text" v-model="model.f_bank_account" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6" >
            <label class="font_normal_body">购方地址电话</label>
            <input type="text" v-model="model.f_address_phone" style="width: 60%" class="input_search">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6" >
            <label class="font_normal_body">备注</label>
            <input type="text" v-model="model.f_note" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6" :class="[!model.f_project_name ? 'has-error' : '']">
            <label class="font_normal_body">项目名称</label>
            <input type="text" v-model="model.f_project_name" style="width: 60%" class="input_search">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6" :class="[!model.f_apply_code ? 'has-error' : '']">
            <label class="font_normal_body">项目编号</label>
            <input type="text" v-model="model.f_apply_code" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6" :class="[!model.f_project_address ? 'has-error' : '']">
            <label class="font_normal_body">项目地址</label>
            <input type="text" v-model="model.f_project_address" style="width: 60%" class="input_search">
          </div>
         </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_land_acquisition_methods ? 'has-error' : '']">
            <label class="font_normal_body">土地获取方式</label>
            <v-select :value.sync="model.f_land_acquisition_methods" v-model="model.f_land_acquisition_methods"
                      placeholder='土地获取方式'
                      :search="false"
                      :value-single="true"
                      :options='landMethods'
                      close-on-select
            ></v-select>
          </div>
          <div class="col-sm-6" :class="[!model.f_land_area ? 'has-error' : '']">
            <label class="font_normal_body">用地面积</label>
            <input type="text" v-model="model.f_land_area" style="width: 60%" class="input_search">
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_total_investment ? 'has-error' : '']">
            <label class="font_normal_body">总投资(万元)</label>
            <input type="text" v-model="model.f_total_investment" style="width: 60%" class="input_search">
          </div>
          <div class="col-sm-6" :class="[!model.f_national_standard_industry ? 'has-error' : '']">
            <label class="font_normal_body">国标行业</label>
            <input type="text" v-model="model.f_national_standard_industry" style="width: 30%" class="input_search">
          </div>
        </div>

        <div class="row">
          <div class="col-sm-6" :class="[!model.f_open_date ? 'has-error' : '']">
            <label class="font_normal_body">拟开工时间</label>
            <datepicker id="f_bill_date" placeholder="拟开工时间" style="width:60%"
                        v-model="model.f_open_date"
                        :value.sync="model.f_open_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"
                        :show-reset-button="true"
                        v-validate:f_open_date='{required: true}'>
            </datepicker>
          </div>
          <div class="col-sm-6" :class="[!model.f_success_date ? 'has-error' : '']">
            <label class="font_normal_body">拟建成时间</label>
            <datepicker id="f_bill_date" placeholder="拟建成时间" style="width:60%"
                        v-model="model.f_success_date"
                        :value.sync="model.f_success_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"
                        :show-reset-button="true"
                        v-validate:f_success_date='{required: true}'>
            </datepicker>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12" :class="[!model.f_construction_content ? 'has-error' : '']">
            <label class="font_normal_body">建设规模及内容</label>
            <input type="text" v-model="model.f_construction_content" style="width: 60%" class="input_search"
                   v-validate:f_explain='{required: true}'>
          </div>
        </div>
      </form>
    </validator>

    <div style="float: right" class="bt">
      <button
        type="button"
        class="btn button_search"
        :disabled="!isFormComplete()"
        @click="save('受理')">受理
      </button>
      <button
        type="button"
        class="btn button_search"
        :disabled="!isFormComplete()"
        @click="save('施工')">施工
      </button>
      <button
        type="button"
        class="btn button_search"
        :disabled="!isFormComplete()"
        @click="save('完工')">完工
      </button>
      <button class="btn button_clear" @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  title: '报警处置',

  data () {
    return {
      // [{label: '全部', value: ''}, ...this.$appdata.getParam('报建类型')?this.$appdata.getParam('报建类型'):[]],
      landMethods: [...this.$appdata.getParam('土地获取方式') ? this.$appdata.getParam('土地获取方式') : []],
      documentTypes: [...this.$appdata.getParam('证件类型') ? this.$appdata.getParam('证件类型') : []],
      authTypes: [...this.$appdata.getParam('认证类型') ? this.$appdata.getParam('认证类型') : []],
      invoicesTypes: [...this.$appdata.getParam('票据类型') ? this.$appdata.getParam('票据类型') : []],
      applySources: [...this.$appdata.getParam('报建来源') ? this.$appdata.getParam('报建来源') : []],
      userTypes: [...this.$appdata.getParam('客户类型') ? this.$appdata.getParam('客户类型') : []],
      applyTypes: [...this.$appdata.getParam('报建类型') ? this.$appdata.getParam('报建类型') : []]
    }
  },

  props: {
    model: {
      type: Object
    }
  },
  methods: {
    isFormComplete () {
      const model = this.model
      return (
        model.f_user_name && model.f_user_type && model.f_contact && model.f_phone && model.f_credentials &&
        model.f_idnumber && model.f_apply_type && model.f_apply_source && model.f_order_address &&
        model.f_quantity && model.f_auth_type  && model.f_buy_name &&
        model.f_project_name &&
        model.f_project_address && model.f_land_acquisition_methods && model.f_land_area && model.f_total_investment &&
        model.f_national_standard_industry && model.f_open_date && model.f_success_date && model.f_construction_content
      )
    },
    cancel () {
      this.$dispatch('close')
    },
    addressValid (val) {
      console.log('model', this.model)
      console.log(val)
    },
    save (status) {
      this.model.f_state = status
      this.$resetpost('/third/rs/logic/gjPushData', {data: this.model}).then((res) => {
        console.log('this.model', this.model)
      })
      this.$dispatch('close')
    }
  }
}

</script>

<style scoped>

.btn {
  margin: 20px 40px;
}

label {
  width: 130px;
}


</style>
