<template>
    <div class="page-main page_red" :style="{ height: pageH }">
        <div class="page__content">
            <div class="page__box">
                <scroll-view class="category" :scroll-y="scrollY">
                    <ul class="category__list">
                        <li
                            class="category__item"
                            :class="{
                                'category__item--active':
                                    categoryId === item.id,
                            }"
                            v-for="(item, index) in categoryList"
                            :key="index"
                            @click="setCategory(item)"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </scroll-view>
                <div class="page__right">
                    <div class="category-sub" v-if="subCategoryList.length">
                        <div class="category-sub__main">
                            <scroll-view
                                class="category-sub__scroll"
                                :scroll-x="true"
                            >
                                <ul class="category-sub__list">
                                    <li
                                        class="category-sub__item"
                                        :class="{
                                            'category-sub__item--active':
                                                subCategoryId === item.id,
                                        }"
                                        v-for="(item, index) in subCategoryList"
                                        :key="index"
                                        @click="setSubCategory(item)"
                                    >
                                        {{ item.name }}
                                    </li>
                                </ul>
                            </scroll-view>
                        </div>
                        <i
                            class="iconfont iconarrow category-sub__toggle"
                            :class="{ active: !categoryAllVisible }"
                            @click="categoryToggle"
                        ></i>
                    </div>
                    <div class="category-sub-all" v-if="categoryAllVisible">
                        <div
                            class="category-sub-all__bg"
                            @click="categoryToggle"
                        ></div>
                        <scroll-view
                            class="category-sub-all__scroll"
                            :scroll-y="true"
                        >
                            <ul class="category-sub-all__list">
                                <li
                                    class="category-sub-all__item"
                                    v-for="(item, index) in subCategoryList"
                                    :key="index"
                                    @click="setSubCategory(item)"
                                    :class="{
                                        'category-sub-all__item--active':
                                            subCategoryId === item.id,
                                    }"
                                >
                                    {{ item.name }}
                                </li>
                            </ul>
                        </scroll-view>
                    </div>
                    <div class="goods">
                        <scroll-view
                            class="goods__scroll"
                            :scroll-y="scrollY"
                            @scrolltolower="getMoreGoods"
                        >
                            <ul class="menu">
                                <li
                                    class="menu__item"
                                    :class="{
                                        'menu__item--active':
                                            sort === 'SaleDesc',
                                    }"
                                    @click="setSort('SaleDesc')"
                                >
                                    <div class="menu__text">销量</div>
                                </li>
                                <li
                                    class="menu__item"
                                    :class="{
                                        'menu__item--active':
                                            sort === 'NewDesc',
                                    }"
                                    @click="setSort('NewDesc')"
                                >
                                    <div class="menu__text">新品</div>
                                </li>
                                <li
                                    class="menu__item"
                                    :class="{
                                        'menu__item--active':
                                            sort === 'Price' ||
                                            sort === 'PriceDesc',
                                    }"
                                    @click="setSort('Price')"
                                >
                                    <div class="menu__text">价格</div>
                                    <div
                                        class="menu__sort"
                                        :class="{
                                            'menu__sort--up': sort === 'Price',
                                            'menu__sort--down':
                                                sort === 'PriceDesc',
                                        }"
                                    ></div>
                                </li>
                            </ul>
                            <ul class="goods__list">
                                <li
                                    class="goods__item"
                                    v-for="(item, index) in goodsList"
                                    :key="index"
                                >
                                    <image
                                        class="goods__img"
                                        :src="item.image"
                                        mode="aspectFill"
                                        @click="jumpGoodsDetail(item)"
                                    ></image>
                                    <div class="goods__info">
                                        <div class="goods__box">
                                            <div
                                                class="goods__title"
                                                @click="jumpGoodsDetail(item)"
                                            >
                                                {{ item.name }}
                                            </div>
                                            <div
                                                class="goods__sale"
                                                @click="jumpGoodsDetail(item)"
                                            >
                                                <!-- <block v-if="item.saleStr">
                                                    销量: {{ item.saleStr }}
                                                </block> -->
                                            </div>
                                        </div>
                                        <div
                                            class="goods__price"
                                            @click="jumpGoodsDetail(item)"
                                        >
                                            <div class="goods__present">
                                                {{ "¥" + item.price / 100 }}
                                            </div>
                                            <div
                                                class="goods__original"
                                                v-if="item.tagPrice !== 0"
                                            >
                                                {{ "¥" + item.tagPrice / 100 }}
                                            </div>
                                        </div>
                                        <!-- 登录 -->
                                        <div class="btns">
                                            <block
                                                v-if="
                                                    user.login &&
                                                    !item.skus.length &&
                                                    item.cart
                                                "
                                            >
                                                <button
                                                    class="button button2"
                                                    @click.stop="
                                                        setCaetNum(item)
                                                    "
                                                >
                                                    <div
                                                        class="goods__remove"
                                                    ></div>
                                                </button>
                                                <span class="cart-num">{{
                                                    item.cart.count
                                                }}</span>
                                            </block>
                                            <button
                                                v-if="
                                                    user.login &&
                                                    !item.skus.length
                                                "
                                                class="button"
                                                @click.stop="
                                                    addSpec(
                                                        item,
                                                        'cart',
                                                        $event
                                                    )
                                                "
                                            >
                                                <div class="goods__add"></div>
                                            </button>
                                            <button
                                                v-else-if="
                                                    user.login &&
                                                    item.skus.length
                                                "
                                                class="button"
                                                @click.stop="
                                                    openSpec(
                                                        item,
                                                        'cart',
                                                        $event
                                                    )
                                                "
                                            >
                                                <div class="goods__add-text">
                                                    <!-- <span class="spec-num">99+</span> -->
                                                    选规格
                                                </div>
                                            </button>
                                            <!-- 未登录 -->
                                            <button
                                                v-if="
                                                    !user.login &&
                                                    !item.skus.length
                                                "
                                                class="button"
                                                lang="zh_CN"
                                                open-type="getUserInfo"
                                                @getuserinfo.stop="
                                                    openSpec(
                                                        item,
                                                        'cart',
                                                        $event
                                                    )
                                                "
                                            >
                                                <div class="goods__add"></div>
                                            </button>
                                            <button
                                                v-if="
                                                    !user.login &&
                                                    item.skus.length
                                                "
                                                class="button"
                                                lang="zh_CN"
                                                open-type="getUserInfo"
                                                @getuserinfo.stop="
                                                    openSpec(
                                                        item,
                                                        'cart',
                                                        $event
                                                    )
                                                "
                                            >
                                                <div class="goods__add-text">
                                                    <!-- <span class="spec-num">99+</span> -->
                                                    选规格
                                                </div>
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div
                                class="more-text"
                                v-if="goodsList.length && !isHaveMore"
                            >
                                - 没有更多商品了 -
                            </div>
                            <div
                                class="null"
                                v-if="loading && !goodsList.length"
                            >
                                <img
                                    class="null__img"
                                    src="/static/common/goods_null.jpg"
                                    alt
                                />
                                <div class="null__title">
                                    抱歉！没有找到相关商品~
                                </div>
                            </div>
                        </scroll-view>
                    </div>
                </div>
            </div>
        </div>
        <!-- <g-spec ref="spec" :goods="goods" :spec="'cart'"></g-spec> -->
        <g-spec-modal
            ref="spec"
            :goods="goods"
            :spec="'cart'"
            @change="modalCartChange()"
        ></g-spec-modal>
        <shop-cart
            v-if="loginAfter"
            ref="shopCart"
            @change="cartChange()"
        ></shop-cart>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import ShopCart from "../../components/shop-cart/index";
import GSpec from "./spec";
import GSpecModal from "./specModal";
import config from "../../common/js/config";
export default {
    name: "",
    components: { MyImage, ShopCart, GSpec, GSpecModal },
    props: {
        loginAfter: {
            type: Boolean,
            default: false,
        },
        cateId: {
            type: String,
            default: "",
        },
    },
    // 数据
    data() {
        return {
            categoryId: "",
            categoryList: [],
            subCategoryId: "",
            subCategoryList: [],
            sort: "SaleDesc", // 排序
            page: 1, // 页码
            goodsList: [],
            isHaveMore: true, // 是否有更多数据
            loading: false, // 是否加载完成
            cartList: [],

            goods: null, // 详情数据 加入购物车时用
            cartNum: 0, // 购物车数量
            categoryAllVisible: false, // 分类全部显示
            shopId: "", //店铺id
            index: 1,
            pageH: "90vh",
            scrollY: false,
        };
    },

    async created() {
        this.initHeight();
        this.refresh();
        if (this.cateId) {
            this.categoryId = this.cateId;
        }
    },

    // onPullDownRefresh() {
    //     this.getCategory();
    //     this.getGoodsList();
    //     this.$refs.shopCart.refresh();
    // },

    // 函数
    methods: {
        setScrollY(v) {
            this.scrollY = v;
        },

        refresh(setShop) {
            if (setShop) {
                this.categoryId = "";
                this.subCategoryId = "";
            }
            this.getCategory();
            // console.log(this.$refs.shopCart,1243)
            if (this.$refs.shopCart && this.$refs.shopCart.refresh) {
                this.$refs.shopCart.refresh();
            }
            // this.getGoodsList();
            // this.$refs.shopCart.refresh();
        },

        initHeight() {
            let menuButtonObject = uni.getMenuButtonBoundingClientRect();
            uni.getSystemInfo({
                success: (res) => {
                    // this.navTaberHeight = res.screenWidth?44/(res.screenWidth/750):88;
                    let statusBarHeight = res.statusBarHeight || 20;
                    let navHeight =
                        statusBarHeight +
                        menuButtonObject.height +
                        (menuButtonObject.top - statusBarHeight) * 2;
                    this.pageH = innerHeight - navHeight - navHeight + "px";
                },
            });
        },

        // 设置排序
        setSort(val) {
            const self = this;

            if (val === "Price") {
                self.sort = self.sort === "Price" ? "PriceDesc" : "Price";
            } else {
                self.sort = val;
            }

            self.getGoodsList();
        },

        // 获取商品分类
        getCategory() {
            const self = this;

            self.api.get("/Product/GetTypeList").then((res) => {
                if (res.data.length) {
                    self.categoryList = res.data;
                    for (let item of self.categoryList) {
                        if (item.name.length > 4) {
                            item.name = item.name.substr(0, 4) + "...";
                        }
                    }
                    if (!self.categoryId) {
                        self.categoryId = res.data[0].id || "";
                    }
                }
            });
        },

        // 获取商品二级分类
        getSubCategory() {
            const self = this;

            self.api
                .get("/Product/GetChildrenType", {
                    parentId: self.categoryId,
                })
                .then((res) => {
                    if (res.data.length) {
                        self.subCategoryList = res.data;
                        for (let item of self.subCategoryList) {
                            if (item.name.length > 4) {
                                item.name = item.name.substr(0, 4) + "...";
                            }
                        }
                    } else {
                        self.subCategoryList = [];
                    }

                    self.subCategoryId = "";
                    self.subCategoryList.unshift({
                        id: "",
                        name: "全部",
                    });

                    self.getGoodsList();
                });
        },

        // 设置商品分类
        setCategory(val) {
            const self = this;

            self.categoryId = val.id;
            this.categoryAllVisible = false;
            self.$emit("cateChange", val.id);
        },

        // 设置商品二级分类
        setSubCategory(val) {
            const self = this;

            self.subCategoryId = val.id;

            self.getGoodsList();
        },

        // 获取商品列表
        getGoodsList() {
            const self = this;
            uni.showLoading({
                title: "加载中...",
            });
            self.page = 1;
            self.api
                .get("/Product/GetList", {
                    typeId: self.subCategoryId || self.categoryId,
                    sort: self.sort,
                    pageIndex: self.page,
                })
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    if (res.data.data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.goodsList = res.data.data;
                    this.setGoodSale();
                    this.setGoodsList();
                    self.loading = true;
                    uni.hideLoading();
                });
        },

        // 获取更多商品
        getMoreGoods() {
            const self = this;

            self.api
                .get("/Product/GetList", {
                    typeId: self.subCategoryId || self.categoryId,
                    sort: self.sort,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    if (res.data.data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.goodsList = self.goodsList.concat(res.data.data);
                    this.setGoodSale();
                    this.setGoodsList();
                });
        },

        // 修改销量显示i
        setGoodSale() {
            for (let item of this.goodsList) {
                item.saleStr = "0";
                if (item.sale) {
                    if (item.sale <= 100) {
                        item.saleStr = item.sale;
                    } else if (item.sale <= 1000) {
                        item.saleStr = Math.floor(item.sale / 100) * 100 + "+";
                    } else if (item.sale <= 10000) {
                        item.saleStr =
                            Math.floor(item.sale / 1000) * 1000 + "+";
                    } else {
                        item.saleStr = "10000+";
                    }
                }
            }
        },

        // 跳转到商品详情
        jumpGoodsDetail(val) {
            const self = this;

            self.router.push({
                path: "/pages/goods/detail",
                query: {
                    goodsId: val.id,
                },
            });
        },

        // 添加购物车
        getDetail(item, callback) {
            const self = this;
            self.api
                .get(
                    "/Product/Detail",
                    {
                        id: item.id,
                    },
                    {
                        pass: true,
                    }
                )
                .then((res) => {
                    if (res.data) {
                        let data = JSON.parse(res.data);
                        data.cart = item.cart;
                        self.goods = data;
                        // this.ifSpec();
                        callback();
                    } else {
                        self.fn
                            .showModal({
                                title: "商品已下架",
                                showCancel: false,
                            })
                            .then((res) => {
                                if (res.confirm) {
                                    self.router.push({
                                        path: "/pages/goods/index",
                                        isTabBer: true,
                                    });
                                }
                            });
                    }
                });
        },

        // 打开规则选项
        openSpec(item, type, user) {
            const self = this;
            let userInfo = user.detail.userInfo;

            this.getDetail(item, () => {
                if (self.user.login) {
                    self.$refs.spec.num = 1;
                    self.$refs.spec.open(type, (res) => {
                        if (type === "cart") {
                            // self.fn.showToast("已成功加入购物车");
                            self.$refs.shopCart.refresh();
                        } else if (type === "buy") {
                            self.router.push({
                                path: "/pages/order/affirm",
                                query: {
                                    ids: res.data,
                                },
                            });
                        }
                    });
                } else {
                    if (userInfo) {
                        if (!self.user.login) {
                            self.api
                                .post("/User/UpdateUserWechatInfo", userInfo)
                                .then(() => {
                                    self.$store.commit("user/update", {
                                        login: true,
                                        userInfo: userInfo,
                                    });
                                });
                        }

                        self.$refs.spec.num = 1;
                        self.$refs.spec.open(type, (res) => {
                            if (type === "cart") {
                                // self.fn.showToast("已成功加入购物车");
                                self.$refs.shopCart.refresh();
                            } else if (type === "buy") {
                                self.router.push({
                                    path: "/pages/order/affirm",
                                    query: {
                                        ids: res.data,
                                    },
                                });
                            }
                        });
                    } else {
                        self.fn.showToast("授权失败请重试");
                    }
                }
            });
        },

        // 添加购物车
        addSpec(item) {
            const self = this;
            if (item.cart) {
                item.cart.count++;
                self.api
                    .post("/Order/UpdateItemCount", {
                        id: item.cart.id,
                        count: item.cart.count,
                    })
                    .then(() => {
                        self.$refs.shopCart.refresh();
                    })
                    .catch((res) => {
                        this.getCartLsit();
                    });
            } else {
                self.api
                    .post("/Order/AddCart", {
                        productId: item.id,
                        count: 1,
                    })
                    .then((res) => {
                        self.$refs.shopCart.refresh();
                    })
                    .catch((res) => {
                        this.getCartLsit();
                    });
            }
        },

        // 获取购物车列表
        getCartLsit() {
            const self = this;

            self.api
                .get("/Order/GetCartList", {
                    pageIndex: 1,
                    pageSize: 100,
                })
                .then((res) => {
                    res.data.shopItemList.forEach((item) => {
                        item.price = item.priceFmt;
                        item.active =
                            item.stock >= item.count &&
                            item.productStatus === 1;
                    });
                    self.cartList = res.data.shopItemList;
                    this.setGoodsList();
                });
        },

        setGoodsList() {
            // 删除全部
            for (let item of this.goodsList) {
                item.cart = null;
            }
            // 重新赋值
            for (let item of this.goodsList) {
                for (let cart of this.cartList) {
                    if (cart.productId === item.id) {
                        if (item.skus.length === 0) {
                            item.cart = cart;
                        } else {
                            if (item.cart) {
                                item.cart.push(cart);
                            } else {
                                item.cart = [cart];
                            }
                        }
                    }
                }
            }
            this.goodsList = [...this.goodsList];
        },

        cartChange() {},

        modalCartChange() {
            this.$refs.shopCart.refresh();
        },

        setCaetNum(item) {
            item.cart.count--;
            let num = item.cart.count;
            const self = this;
            if (num > 0) {
                self.api
                    .post("/Order/UpdateItemCount", {
                        id: item.cart.id,
                        count: num,
                    })
                    .then(() => {
                        self.$refs.shopCart.refresh();
                    });
            } else {
                let id = item.cart.id;
                delete item.cart;
                self.api
                    .delete("/Order/RemoveCart", {
                        ids: [id],
                    })
                    .then(() => {
                        self.$refs.shopCart.refresh();
                    });
            }
        },

        // 分类展开切换
        categoryToggle() {
            this.categoryAllVisible = !this.categoryAllVisible;
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        user() {
            return this.$store.state.user;
        },
    },

    // 数据监听
    watch: {
        categoryId(val) {
            const self = this;

            if (val) {
                self.getSubCategory();
            }
        },
    },
};
</script>

<style>
.page-main {
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
</style>

<style lang="scss" scoped>
.page {
    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(145);
        padding: 0 px(50);
        background-color: #fff;
        // box-shadow: 0 px(-5) px(10) #333;
    }

    &__content {
        position: relative;
        flex: 1;
        margin-top: px(5);
    }

    &__box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        justify-content: space-between;
    }

    &__right {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
    }
}

.search {
    display: flex;
    align-items: center;
    width: px(890);
    height: px(86);
    padding: 0 px(35);
    background-color: #f8f8f8;
    border-radius: px(43);

    &__icon {
        margin-top: px(10);
        font-size: px(60);
        color: #999;
    }

    &__text {
        margin-left: px(15);
        font-size: px(36);
        color: #999;
    }
}

.service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &__icon {
        font-size: px(50);
        color: #666;
    }

    &__text {
        font-size: px(30);
        color: #666;
    }
}

.category {
    width: px(225);
    height: 100%;
    background-color: #f8f6f7;

    &__item {
        position: relative;
        display: flex;
        justify-content: center;
        font-size: px(40);
        color: #888;
        background-color: #f8f6f7;
        padding: px(60) 0;

        &--active {
            // font-weight: 700;
            color: #333;
            background-color: #fff;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                z-index: 1;
                display: block;
                width: px(8);
                height: 100%;
                transform: translateY(-50%);
                border-radius: px(4);
                background-color: #27a34f;
            }
        }
    }
}

.category-sub {
    position: relative;
    height: px(130);
    background-color: #fff;
    margin-right: px(140);
    margin-left: px(20);
    &__scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    &__list {
        display: flex;
        align-items: center;
        height: 100%;
    }

    &__toggle {
        position: absolute;
        top: 0;
        right: px(-140);
        z-index: 2;
        width: px(140);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: px(30);
        transform: rotate(90deg);
        &.active {
            transform: rotate(-90deg);
        }
    }

    &__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        height: 100%;
        font-size: px(34);
        width: px(220);
        color: #333;
        height: px(70);
        border-radius: px(35);
        background-color: #f6f6f6;
        border: 1px solid #f6f6f6;
        color: #888;
        margin: 0 px(10);
        &--active {
            color: #262626;
            background-color: rgba(39, 163, 79, 0.2);
            border: 1px solid #27a34f;
            color: #27a34f;
        }
    }
}

.category-sub-all {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    margin-top: px(130);
    &__bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    &__scroll {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
    }
    &__list {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        padding: px(60) px(40);
    }
    &__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        height: 100%;
        font-size: px(34);
        width: px(220);
        color: #333;
        height: px(70);
        border-radius: px(35);
        background-color: #f6f6f6;
        border: 1px solid #f6f6f6;
        color: #888;
        margin: 0 px(20) px(30);
        flex-shrink: 0;
        &--active {
            color: #262626;
            background-color: rgba(39, 163, 79, 0.2);
            border: 1px solid #27a34f;
            color: #27a34f;
        }
    }
}

.goods {
    position: relative;
    flex: 1;
    border-top: 1px solid #f6f6f6;

    &__scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: px(35) px(35) 0 px(60);
        background-color: #fff;
        border-top: 1px solid #f6f6f6;
    }

    &__item {
        width: 100%;
        padding-bottom: px(100);
        overflow: hidden;
        // border-radius: px(20) px(20) 0 0;
        display: flex;
        justify-content: space-between;
    }

    &__img {
        flex-shrink: 0;
        margin-right: px(30);
        width: px(270);
        height: px(265);
    }

    &__info {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        width: 100%;
    }

    &__box {
        width: 100%;
    }
    &__title {
        width: 100%;
        @include omits(2);
        max-height: px(88);
        line-height: px(44);
        margin-top: px(30);
        font-size: px(36);
        color: #333;
    }

    &__price {
        // margin-top: px(30);
    }
    &__sale {
        font-size: px(30);
        line-height: px(40);
        color: #999;
        margin-top: px(20);
    }

    &__present {
        font-size: px(36);
        color: #000;
        font-weight: 600;
    }

    &__original {
        position: relative;
        font-size: px(30);
        color: #999;
        margin-top: px(20);
        text-decoration: line-through;
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(1);
            transform: translateY(-100%);
            background-color: #999;
        }
    }
    .btns {
        overflow: visible;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        display: flex;
        align-items: center;
    }
    .button {
        // padding: px(30) px(10) px(10) px(30);
    }
    .cart-num {
        // padding: px(30) px(10) px(10) px(30);
        padding: 0 px(30);
        box-sizing: border-box;
        min-width: px(60);
    }
    .num-input {
        overflow: visible;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    &__add-text {
        height: px(60);
        line-height: px(60);
        background-color: #27a34f;
        color: #fff;
        font-size: px(30);
        padding: 0 px(20);
        border-radius: px(30);
    }

    &__add {
        background-color: #27a34f;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        // box-shadow: px(1) px(2) px(6) #27a34f;
        position: relative;
        &::after,
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #fff;
        }
        &::after {
            transform: translate(-50%, -50%);
        }
        &::before {
            transform-origin: center;
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }

    &__remove {
        background-color: #fff;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        border: 1px solid #999;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #999;
            transform: translate(-50%, -50%);
        }
    }
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(110);
    margin-bottom: px(5);
    padding: 0 px(85);
    background-color: #fff;
    // box-shadow: 0 px(-5) px(10) #333;

    &__item {
        display: flex;
        align-items: center;
    }

    &__text {
        font-size: px(36);
        color: #888;
    }

    &__item--active &__text {
        color: #27a34f;
    }

    &__sort {
        margin-left: px(15);

        &:before {
            display: block;
            content: "";
            width: 0;
            height: 0;
            margin-bottom: px(10);
            border-width: px(12);
            border-style: solid;
            border-color: transparent transparent #ccc transparent;
        }

        &:after {
            display: block;
            content: "";
            width: 0;
            height: 0;
            border-width: px(12);
            border-style: solid;
            border-color: #ccc transparent transparent transparent;
        }

        &--up:before {
            border-color: transparent transparent #27a34f transparent;
        }

        &--down:after {
            border-color: #27a34f transparent transparent transparent;
        }
    }
}

.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}

.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: px(115);

    &__img {
        width: px(576);
        height: px(281);
    }

    &__title {
        margin-top: px(60);
        font-size: px(40);
        color: #666;
    }
}

.page_red {
    /deep/ {
        .category {
            &__item {
                &--active {
                    &:before {
                        background-color: #27a34f;
                    }
                }
            }
        }
        .category-sub {
            &__item {
                &--active {
                    background-color: rgba(39, 163, 79, 0.2);
                    border: 1px solid #27a34f;
                    color: #27a34f;
                }
            }
        }
        .category-sub-all {
            &__item {
                &--active {
                    color: #262626;
                    background-color: rgba(39, 163, 79, 0.2);
                    border: 1px solid #27a34f;
                    color: #27a34f;
                }
            }
        }
        .goods {
            &__add-text {
                background-color: #27a34f;
            }
            &__add {
                background-color: #27a34f;
                box-shadow: px(1) px(2) px(6) #27a34f;
            }
        }

        .menu {
            .menu__item--active .menu__text {
                color: #27a34f;
            }

            &__sort {
                &--up:before {
                    border-color: transparent transparent #27a34f transparent;
                }

                &--down:after {
                    border-color: #27a34f transparent transparent transparent;
                }
            }
        }
    }
}
</style>