<template>
  <div>
    <div :style="{ margin: '20px 0' }">
      <el-form :inline="true" :model="formData">
        <el-form-item label="中奖人">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="奖品等级">
          <el-input v-model="formData.type" placeholder="一等奖, 二等奖 ..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="text" @click="exportExcel()" :style="{ marginLeft: '40px' }">导出所有</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      highlight-current-row
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.winners" size="small" border :row-class-name="errorRow">
            <el-table-column
                prop="UserName"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="UserOrg"
                label="组织">
              </el-table-column>
              <el-table-column
                prop="UserDept"
                label="部门">
              </el-table-column>
              <el-table-column
                prop="Status"
                label="状态"
                :formatter="showStatus">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="150">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.Status === 1" @click="cancelWinner(scope.row)" type="text">取消</el-button>
                </template>
              </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="PrizeType"
        label="奖类">
      </el-table-column>
      <el-table-column
        prop="PrizeName"
        label="奖品">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="exportExcel(scope.row)" type="text" >导出</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { groupBy } from '../utils'

export default {
  name: 'winner',
  props: [
    'data',
    'prizes'
  ],
  data() {
    return {
      formData: {
        name: '',
        type: '',
      },
    }
  },
  computed: {
    tableData() {
      const gdata = groupBy(this.data, 'PrizeId')

      return Object.keys(gdata).map((k) => {
        const prize = (this.prizes || []).filter(x => x.PrizeId == k)[0] || {}

        return {
          ...prize,
          winners: gdata[k]
        }
      })
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.formData)
    },
    cancelWinner(row) {
      this.$confirm('确认要取消该人员中奖资格?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('cancel', row)
        })      
    },
    errorRow({ row }) {
      if (row.Status === -1) {
        return 'tab-row-error'
      }
    },
    showStatus(row, col, val) {
      return val === 1 ? '有效' : '被取消'
    },
    exportExcel(row) {
      // 导出全部
      if (!row) {
        this.$emit("exportExcel")
        return
      }

      this.$emit("exportExcel", { type: row.PrizeType })
    },
  }
}
</script>

<style>
.el-table .tab-row-error {
    background-color: #fef0f0;
  }
</style>
