<template>
  <div class="guest-info">
    <el-form
      label-width="150px"
      v-for="(guest, index) in guestList"
      :key="index">
      <div class="form-title">游客{{ index + 1 }}</div>
      <el-form-item label="姓名">
        {{ guest.guest_name }}
      </el-form-item>
      <el-form-item label="手机号">
        {{ guest.guest_phone }}
      </el-form-item>
      <el-form-item label="证件号">
        {{ guest.guest_identify }}
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      guestList: []
    }
  },
  watch: {
    visible (val) {
      // 初始化编辑数据
      if (val) {
        if (this.currentItem) {
          this.guestList = [...this.currentItem.tickets]
          console.log(this.guestList)
        }
      }
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    formatDate (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped lang="scss">
.guest-info {
  display: flex;
  flex-wrap: wrap;
  .el-form {
    width: 50%;
    .el-form-item {
      margin: 0;
    }
  }
  .form-title {
    margin: 10px 20px 0;
    padding: 5px 20px;
    border-left: 3px solid #03888F;
  }
}
</style>
