<template>
    <div>
        <div><el-button type="primary" @click="$refs.ShopAdd.show()">添加商品</el-button></div>
        <div class="head-container">
            <el-table :data="tableData.list" v-loading="tableData.loading">
                <el-table-column label="商品" prop="goodsName">
                    <template v-slot="scope">
                        <div class="goods_info">
                            <el-image :src="scope.row.goodsImageUrl" style="width:40px;height:40px;flex-shrink: 0;"
                                :preview-src-list="srcList" />
                            <span>{{ scope.row.goodsName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="所需积分" prop="requiredPoints"></el-table-column>
                <el-table-column label="额外价格「元」" prop="extraPrice"></el-table-column>
                <el-table-column label="累计兑换次数" prop="totalExchangeCount"></el-table-column>
                <el-table-column label="库存" prop="quantity"></el-table-column>
                <el-table-column label="状态" prop="status">
                    <template v-slot="scope">
                        <el-tag type="success" disable-transitions v-if="scope.row.status == 1">上架</el-tag>
                        <el-tag type="danger" disable-transitions v-if="scope.row.status == 0">下架</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="text" icon="el-icon-edit" @click="editorHandle(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
                            <el-button type="text" icon="el-icon-delete" slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="head-container">
            <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page"
                :page-size="tableData.size" @current-change="paginationChange"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
        <!-- 添加积分商品/积分 -->
        <ShopAdd ref="ShopAdd" @success="resetTable" />
    </div>
</template>

<script>
import ShopAdd from './shop_add.vue'
import { goodsSettingPage, goodsDelete } from '@/api/points.js'
export default {
    components: { ShopAdd },
    data() {
        return {
            srcList: [],
            tableData: {
                sort: 'createdAt,desc',
                list: [],
                page: 1,
                size: 30,
                loading: false,
                total: 0
            },
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        // 编辑 预览
        editorHandle(row) {
            this.$refs.ShopAdd.show(row)
        },
        // 删除
        async delTableHandle(id) {
            try {
                await goodsDelete(id)
                this.$message.success('已删除')
                this.getTableData()
            } catch (error) {
                console.log(error);
            }
        },
        resetTable() {
            this.tableData.page = 1
            this.tableData.size = 30
            this.getTableData()
        },
        handleSizeChange(val) {
            this.tableData.size = val
            this.getTableData()
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e
            this.getTableData()
        },
        // 获取积分商品列表
        async getTableData() {
            try {
                this.tableData.loading = true
                const res = await goodsSettingPage({
                    page: this.tableData.page,
                    size: this.tableData.size,
                    goodsName: '',
                    goodsCategory: 'physical',
                    status: ''
                })
                this.tableData.loading = false
                this.tableData.list = res.content
                this.tableData.total = res.totalElements
                // 预览图集合
                this.srcList = res.content.map(item => item.goodsImageUrl)
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

<style scoped lang="scss">
.head-container {
    margin-top: 20px;
}

.goods_info {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>