<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      class="main-search"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="抽奖标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入抽奖标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="状态" clearable>
          <el-option
            v-for="statusInfo in statusList"
            :key="statusInfo.key"
            :label="statusInfo.name"
            :value="statusInfo.key"
          />
        </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-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-menu"
          plain
          size="mini"
          @click="openTypeDialog"
          >抽奖类型管理</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="tables"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      :default-sort="defaultSort"
      @sort-change="handleSortChange"
    >
      <el-table-column label="ID" prop="id" width="66" />
      <el-table-column label="图片" align="center" width="120">
        <template slot-scope="scope">
          <img class="list-img" :src="getImageUrl(scope.row.image)" v-if="scope.row.image" />
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" prop="title">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="简介" align="center" prop="brief" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.brief }}</span>
        </template>
      </el-table-column>
      <el-table-column label="抽奖类型" align="center" prop="raffleType">
        <template slot-scope="scope">
          <span>{{ scope.row.raffleType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所需银币" align="center" prop="rafflePoint">
        <template slot-scope="scope">
          <span>{{ scope.row.rafflePoint || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总数" align="center" prop="allCnt">
        <template slot-scope="scope">
          <span>{{ scope.row.allCnt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已抽取" align="center" prop="nowCnt">
        <template slot-scope="scope">
          <span>{{ scope.row.nowCnt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="点击次数" align="center" prop="click">
        <template slot-scope="scope">
          <span>{{ scope.row.click }}</span>
        </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" prop="status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 'A' ? 'success' : 'danger'">
            {{ scope.row.status === 'A' ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row.id)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-data-line"
            @click="handleRecord(scope.row.id)"
            >记录</el-button
          >
          <el-button
            size="mini"
            type="text"
            :icon="scope.row.status === 'A' ? 'el-icon-lock' : 'el-icon-unlock'"
            @click="handleStatus(scope.row)"
          >
            {{ scope.row.status === 'A' ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

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

<script>
import { getRaffleList, updateRaffleStatus } from '@/api/raffle'
import raffleType from './components/raffleType'

export default {
  name: 'RaffleList',
  components: {
    raffleType,
  },
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      list: [],
      queryParams: {
        page: 1,
        pageSize: 10,
        title: '',
        status: 'A',
      },
      defaultSort: { prop: 'createTime', order: 'descending' },
      statusList: [
        { key: 'A', name: '正常' },
        { key: 'N', name: '禁用' },
      ],
      imagePath: '',
      typeDialog: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getImageUrl(path) {
      if (!path) return ''
      if (/^https?:\/\//i.test(path)) {
        return path
      }
      return (this.imagePath || '') + path
    },
    getList() {
      this.loading = true
      getRaffleList(this.queryParams).then((response) => {
        if (response.code === 200) {
          const dataList = response.data.dataList || {}
          this.list = dataList.content || dataList.rows || []
          this.total = dataList.totalElements || dataList.total || 0
          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) {},
    handleSortChange(column) {
      this.queryParams.orderByColumn = column.prop
      this.queryParams.isAsc = column.order
      this.getList()
    },
    handleAdd() {
      this.$router.push({
        path: '/raffle/detail',
        query: { id: 0 },
      })
    },
    handleView(id) {
      this.$router.push({
        path: '/raffle/detail',
        query: { id, view: true },
      })
    },
    handleEdit(id) {
      this.$router.push({
        path: '/raffle/detail',
        query: { id },
      })
    },
    handleRecord(id) {
      this.$router.push({
        path: '/raffle/record',
        query: { raffleId: id },
      })
    },
    handleStatus(row) {
      const status = row.status === 'A' ? 'N' : 'A'
      const text = status === 'A' ? '启用' : '禁用'
      this.$confirm('确认要' + text + '该抽奖吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        updateRaffleStatus(row.id, status).then((response) => {
          if (response.code === 200) {
            this.$message.success(text + '成功')
            this.getList()
          }
        })
      }).catch(() => {})
    },
    openTypeDialog() {
      this.typeDialog = true
    },
    closeDialog() {
      this.typeDialog = false
    },
  },
}
</script>

<style scoped>
.list-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}
</style>
