<template>
    <div class="management">
        <div class="management-center">
            <div class="selection">
                <nav>
                    <div class="logo-class">
                        <img src="./image/logo.png" alt="">
                        <ul>
                            <li class="active">商品分类 <span><i class="el-icon-arrow-down"></i></span></li>
                            <li>商品库</li>
                            <li>精选推荐</li>
                        </ul>
                    </div>
                    <div class="btn-list">
                        <button @click="drawer = true"><i class="el-icon-goods"></i>已选商品&nbsp;&nbsp;&nbsp;20</button>
                        <button><i class="el-icon-plus"></i>采购单&nbsp;&nbsp;&nbsp;20</button>
                        <button><i class="el-icon-user-solid"></i>我的</button>
                    </div>
                </nav>
                <div class="bg">
                    <div class="search">
                        <h1>一站式选品便捷服务平台</h1>
                        <div class="ipt">
                            <span><i class="el-icon-search"></i></span>
                            <input type="text" placeholder="快速搜索输入商品名称/ID/品牌">
                        </div>
                        <div class="history">
                            <span>搜索记录：</span>
                            <ul>
                                <li>家用电器</li>
                                <li>家居日用</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="screen">
                    <div class="popular">
                        <div class="title">
                            <p>热门类目：</p><span :class="idx == null ? 'active' : ''" @click="allHot">全部热门</span>
                        </div>
                        <div class="all">
                            <ul>
                                <li v-for="(item, index) in 5" :key="item" @click="hotCategory(index)"
                                    :class="index == idx ? 'act' : ''">家用电器</li>
                            </ul>
                        </div>
                        <div class="more"><span>更多&nbsp;<i class="el-icon-arrow-down"></i></span></div>
                    </div>
                    <div class="brand">
                        <div class="title">
                            <p>品牌列表：</p>
                        </div>
                        <div class="all">
                            <div class="top">
                                <span :class="brandIdx == null ? 'allbrand' : ''" @click="allLetter">全部热门</span>
                                <ul>
                                    <li v-for="(item, index) in letterList" :class="brandIdx == index ? 'brandActive' : ''"
                                        @click="changeBrand(index)"> {{ item }}</li>
                                </ul>
                            </div>
                            <div class="bottom">
                                <ul>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                    <li>家用电器</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <main>
                    <div class="filter">
                        <div class="left">
                            <div class="text">最新上架</div>
                            <ul>
                                <li>
                                    <span>协议价</span>
                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
                                    <div class="box">
                                        <p>最低</p>
                                        <p>最高</p>
                                    </div>
                                </li>
                                <li>
                                    <span>利润率</span>
                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
                                    <div class="box">
                                        <p>最低</p>
                                        <p>最高</p>
                                    </div>
                                </li>
                                <li>
                                    <span>折扣</span>
                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
                                    <div class="box">
                                        <p>最低</p>
                                        <p>最高</p>
                                    </div>
                                </li>
                                <li>
                                    <span>毛利率</span>
                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
                                    <div class="box">
                                        <p>最低</p>
                                        <p>最高</p>
                                    </div>
                                </li>
                                <li>
                                    <span>销量</span>
                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
                                    <div class="box">
                                        <p>最低</p>
                                        <p>最高</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="right">
                            <button>全选页面商品</button>
                        </div>
                    </div>
                    <div class="card-list">
                        <div class="card" v-for="(item, index) in 12" :key="index">
                            <div class="card-content">
                                <div class="img-box">
                                    <img src="./image/test.png" alt="">
                                    <div class="btn-list">
                                        <button @click="details">查看详情</button>
                                        <button>加入选品</button>
                                        <!-- <button type="danger" class="danger" disabled>已加选品</button> -->
                                    </div>
                                </div>
                                <p class="text">输入商品名称最多显示2行字体未 14颜</p>
                                <div class="price">
                                    <div class="price-box">
                                        <p>协议价</p>
                                        <p>￥202</p>
                                    </div>
                                    <div class="price-box">
                                        <p>利润率</p>
                                        <p>85.2%</p>
                                    </div>
                                </div>
                            </div>
                            <div class="price-bottom">
                                <ul>
                                    <li>
                                        <p>指导价</p>
                                        <span>￥69.8</span>
                                    </li>
                                    <li>
                                        <p>最小利润</p>
                                        <span>￥0</span>
                                    </li>
                                    <li>
                                        <p>折扣</p>
                                        <span>7.3</span>
                                    </li>
                                    <li>
                                        <p>毛利率</p>
                                        <span>23.3%</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="broadside">
                            <div class="enterprise">
                                <img src="./image/qw.png" alt="">
                                <p>企微</p>
                            </div>
                            <ul>
                                <li>
                                    <i class="el-icon-service"></i>
                                    <span>客服</span>
                                </li>
                                <li>
                                    <i class="el-icon-edit-outline"></i>
                                    <span>反馈</span>
                                </li>
                                <li>
                                    <i class="el-icon-upload2"></i>
                                    <span>顶部</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </main>
                <footer>
                    <div class="txt">共4580个商品</div>
                    <div class="paging">
                        <el-pagination background layout="prev, pager, next" :total="1000">
                        </el-pagination>
                    </div>
                </footer>
            </div>
        </div>
        <!-- 侧边栏 -->
        <el-drawer :visible.sync="drawer" :with-header="false" size="25%">
            <mySelection @closeDrawer="closeDrawer"></mySelection>
        </el-drawer>
        <!-- 详情显示 -->
        <el-dialog title="详情" :visible.sync="centerDialogVisible" width="70%" center>
            <detailPage></detailPage>
        </el-dialog>
    </div>
</template>

<script>
import detailPage from "./components/detailPage"
import mySelection from "./components/mySelection"
import { getSelectionData } from "@/api/selectionCenter/selectionCenter"
export default {
    data() {
        return {
            letterList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
            drawer: false, // 控制已选商品的显示
            centerDialogVisible: false, // 控制详情的显示
            idx: null, // 控制热门类目的状态切换,
            brandIdx: null, // 控制品牌的状态切换
        }
    },
    created() {
        this.getSelectionList();
    },
    components: {
        detailPage,
        mySelection
    },
    methods: {
        //  获取选品中心的数据
        async getSelectionList() {
            let res = await getSelectionData({
                "productMarque": "",
                "search": "",
                "shelveState": "",
                "stock": "",
                "classifyId": "",
                "page": 1,
                "pageSize": 10
            })
            console.log(res);
        },
        //  全部热门
        allHot() {
            this.idx = null
        },
        // 热门类目的事件
        hotCategory(val) {
            this.idx = val
            this.brandIdx = null
        },
        //  品牌列表 全部热门的切换
        allLetter() {
            this.brandIdx = null
        },
        //  品牌列表状态切换
        changeBrand(val) {
            this.brandIdx = val
        },
        //  详情显示
        details() {
            this.centerDialogVisible = true
        },
        //  关闭抽屉框
        closeDrawer() {
            this.drawer = false
        }
    },
}
</script>

<style lang="scss" scoped>
@import url("./index.scss");

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #EF530E !important;
}

::v-deep .el-dialog__header {
    display: none;
}

//  侧边弹出框的颜色
::v-deep .el-drawer__body {
    background-color: rgb(237 237 237 / 85%);
}
</style>