<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="120px"
    >
      <el-form-item
        verify
        label="预约类型"
        prop="booking_type">
        <el-select
          v-model="form.booking_type"
        >
          <el-option
            label="团队预约"
            value="TEAM_BOOKING"
          ></el-option>
          <el-option
            label="临时团队"
            value="TEMP_BOOKING"
          ></el-option>
          <el-option
            label="行政预约"
            value="GOV_BOOKING"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        verify
        label="单位"
        prop="company">
        <el-input v-model="form.company"></el-input>
      </el-form-item>

      <el-form-item
        label="联系人"
        prop="contact_name">
        <el-input v-model="form.contact_name"></el-input>
      </el-form-item>

      <el-form-item
        :verify="verifyPhone"
        label="联系电话"
        prop="contact_tel">
        <el-input v-model="form.contact_tel"></el-input>
      </el-form-item>

      <el-form-item
        label="领队名称"
        prop="leader_name">
        <el-input v-model="form.leader_name"></el-input>
      </el-form-item>

      <el-form-item
        label="领队证件号"
        prop="leader_id_no">
        <el-input v-model="form.leader_id_no"></el-input>
      </el-form-item>

      <el-form-item
        label="参观人数"
        prop="booking_num">
        <el-input-number
          v-model="form.booking_num"
          :min="1"
          :precision="0"></el-input-number>
      </el-form-item>

      <el-form-item
        verify
        label="游玩日期"
        prop="booking_play_date">
        <el-date-picker
          :clearable="false"
          :editable="false"
          :picker-options="dateOption"
          v-model="form.booking_play_date"
          type="date"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item
        label="是否需要讲解"
        prop="is_need_explain">
        <el-select
          v-model="form.is_need_explain"
        >
          <el-option
            label="不需要"
            :value="0"
          ></el-option>
          <el-option
            label="需要"
            :value="1"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="陪同人数"
        prop="accompany_num">
        <el-input-number
          v-model="form.accompany_num"
          :min="1"
          :precision="0"></el-input-number>
      </el-form-item>

      <el-form-item
        label="备注"
        class="full-width"
        prop="remark">
        <el-input
          type="textarea"
          :rows="3"
          v-model="form.remark"
          placeholder="备注"></el-input>
      </el-form-item>

      <div class="btn-wrap">
        <el-button @click="reset()">
          重置
        </el-button>

        <el-button
          type="primary"
          class="btn"
          @click="submit">
          提交预约
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
import { create } from '@/api/lf'
import { verifyPhone } from '@/utils/validate.js'

export default {
  computed: {
  },
  data () {
    return {
      form: {
        record_no: '',
        source: 'OFFLINE',
        booking_type: '',
        company: '',
        contact_name: '',
        contact_tel: '',
        leader_name: '',
        leader_id_no: '',
        booking_num: '',
        booking_play_date: '',
        is_need_explain: 0,
        accompany_num: '',
        status: '',
        explain_status: '',
        remark: '',
        audit_remark: ''
      },
      dateOption: {
        // 日历禁用日期
        disabledDate (theTime) {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          return moment(theTime).isBefore(startTime)
        }
      }
    }
  },
  methods: {
    verifyPhone,
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          create(params).then(res => {
            this.$message.success('预订成功。')
            this.reset()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.full-width{
  width:100%;
  ::v-deep .el-form-item__content{
    width:100%;
  }
}
.btn-wrap{
  text-align: right
}
</style>
