<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
    append-to-body
  >
    <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="lotteryId">
        <div style="display: flex;align-items: center;">
          <span>{{ formData.lotteryId || '--' }}</span>
          <el-button
            v-if="formData.lotteryId"
            style="margin-left: 14px;" type="warning" size="mini"
            @click="$refs.DetailModal1 && $refs.DetailModal1.handleOpen({ id: formData.lotteryId })"
          >
            详情
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="奖项名称" prop="itemName">
        {{ formData.itemName || '--' }}
      </el-form-item>
      <el-form-item label="奖项等级" prop="level">
        {{ typeof formData.level === 'number' ? formData.level : '--' }}
      </el-form-item>
      <el-form-item label="奖项概率" prop="percent">
        {{ typeof formData.percent === 'number' ? formData.percent : '--' }}
      </el-form-item>
      <el-form-item label="关联抽奖奖品ID" prop="prizeId">
        <div style="display: flex;align-items: center;">
          <span>{{ formData.prizeId || '--' }}</span>
          <el-button
            v-if="formData.prizeId"
            style="margin-left: 14px;" type="warning" size="mini"
            @click="$refs.DetailModal2 && $refs.DetailModal2.handleOpen({ id: formData.prizeId })"
          >
            详情
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="是否默认" prop="defaultItem">
        <span v-if="formData.defaultItem === 0">不是</span>
        <span v-else-if="formData.defaultItem === 1">是</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        {{ formData.createTime || '--' }}
      </el-form-item>
    </el-form>

    <!-- 活动详情 -->
    <DetailModal1 ref="DetailModal1" />
    <!-- 奖品详情 -->
    <DetailModal2 ref="DetailModal2" />
  </el-dialog>
</template>

<script>
import { getByIdLotteryItem } from '@/api/lotteryManagement/LotteryAwards'
import DetailModal1 from '../../lotteryActivities/components/DetailModal'
import DetailModal2 from '../../LotteryPrizes/components/DetailModal'

export default {
  name: 'DetailModal',
  components: {
    DetailModal1,
    DetailModal2
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '查看抽奖奖项详情'
      },
      visible: false,
      formData: {
        id: '',
        lotteryId: '',
        itemName: '',
        level: '',
        percent: '',
        prizeId: '',
        defaultItem: '',
        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 getByIdLotteryItem({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          id: res.data.id || '',
          lotteryId: res.data.lotteryId || '',
          itemName: res.data.itemName || '',
          level: res.data.level,
          percent: res.data.percent,
          prizeId: res.data.prizeId || '',
          defaultItem: res.data.defaultItem,
          createTime: res.data.createTime || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

