<template>
  <el-dialog :close-on-click-modal="false" title="消费记录" :visible.sync="consumptionDialogVisible" width="60%" append-to-body>
    <div class="join-shop-list-container">
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" element-loading-text="正在查询中..." :data="list" v-bind="{ stripe: true, size: 'small', border: true, highlightCurrentRow: true }">
        <el-table-column prop="allianceCardId" label="联盟卡ID" align="center" />
        <el-table-column prop="buyerUserId" label="购买者会员ID" align="center" />
        <el-table-column prop="shopId" label="商家ID" align="center" />
        <el-table-column prop="shopName" label="商家名称" align="center" />
        <el-table-column prop="amount" label="消费金额" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" type="danger">￥{{ scope.row.amount }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="消费时间" align="center" />
      </el-table>

      <div style="margin-top: 10px">
        <el-pagination
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, -> ,jumper"
          :total="total"
          @size-change="(val) => (listQuery.pageSize = val) && getList()"
          @current-change="(val) => (listQuery.page = val) && getList()"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getConsumptionRecordByUserIdAndAllianceCardIdApi } from '@/api/business'

export default {
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        allianceCardId: undefined,
        buyerUserId: undefined,
        page: 1,
        pageSize: 20
      },
      consumptionDialogVisible: false
    }
  },

  methods: {
    // 打开
    handleOpen(allianceCardId, buyerUserId) {
      if (!allianceCardId || !buyerUserId) {
        return this.$message.error('数据错误')
      }
      this.listQuery.allianceCardId = allianceCardId
      this.listQuery.buyerUserId = buyerUserId
      this.consumptionDialogVisible = true
      this.getList()
    },

    // 获取商家列表
    async getList() {
      try {
        this.listLoading = true
        const res = await getConsumptionRecordByUserIdAndAllianceCardIdApi(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      } catch (error) {
        this.listLoading = false
      }
    }
  }
}
</script>
