<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="dialogVisible = true">新增</el-button>
    </div>
    <el-table
      :data="data"
      highlight-current-row
      border
      style="width: 100%"
      :row-class-name="activeRow">
      <el-table-column
        prop="SettingId"
        label="ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="PrizeId"
        label="奖品"
        :formatter="showPrizeName"
        >
      </el-table-column>
      <el-table-column
        prop="PrizeNum"
        label="数量"
        width="100">
      </el-table-column>
      <el-table-column
        prop="IsRepeat"
        label="允许重复抽"
        :formatter="showRepeat"
        width="150">
      </el-table-column>
      <el-table-column
        prop="Status"
        label="状态"
        :formatter="showStatus"
        width="150">
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%">
      <el-form label-width="120px" :model="formData">
        <el-form-item label="奖品">
          <el-select v-model="formData.PrizeId">
            <el-option v-for="item in prizes" :key="item.PrizeId" :label="`${item.PrizeType} - ${item.PrizeName}`" :value="item.PrizeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="formData.PrizeNum" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="允许重复抽">
          <el-select v-model="formData.IsRepeat">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'setting',
  props: [
    'data',
    'prizes',
  ],
  data() {
    return {
      dialogVisible: false,
      formData: {
        PrizeId: undefined,
        IsRepeat: '0',
        PrizeNum: 1,
      },
    }
  },
  methods: {
    activeRow({ row }) {
      if (row.Status === 1) {
        return 'tab-row-active'
      }
    },
    showPrizeName(row, col, val) {
      const prize = (this.prizes || []).filter(({ PrizeId: x }) => x === val)[0] || {}
      return `${prize.PrizeType} - ${prize.PrizeName}`;
    },
    showRepeat(row, col, val) {
      return val === 1 ? '允许' : '不允许'
    },
    showStatus(row, col, val) {
      return val === 1 ? '有效' : '已抽过'
    },
    onSubmit() {
      this.$emit('submit', { ...this.formData, IsRepeat: this.formData.IsRepeat - 0 })
      this.dialogVisible = false
    }
  }
}
</script>

<style>
.el-table .tab-row-active {
    background: #f0f9eb;
  }
</style>
