<template>
    <div class="tableCom">
        <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="addLibrary(scope.row)">加入选品库</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenye">
                <el-pagination :current-page="listQuery.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>
</template>

<script>
import { requertGoodsList } from '@/api/threeSelection'
export default {
    methods: {
        async getList() {
            this.loading = true
            try {
                this.listQuery.category_id = this.val.id
                let res = await requertGoodsList(this.listQuery);
                this.tableData = res.data.list
                this.total = res.data.total
            } catch (error) {

            } finally {
                this.loading = false
            }

        },
    },
}
</script>

<style lang="scss" scoped></style>