<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 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 class="addDoalog">
            <el-dialog title="加入选品库" width="64%" :visible.sync="addVisible" @closed="addClose">
                <div class="platformClass">
                    <div class="businessGroup">
                        <h2>官方分类</h2>
                        <el-cascader v-model="form.classifyId" placeholder="请选择官方分类" clearable :props="props"
                            @change="handleChangeCascader" />
                    </div>
                    <div class="businessGroup">
                        <h2>商品分组</h2>
                        <el-cascader v-model="form.groupId" placeholder="请选择商品的分组" :options="businessGroup" clearable :props="{
                checkStrictly: false,
                label: 'groupName',
                value: 'shopGroupId',
                children: 'childs',
                checkStrictly: true,
                emitPath: false
            }" @change="handleChangeCascader" />
                    </div>
                </div>
                <div class="btn">
                    <el-button type="info" plain @click="cancelAdd">取消</el-button>
                    <el-button type="primary" @click="addProduct">加入选品库</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
let arrList = [];
import { requertGoodsList, requertGoodsDetail, requertAddGoods, commdityClassgetById, getClassify } from '@/api/threeSelection'
export default {
    props: {
        val: {
            type: Object,
        },
        queryData: {
            type: Object
        },
        businessGroup: {
            type: Array
        },
        classifyList: {
            type: Array
        }
    },
    created() {
        this.getList()
    },
    data() {
        return {
            //  控制加载
            loading: false,
            listQuery: {
                page: 1,
                limit: 10,
                search_words: '',
                source: 0,
                category_id: "",
                brand_ids: "",
                sort: "asc",
                type: "",
                is_free_shipping: "",
                shop_words: "",
                group_id: "",
                recommend: "",
                goods_type: ""
            },
            tableData: [],
            total: null,
            //  控制弹框显示
            visible: false,
            productItem: {},
            url: '',
            //  控制加入选品弹框
            addVisible: false,
            //  加入选品库的参数
            form: {
                classifyId: "",
                goods_ids: "",
                shopId: "",
                groupId: ""
            },
            //  异步加载
            props: {
                lazy: true,
                checkStrictly: true,
                label: 'classifyName',
                value: 'classifyId',
                lazyLoad(node, resolve) {
                    const { level, value } = node;
                    if (level === 0) {
                        getClassify({ page: 1, pageSize: 15 }).then(res => {
                            resolve(res.data.list)
                        })
                    } else if (level === 1) {
                        commdityClassgetById({ oneClassifyId: value }).then(res => {
                            // 将里面所有的childs.categoryName 换为classifyName
                            let arr = res.data.childs.map(item => {
                                item.classifyName = item.categoryName
                                item.classifyId = item.id
                                return item
                            })
                            arrList = arr
                            resolve(arr)
                        })
                    } else {
                        //  过滤出对应id
                        let arrItem = arrList.filter(item => {
                            return item.classifyId == value
                        })
                        if (arrItem.length <= 0) return
                        let arr = arrItem[0].childs.map(item => {
                            item.classifyName = item.categoryName
                            item.classifyId = item.id
                            return item
                        })
                        resolve(arr)
                    }
                }
            }
        }
    },
    methods: {
        handleChangeCascader() {
            console.log(this.form.classifyId)
        },
        //  加入选品库
        addLibrary(row) {
            this.addVisible = true
            this.form.goods_ids = row.id
        },
        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
            }

        },
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.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]
        },
        // 关闭弹框
        handleClose() {
            this.visible = false
        },
        //  取消加入选品
        cancelAdd() {
            this.addVisible = false
        },
        //  关闭弹框
        addClose() {
            this.form = {
                classifyId: "",
                goods_ids: "",
                shopId: "",
                groupId: ""
            }
        },
        //  加入选品
        async addProduct() {
            console.log(this.form)
            let obj = {...this.form}
            obj.classifyId =  this.form.classifyId[this.form.classifyId.length - 1]
            if(!obj.classifyId){
                this.$message({
                    message: '请选择平台分类',
                    type: 'warning'
                })
                return
            }
            if(obj.groupId == ""){
                this.$message({
                    message: '请选择商家分组',
                    type: 'warning'
                })
                return
            }
            let res = await requertAddGoods(obj)
            if(res.code == ""){
                this.$message({
                    message: '添加成功',
                    type: 'success'
                })
            }
            this.addVisible = false
        }
    },
}
</script>

<style lang="scss" scoped>
.tableCom {
    .fenye {
        margin: 30px auto;
    }
}

::v-deep .el-dialog__wrapper {
    padding: 40px;
    box-sizing: border-box;
}

.platformClass{

    .businessGroup{
        display: flex;
        align-items: center;
        gap: 40px;
        margin: 20px 0; 
    }
}
.btn{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:40px ;
    }

.box-card {
    margin: 20px;
}

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

.btnList {
    float: right;
    padding: 3px 0;
    width: 100px;
    height: 48px;
    border-radius: 4px;
    margin-right: 30px;
}

.addTitle {
    font-size: 24px;
    color: #333333;
    line-height: 50px;
}

.GoodBox {
    padding: 40px;

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

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

.tinymce-wrap {
    margin-top: 10px;
}

.check-image-dialog {
    margin-top: -100px;
    text-align: center;

    .img {
        text-align: center;
    }
}

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

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


::v-deep .el-image {
    margin-left: 20px;
}
</style>