<template>
  <el-dialog
    title="预订单详情"
    :visible.sync="visible"
    width="1200px"
    @close="handleClose">
    <div
      class="dialog-info"
      style="padding-bottom: 0;">
      <el-form
        disabled
        class="dialog-info"
        inline
        ref="form"
        :model="form"
        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
          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
          v-if="form.is_need_explain"
          label="讲解员"
          prop="explain_managerId">
          <el-select
            v-model="form.explain_managerId"
            filterable
          >
            <el-option
              v-for="item in salesList"
              :key="item.id"
              :label="item.nickName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="form.is_need_explain"
          label="讲解类型"
          prop="explain_type">
          <el-select
            v-model="form.explain_type"
            filterable
          >
            <el-option
              label="普通讲解"
              value="普通讲解">
            </el-option>
            <el-option
              label="行政讲解"
              value="行政讲解">
            </el-option>
            <el-option
              label="集中讲解"
              value="集中讲解">
            </el-option>
            <el-option
              label="英文讲解"
              value="英文讲解">
            </el-option>
            <el-option
              label="好人馆讲解"
              value="好人馆讲解">
            </el-option>
            <el-option
              label="国防人防教育馆讲解"
              value="国防人防教育馆讲解">
            </el-option>
            <el-option
              label="持献花篮和重温入党誓词仪式"
              value="持献花篮和重温入党誓词仪式">
            </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>
      </el-form>
      <div style="margin:20px">
        <label style="display: inline-block;width:108px;padding-right:12px;text-align: right;">预约资料</label>
        <el-button @click="download(form.team_file_url)">
          下载
        </el-button>
      </div>
      <!-- <el-form
        class="dialog-info"
        inline
        label-width="120px">
        <el-form-item
          label="预约资料"
          class="full-width"
        >
          <el-button @click="download(form.team_file_url)">
            下载
          </el-button>
        </el-form-item>
      </el-form> -->
      <el-input
        v-if="canAudit"
        style="margin-top:10px ;"
        type="textarea"
        :rows="2"
        placeholder="审核备注"
        v-model="form.audit_remark">
      </el-input>
    </div>

    <span
      v-if="canAudit"
      slot="footer">
      <el-button
        @click="handleSubmit(false)">拒绝</el-button>
      <el-button
        type="primary"
        @click="handleSubmit(true)">同意</el-button>
    </span>
  </el-dialog>
</template>

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

export default {
  props: {
  },
  components: {
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    }
  },
  data () {
    return {
      canAudit: false,
      visible: false,
      orderInfo: {},
      form: {
        id: 0,
        record_no: '',
        source: '',
        booking_type: '',
        explain_managerId: '',
        explain_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,
    download (url) {
      window.location.href = url
    },
    show (data, flag) {
      this.canAudit = flag
      this.visible = true
      this.orderInfo = data
      this.form = JSON.parse(JSON.stringify(data))
      this.form.type = (this.form.num_type === 1 ? '一码多人' : '一码一人')
      this.form.createTime = moment(this.form.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    handleClose () {
      this.visible = false
    },
    handleAdd () {
      this.form.travellers.push({ name: '', phone: '', idNum: '', face_url: '' })
    },
    handleDelete (index) {
      this.form.travellers.splice(index, 1)
    },
    handleSubmit (auditResult) {
      const params = {
        id: this.form.id,
        auditResult,
        auditRemark: this.form.audit_remark
      }
      audit(params).then(res => {
        this.$message.success('操作成功')
        this.handleClose()
        this.$emit('update')
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .faceWrap{
    width: 200px;
    display: flex;
  }
  </style>
