<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select v-model="listQuery.type" size="mini" class="filter-item" style="width: 200px;" placeholder="请选择代金券流水类型">
        <el-option :value="1" label="充值" />
        <el-option :value="2" label="转赠" />
        <el-option :value="3" label="签到" />
        <el-option :value="4" label="抵扣" />
        <el-option :value="5" label="核销" />
        <el-option :value="6" label="抽奖" />
        <el-option :value="7" label="退款" />
      </el-select>
      <el-select v-model="listQuery.type" size="mini" class="filter-item" style="width: 200px;" placeholder="请选择代金券类别">
        <el-option :value="1" label="赠送" />
        <el-option :value="2" label="收到" />
      </el-select>
      <el-button
        size="mini" class="filter-item" type="primary"
        icon="el-icon-search" @click="handleFilter"
      >
        查找
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading" :data="listData" size="small" element-loading-text="正在查询中。。。"
      border fit highlight-current-row
    >
      <el-table-column align="center" label="ID" prop="id" sortable />
      <el-table-column align="center" label="赠与方id" prop="holdId" />
      <el-table-column align="center" label="被赠与方id" prop="userId" />
      <el-table-column align="center" label="数量" prop="number" />
      <el-table-column align="center" label="编号/流水号" prop="orderSn" />
      <el-table-column align="center" label="发放时间" prop="createTime" />
      <el-table-column align="center" label="流水类型" prop="type">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1">充值</el-tag>
          <el-tag v-else-if="scope.row.type === 2" type="info">转赠</el-tag>
          <el-tag v-else-if="scope.row.type === 3" type="success">签到</el-tag>
          <el-tag v-else-if="scope.row.type === 4" type="danger">抵扣</el-tag>
          <el-tag v-else-if="scope.row.type === 5" type="success">核销</el-tag>
          <el-tag v-else-if="scope.row.type === 6" type="warning">抽奖</el-tag>
          <el-tag v-else-if="scope.row.type === 7">退款</el-tag>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { operateVoucherShopHold } from '@/api/voucherManagement/voucherTransfer'
import Pagination from '@/components/Pagination'

export default {
  name: 'FlowRecord',
  components: { Pagination },
  data() {
    return {
      listLoading: true,
      listData: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        type: '',
        typeNum: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      operateVoucherShopHold(this.listQuery)
        .then((res) => {
          this.listData = res.data.list || []
          this.total = res.data.total || 0
          this.listLoading = false
        })
        .catch(() => {
          this.listData = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
