<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
  >
    <el-form
      ref="formData"
      :model="formData"
      size="mini"
      label-position="left"
      label-suffix=":"
      label-width="200px"
    >
      <!-- 抽奖记录信息 -->
      <el-form-item label="ID" prop="id">
        {{ formData.id || '--' }}
      </el-form-item>
      <el-form-item label="用户ID" prop="buyerUserId">
        {{ formData.buyerUserId || '--' }}
      </el-form-item>
      <el-form-item label="关联抽奖奖项ID" prop="itemId">
        <div style="display: flex;align-items: center;">
          <span>{{ formData.itemId || '--' }}</span>
          <el-button
            v-if="formData.itemId"
            style="margin-left: 14px;" type="warning" size="mini"
            @click="$refs.DetailModal1 && $refs.DetailModal1.handleOpen({ id: formData.itemId })"
          >
            详情
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="奖品名称" prop="prizeName">
        {{ formData.prizeName || '--' }}
      </el-form-item>
      <el-form-item label="IP" prop="accountIp">
        {{ formData.accountIp || '--' }}
      </el-form-item>
      <el-form-item label="createTime" prop="createTime">
        {{ formData.createTime || '--' }}
      </el-form-item>
    </el-form>

    <!-- 奖项详情 -->
    <DetailModal1 ref="DetailModal1" />
  </el-dialog>
</template>

<script>
import { getByIdLotteryRecord } from '@/api/lotteryManagement/LotteryRecords'
import DetailModal1 from '../../LotteryAwards/components/DetailModal'

export default {
  name: 'DetailModal',
  components: {
    DetailModal1
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '查看抽奖记录详情'
      },
      visible: false,
      formData: {
        id: '',
        buyerUserId: '',
        itemId: '',
        prizeName: '',
        accountIp: '',
        createTime: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.id) {
        this.getInfo(params.id)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await getByIdLotteryRecord({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          id: res.data.id || '',
          buyerUserId: res.data.buyerUserId || '',
          itemId: res.data.itemId || '',
          prizeName: res.data.prizeName || '',
          accountIp: res.data.accountIp || '',
          createTime: res.data.createTime || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

