<template>
    <div class="mySelection">
        <el-table :data="tableData" style="width: 100%;" align="center" border row-key="id"
            :header-cell-style="{ background: '#EEF3FF', color: '#333333', textAlign: 'center' }"
            :tree-props="{ children: 'childs' }">
            <el-table-column prop="productId" align="center" label="商品id" show-overflow-tooltip width="80" />
            <el-table-column label="商品主图" width="150" align="center">
                <template slot-scope="scope">
                    <img height="80" width="80" :src="scope.row.image.replace('http://', 'https://')" alt srcset>
                </template>
            </el-table-column>
            <el-table-column prop="productName" align="center" label="商品名称" width="180" />
            <el-table-column prop="shopName" align="center" label="商家名称" width="180" />
            <el-table-column prop="supplierName" align="center" label="供应商名称" width="180" />
            <el-table-column prop="classifyHierarchy" align="center" label="分类层级" width="180" />
            <el-table-column prop="sectionPrice" align="center" label="售价区间" show-overflow-tooltip />
            <el-table-column prop="stockNumber" align="center" label="库存" show-overflow-tooltip />
            <el-table-column prop="volume" align="center" label="实际销售" show-overflow-tooltip />
            <el-table-column prop="fictitiousNumber" align="center" label="虚拟销售" show-overflow-tooltip />
            <el-table-column prop="createTime" align="center" label="创建时间" width="180" />
            <el-table-column prop="shelveState" align="center" label="上架状态" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="scope.row.shelveState == 0">已下架</span>
                    <span v-if="scope.row.shelveState == 1">已上架</span>
                    <span v-if="scope.row.shelveState == 2">待审核</span>
                    <span v-if="scope.row.shelveState == 3">审核失败</span>
                </template>
            </el-table-column>
            <el-table-column width="200" label="编辑">
                <template slot-scope="scope">
                    <el-button type="text" @click="open(scope.row)">加入选品</el-button>
                    <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
                    <!-- <el-button type="text" @click.native.prevent="updateRow(scope.row)">编辑</el-button> -->
                    <!-- <el-button type="text" @click="updateRow(scope.row.priceId)">编辑</el-button>
                    <el-button type="text" @click="open(scope.row.priceId)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="fenye">
            <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <AddCommodity ref="addCommodity" @reset="reset" />
    </div>
</template>

<script>
import {  addProduct, getProductMerchantList } from "@/api/platformProduct"
import AddCommodity from './addCommodity'
export default {
    components: { AddCommodity },
    created() {
        this.getMySelection()
    },
    data() {
        return {
            tableData: [],
            searchMyProduct: {
                shelveState: "",
                productName: "",
                productId: "",
                shopName: "",
                page: 1,
                pageSize: 5,
                shopId: "",
                type: 0,
                shopId: 186,
                ifSelection: 0
            },
            currentPage: 1,
            total: null
        }
    },
    methods: {
        open(item) {
            this.$confirm('是否将该商品加入平台选品?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.updateRow(item.productId)

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消加入选品'
                });
            });
        },
        async updateRow(id) {
            try {
                let res = await addProduct({ productId: id })
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            } catch (error) {
                console.log(error);
            }
            console.log(res);
        },
        // 获取我的选品列表
        async getMySelection() {
            let res = await getProductMerchantList(this.searchMyProduct);
            // console.log(res.data);
            this.tableData = res.data.list
            this.total = res.data.total
            // console.log(res);
        },
        //  查看详情
        Godetails(row) {
            this.$refs.addCommodity.show(row.productId)
        },
        //  关闭详情
        reset() {
            this.getMySelection()
        },
        handleSizeChange(val) {
            this.searchMyProduct.pageSize = val
            this.getMySelection()
        },
        handleCurrentChange(val) {
            this.searchMyProduct.page = val
            this.getMySelection()
        },
    },
}
</script>

<style lang="scss" scoped>
.mySelection {
    padding: 80px 50px 0;
}

.fenye {
    margin: 50px auto;
    display: flex;
    justify-content: center;
}
</style>