<template>
    <div class="selectionLibrary">
        <div class="tableContainer">
            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
                <el-table-column prop="title" label="商品名称" align="center"></el-table-column>
                <el-table-column label="商品图片" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="" style="width: 100px;height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column prop="third_brand_name" label="品牌" align="center"></el-table-column>
                <el-table-column prop="third_category_name" label="品牌类目" align="center"></el-table-column>
                <el-table-column label="协议价" align="center">
                    <template slot-scope="scope">
                        <span>￥{{ (scope.row.agreement_price / 1000).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="利润率" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.promotion_rate }}%</span>
                    </template>
                </el-table-column>
                <el-table-column label="指导价" align="center">
                    <template slot-scope="scope">
                        <span>￥{{ (scope.row.guide_price / 1000).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="最小利润" align="center">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.guide_price / 1000).toFixed(2) }}%</span>
                    </template>
                </el-table-column>
                <el-table-column prop="discount" label="折扣" align="center"></el-table-column>
                <el-table-column label="毛利率" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.gross_profit_rate }}%</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
                        <el-button type="text" @click="removeLibrary(scope.row)">移出选品库</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenye">
                <el-pagination :current-page="queryData.page" :page-sizes="[10, 20, 30, 50]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <div class="tableDialog">
            <el-dialog title="详情" width="74%" :visible.sync="visible" :before-close="handleClose">
                <el-card class="box-card">
                    <label>商品详情</label>
                    <div class="GoodBox">
                        <el-row class="detail-box">
                            <el-col :span="24">
                                <div>商品名称：{{ productItem.title }}</div>
                                <div>商品类别：{{ productItem.third_category_name }}</div>
                                <div>
                                    商品图片：
                                    <div>
                                        <el-image v-for="item2 in productItem.covers"
                                            style="width: 100px; height: 100px" :src="item2"
                                            :preview-src-list="productItem.covers">
                                        </el-image>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card class="box-card cardOne">
                    <label>商品简介</label>
                    <br>
                    <br>
                    <div v-html="productItem.description" />
                </el-card>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { requertSelection, requertGoodsDetail, requertRemove } from '@/api/threeSelection'
export default {
    created() {
        this.getList()
    },
    data() {
        return {
            queryData: {
                page: 1,
                limit: 10,
            },
            loading: false,
            // 列表数据,
            tableData: [],
            total: null,
            //  控制弹框显示
            visible: false,
            productItem: {},
            url: '',
        }
    },
    methods: {
        async getList() {
            this.loading = true
            try {
                let res = await requertSelection(this.queryData);
                this.tableData = res.data.list
                this.total = res.data.total
            } catch (error) {

            } finally {
                this.loading = false
            }

        },
        handleSizeChange(val) {

            this.queryData.limit = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.queryData.page = val
            this.getList()
        },
        // 查看详情
        async Godetails(row) {
            this.visible = true
            let res = await requertGoodsDetail({ id: row.id })
            this.productItem = res.data
            this.url = res.data.covers[0]
        },
        removeLibrary(row) {
            this.$confirm('此操作将永久删除该选品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await requertRemove({ goods_ids: row.id })
                if (res.code == '') {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList()
                }

            })
        },
        // 关闭弹框
        handleClose() {
            this.visible = false
        },
    },
}
</script>

<style lang="scss" scoped>
.selectionLibrary {
    padding: 50px;
    box-sizing: border-box;

    .fenye {
        margin: 30px auto;
    }
}

.tableDialog {
    ::v-deep .el-dialog {
        margin-top: 0 !important;
    }

    padding: 40px;

    .detail-box {
        div {
            line-height: 60px;

            .proImage {
                margin-right: 20px;
                width: 80px;
                height: 80px;
            }
        }
    }

    .box-card {
        margin: 20px;
    }

    .cardOne {
        height: 400px;
        overflow-y: scroll;
    }
}


::v-deep .el-image {
    margin-left: 20px;
}

::v-deep .el-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>