<template>
  <el-dialog
    title="预订单详情"
    :visible.sync="visible"
    width="1200px"
    @close="handleClose">
    <div
      class="dialog-info"
      style="padding-bottom: 0;">
      <el-form
        class="dialog-info"
        inline
        ref="form"
        :model="form"
        label-width="120px">
        <el-form-item label="预订单号">
          <el-input
            disabled
            v-model="form.pre_no"></el-input>
        </el-form-item>
        <el-form-item label="发码模式">
          <el-select
            disabled
            v-model="form.num_type">
            <el-option
              :value="0"
              label="一码一人"
            ></el-option>
            <el-option
              :value="1"
              label="一码多人"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预订人数">
          <el-input-number
            disabled
            :precision="0"
            :min="1"
            v-model="form.number"></el-input-number>
        </el-form-item>
        <el-form-item label="预订单学生数量">
          <el-input
            disabled
            v-model="form.student_num"></el-input>
        </el-form-item>
        <el-form-item label="预订单教师数量">
          <el-input
            disabled
            v-model="form.teacher_num"></el-input>
        </el-form-item>
        <el-form-item label="实际学生数量">
          <!-- {{ form.number- form.travellers.filter(item => item.travellerType === 1)?.length }} -->
          <!-- <el-input
            disabled
            v-model=""></el-input> -->
          {{ realStudentNum }}
        </el-form-item>
        <el-form-item label="实际教师数量">
          {{ realTeacherNum }}
          <!-- {{ form.travellers.filter(item => item.travellerType === 1)?.length }} -->
          <!-- <el-input
            disabled
            v-model=""></el-input> -->
        </el-form-item>
        <!-- <el-form-item label="教师数量">
          <el-input-number
            :min="0"
            v-model="form.teacher_num"></el-input-number>
        </el-form-item>
        <el-form-item label="学生数量">
          <el-input-number
            :min="0"
            v-model="form.student_num"></el-input-number>
        </el-form-item> -->
        <el-form-item
          verify
          label="游玩时间"
          prop="play_date">
          <el-date-picker
            disabled
            :clearable="false"
            :editable="false"
            :picker-options="dateOption"
            v-model="form.play_date"
            type="date"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input
            disabled
            v-model="form.createTime"></el-input>
        </el-form-item>
        <el-form-item label="学校名称">
          <el-input
            disabled
            v-model="form.school_name"></el-input>
        </el-form-item>
        <el-form-item label="酒店名称">
          <el-input
            disabled
            v-model="form.hotel_name"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input
            disabled
            v-model="form.contact_name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            disabled
            v-model="form.contact_tel"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="学生数量">
          <el-input
            disabled
            v-model="form.student_num"></el-input>
        </el-form-item>
        <el-form-item label="教师数量">
          <el-input
            disabled
            v-model="form.teacher_num"></el-input>
        </el-form-item>
         -->
        <el-form-item
          label="下单备注"
          style="width:100%">
          <el-input
            disabled
            type="textarea"
            :rows="3"
            v-model="form.remark"
            placeholder="如：车辆信息、导游信息、游客信息、门票信息等"></el-input>
        </el-form-item>
      </el-form>

      <div class="block-title">
        游客信息
      </div>

      <!-- <div style="width:100%;margin-bottom:5px">
        <el-button
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >
          添加游客
        </el-button>
      </div> -->

      <el-table
        border
        stripe
        :data="form.travellers">
        <el-table-column
          type="index"
          width="50px"
          label="#"
        >
        </el-table-column>

        <el-table-column
          label="姓名"
          prop="name"
        >
          <!-- <template slot-scope="scope">
            <el-input
              v-model="scope.row.name"
            ></el-input>
          </template> -->
        </el-table-column>
        <el-table-column
          label="证件号码"
          prop="idNum"
        >
          <!-- <template slot-scope="scope">
            <el-input
              v-model="scope.row.idNum"
            ></el-input>
          </template> -->
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="phone"
        >
          <!-- <template slot-scope="scope">
            <el-input
              v-model="scope.row.phone"
            ></el-input>
          </template> -->
        </el-table-column>
        <el-table-column
          label="游客类型"
          prop="travellerType"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.travellerType===0">学生</span>
            <span v-if="scope.row.travellerType===1">教师</span>
          </template>
        </el-table-column>
        <el-table-column
          label="人脸照片"
          min-width="130"
        >
          <template slot-scope="scope">
            <div class="faceWrap">
              <GetFace v-model="scope.row.face_image"></GetFace>
            </div>
            <el-button
              @click="fetchFace(scope.row)"
              style="margin:5px">
              加载人脸
            </el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDelete(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <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 { preorderAudit, preorderDetail, preorderDetailTravellerFace } from '@/api/order'
import GetFace from '@/components/GetFace'
import moment from 'moment'

export default {
  props: {
  },
  components: {
    GetFace
  },
  computed: {
    realTeacherNum () {
      return this.form.travellers.filter(item => item.travellerType === 1)?.length
    },
    // 假定不是学生就是老师
    realStudentNum () {
      return this.form.number - this.form.travellers.filter(item => item.travellerType === 1)?.length
    }
  },
  data () {
    return {
      canAudit: false,
      visible: false,
      orderInfo: {},
      form: {
        id: 0,
        pre_no: 0,
        num_type: 0,
        number: 0,
        play_date: '',
        remark: '',
        audit_remark: ''
      },
      dateOption: {
        // 日历禁用日期
        disabledDate (theTime) {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          return moment(theTime).isBefore(startTime)
        }
      }
    }
  },
  methods: {
    async show (data, flag) {
      const { extraInfo } = await preorderDetail(data.id)
      this.canAudit = flag
      this.visible = true
      this.orderInfo = extraInfo
      this.form = JSON.parse(JSON.stringify(extraInfo))
      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 (result) {
      const params = {
        preOrderId: this.form.id,
        result,
        remark: this.form.audit_remark
      }
      preorderAudit(params).then(res => {
        this.$message.success('操作成功')
        this.handleClose()
        this.$emit('update')
      })
    },
    async fetchFace (row) {
      const { extraInfo } = await preorderDetailTravellerFace(row.id)
      if (extraInfo.face_image) {
        row.face_image = extraInfo.face_image
      } else {
        this.$message.info('没有人脸信息')
      }
    }
  }
}
</script>

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