<template>
  <div class="app-container">
    <el-page-header @back="goBack" :content="pageTitle" class="page-header"></el-page-header>
    
    <el-form
      :model="queryParams"
      class="main-search"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
      style="margin-top: 20px"
    >
      <el-form-item label="会员号" prop="userNo">
        <el-input
          v-model="queryParams.userNo"
          placeholder="请输入会员号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否中奖" prop="win">
        <el-select v-model="queryParams.win" placeholder="是否中奖" clearable>
          <el-option label="已中奖" value="1"></el-option>
          <el-option label="未中奖" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="领取状态" prop="deal">
        <el-select v-model="queryParams.deal" placeholder="领取状态" clearable>
          <el-option label="已领取" value="1"></el-option>
          <el-option label="未领取" value="0"></el-option>
          <el-option label="已换分" value="2"></el-option>
          <el-option label="已邮寄" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="tables"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="ID" prop="id" width="66" />
      <el-table-column label="会员号" align="center" prop="userNo" width="150" />
      <el-table-column label="称呼" align="center" prop="name" width="120" />
      <el-table-column label="奖品标题" align="center" prop="title" width="120" />
      <el-table-column label="奖品名称" align="center" prop="prize" width="150" />
      <el-table-column label="奖品图片" align="center" width="100">
        <template slot-scope="scope">
          <img class="table-img" :src="getImageUrl(scope.row.image)" v-if="scope.row.image" />
        </template>
      </el-table-column>
      <el-table-column label="银币价值" align="center" prop="point" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.point || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否中奖" align="center" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.win === 1 ? 'success' : 'info'">
            {{ scope.row.win === 1 ? '已中奖' : '未中奖' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="领取状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deal === 0" type="info">未领取</el-tag>
          <el-tag v-else-if="scope.row.deal === 1" type="success">已领取</el-tag>
          <el-tag v-else-if="scope.row.deal === 2" type="warning">已换分</el-tag>
          <el-tag v-else-if="scope.row.deal === 3" type="primary">已邮寄</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="抽奖时间"
        align="center"
        width="160"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.win === 1 && scope.row.deal === 0"
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="handleDeal(scope.row.id)"
            >标记领取</el-button
          >
          <span v-else-if="scope.row.win === 1">-</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getRaffleDetail, getRaffleRecords, dealRaffle } from '@/api/raffle'
import { resolveImageUrl } from '@/utils/image'

export default {
  name: 'RaffleRecord',
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      list: [],
      queryParams: {
        page: 1,
        pageSize: 10,
        raffleId: 0,
        userNo: '',
        win: '',
        deal: '',
      },
      imagePath: '',
      raffleTitle: '',
    }
  },
  computed: {
    pageTitle() {
      return this.raffleTitle ? `抽奖记录 - ${this.raffleTitle}` : '抽奖记录'
    },
  },
  created() {
    const raffleId = this.$route.query.raffleId
    if (raffleId) {
      this.queryParams.raffleId = raffleId
      this.getRaffleInfo(raffleId)
      this.getList()
    }
  },
  methods: {
    getImageUrl(path) {
      return resolveImageUrl(this.imagePath, path)
    },
    getRaffleInfo(raffleId) {
      getRaffleDetail(raffleId).then((response) => {
        if (response.code === 200) {
          const data = response.data.dataList
          this.raffleTitle = data.title || ''
        }
      })
    },
    getList() {
      this.loading = true
      getRaffleRecords(this.queryParams).then((response) => {
        if (response.code === 200) {
          this.list = response.data.rafList || []
          this.imagePath = response.data.imagePath || ''
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleSelectionChange(selection) {},
    handleDeal(id) {
      this.$confirm('确认标记为已领取吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        dealRaffle(id).then((response) => {
          if (response.code === 200) {
            this.$message.success('标记成功')
            this.getList()
          }
        })
      }).catch(() => {})
    },
    goBack() {
      this.$router.push('/raffle/index')
    },
  },
}
</script>

<style scoped>
.page-header {
  margin-bottom: 20px;
}
.table-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}
</style>
