<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%">
      <el-table-column
        prop="PrizeName"
        label="奖品">
      </el-table-column>
      <el-table-column
        prop="PrizeType"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="Stock"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="Picture"
        label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.Picture" width="60" alt="">
        </template>
      </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-input v-model="formData.PrizeName"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="formData.PrizeType" placeholder="一等奖, 二等奖"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="formData.Stock" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :action="uploadAction"
            :on-success="onSuccess"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </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',
    'uploadAction',
  ],
  data() {
    return {
      dialogVisible: false,
      formData: {
        PrizeId: 0,
        PrizeType: '',
        PrizeName: '',
        Picture: '',
        Stock: 1,
      },
    }
  },
  methods: {
    onSubmit() {
      this.$emit('submit', { ...this.formData })
      this.dialogVisible = false
    },
    onSuccess(response) {
      this.formData.Picture = response.message.url
    }
  }
}
</script>

<style>
</style>
