<template>
    <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
        <div class="page__top">
            <span class="quick-text" @click="addNumGood">无码商品</span>
            <span class="quick-text" @click="goCacheList">挂单列表</span>
            <div class="search">
                <i class="iconfont icontubiao- search__icon"></i>
                <input
                    class="search__text"
                    v-model="searchVal"
                    @confirm="search()"
                    type="text"
                    placeholder="搜索你想要的商品"
                />
                <i
                    class="iconfont iconclose_icon search__icon remove-icon"
                    @click="closeSearchVal"
                ></i>
            </div>
        </div>
        <div class="page__content">
            <div class="page__box">
                <scroll-view class="category" :scroll-y="true">
                    <ul class="category__list">
                        <li
                            class="category__item"
                            :class="{
                                'category__item--active': categoryId === '',
                            }"
                            @click="setCategory('')"
                        >
                            全部
                        </li>
                        <li
                            class="category__item"
                            :class="{
                                'category__item--active':
                                    categoryId === item.id,
                            }"
                            v-for="(item, index) in categoryList"
                            :key="index"
                            @click="setCategory(item)"
                        >
                            {{ item.abbreviation || 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 === '',
                                        }"
                                        @click="setSubCategory('')"
                                    >
                                        全部
                                    </li>
                                    <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.abbreviation || item.name }}
                                    </li>
                                </ul>
                            </scroll-view>
                        </div>
                        <i
                            class="iconfont iconyoujiantou 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"
                                    @click="setSubCategory('')"
                                    :class="{
                                        'category-sub-all__item--active':
                                            subCategoryId === '',
                                    }"
                                >
                                    全部
                                </li>
                                <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="true"
                            @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"
                                >
                                    <div class="main">
                                        <my-image
                                            class="goods__img"
                                            :src="item.image"
                                            @click="addCart(item)"
                                        ></my-image>
                                        <div
                                            class="goods__info"
                                            @click="addCart(item)"
                                        >
                                            <div class="goods__box">
                                                <div class="goods__title">
                                                    {{ item.name }}
                                                </div>
                                                <div
                                                    class="goods__sale sale-price"
                                                >
                                                    <span v-if="item.price">
                                                        ￥{{ item.price / 100 }}
                                                    </span>
                                                </div>
                                                <div
                                                    class="goods__sale sale-old"
                                                >
                                                    <span v-if="item.tagPrice">
                                                        ￥{{
                                                            item.tagPrice / 100
                                                        }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class="tools"
                                            v-if="item.skus.length"
                                            @click="openSpec(item)"
                                        >
                                            <div class="select-spec">
                                                <!-- <span class="spec-num">99+</span> -->
                                                选规格
                                            </div>
                                        </div>
                                        <div
                                            class="tools"
                                            v-if="
                                                ifSelect(item) &&
                                                !item.skus.length
                                            "
                                        >
                                            <span class="select-num">{{
                                                ifSelect(item).select_num
                                            }}</span>
                                            <div
                                                class="remove-box"
                                                @click="removeSelect(item)"
                                            >
                                                <my-image
                                                    class="remove"
                                                    src="/static/icon/close2.png"
                                                ></my-image>
                                            </div>
                                        </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>
        <div class="page__bottom-block"></div>
        <div class="page__bottom">
            <div class="select-list" v-if="showSelectList">
                <div class="bg" @click="showSelectList = false"></div>
                <div class="list-main">
                    <div class="select-head">
                        <span class="head-tit">已选商品</span>
                        <div class="head-r" @click="removeSelectAll">
                            <my-image
                                class="all-remove"
                                src="/static/icon/remove.png"
                            ></my-image>
                            清空
                        </div>
                    </div>
                    <ul class="list-box">
                        <li
                            class="select-item"
                            v-for="item of selectList"
                            :key="item.id"
                        >
                            <div class="item-l">
                                {{ item.name }}
                            </div>
                            <div class="item-r">
                                <div class="price">
                                    <div class="new-price">
                                        ￥{{ item | selectItemPrice("price") }}
                                    </div>
                                    <div class="old-price" v-if="item.tagPrice">
                                        ￥{{
                                            item | selectItemPrice("tagPrice")
                                        }}
                                    </div>
                                </div>
                                <div class="tool">
                                    <span
                                        class="remove-num"
                                        @click="selectRemove(item)"
                                    ></span>
                                    <span class="num-input">{{
                                        item.select_num
                                    }}</span>
                                    <span
                                        class="add-num"
                                        @click="selectAdd(item)"
                                    ></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bottom-l">
                <div
                    class="cart-icon"
                    @click="showSelectList = !showSelectList"
                >
                    <span class="num" v-if="selectList.length">{{
                        selectList.length | maxNumInt(99)
                    }}</span>
                    <my-image
                        class="img"
                        src="/static/icon/cart.png"
                    ></my-image>
                </div>
                <span class="price">￥ {{ selectPrice }}</span>
            </div>
            <div class="bottom-r">
                <span class="btn cache" @click="viewCache">挂单</span>
                <span class="btn" @click="submit">结算</span>
            </div>
        </div>
        <!-- 增加无码商品 -->
        <uni-popup ref="popupGood" type="dialog">
            <uni-popup-dialog
                mode="input"
                :title="'无码商品'"
                :content="' '"
                placeholder="商品单价"
                @confirm="addNumGoodConfirm"
            ></uni-popup-dialog>
        </uni-popup>
        <!-- 规格选择 -->
        <g-spec-modal ref="spec" @change="modalCartChange()"></g-spec-modal>
        <!-- 挂单 -->
        <uni-popup ref="popupCache" type="dialog">
            <uni-popup-dialog
                mode="input"
                :title="'牌号'"
                :inputType="'number'"
                :content="' '"
                placeholder="请输入牌号"
                @confirm="cacheConfirm"
            ></uni-popup-dialog>
        </uni-popup>
        <!-- <div class="cache-modal" v-if="cacheShow">
            <div class="bg" @click="cacheShow = false"></div>
            <div class="cache-body">
                <div class="head">
                    <div class="tit">挂单</div>
                    <div class="close" @click="cacheShow = false">取消</div>
                </div>
                <div class="body">
                    <div class="item">
                        <input
                            type="number"
                            placeholder="牌号"
                            v-model="cacheForm.num"
                            :maxlength="8"
                        />
                    </div>
                </div>
                <div class="cache-btn" @click="cacheSubmit">确定</div>
            </div>
        </div> -->
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
import uniPopup from "../../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../../components/uni-popup/uni-popup-dialog";
import uniPopupSpec from "../../../components/uni-popup/uni-popup-spec";
import config from "../../../common/js/config";
import MyShare from "../../../components/share/index";
import GSpecModal from "./specModal";
export default {
    name: "",
    filters: {
        selectItemPrice(item, priceName) {
            if (item._sku) {
                let num = (item._sku[priceName] / 100) * item.select_num;
                return num.toFixed(2);
            } else {
                let num = (item[priceName] / 100) * item.select_num;
                return num.toFixed(2);
            }
        },
    },
    components: {
        MyImage,
        uniPopup,
        uniPopupDialog,
        MyShare,
        uniPopupSpec,
        GSpecModal,
    },
    // 数据
    data() {
        return {
            storeId: "",
            categoryId: "",
            categoryList: [],
            subCategoryId: "",
            subCategoryList: [],
            sort: "SaleDesc", // 排序
            page: 1, // 页码
            goodsList: [],
            isHaveMore: true, // 是否有更多数据
            loading: false, // 是否加载完成
            cartList: [],

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

            // 搜索
            searchVal: "",

            // 购物车选择
            selectList: [],
            showSelectList: false,

        };
    },

    onLoad() {
        const self = this;
        if (this.user.storeId) {
            this.storeId = this.user.storeId;
        }
    },

    async onShow() {
        let closeSelectList = this.$store.state.common.closeSelectList;
        if (closeSelectList) {
            this.selectList = [];
        }
        this.getCategory();
    },

    onPullDownRefresh() {
        this.getCategory();
        this.getGoodsList();
    },

    onShareAppMessage() {
        const self = this;
        let obj = {
            ...self.$mp.query,
            storeId: self.$store.state.common.storeId,
        };
        return {
            path: self.router.getPath(self.$mp.page.route, obj),
        };
    },

    // 函数
    methods: {
        // 设置排序
        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/GetProductType", {
                    storeId: this.storeId,
                })
                .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) + "...";
                            }
                        }
                    }
                    this.getGoodsList();
                });
        },

        // 设置商品分类
        setCategory(val) {
            const self = this;
            this.categoryAllVisible = false;
            // this.searchVal = "";
            if (val === "") {
                // 仓库
                self.categoryId = "";
            } else {
                self.categoryId = val.id;
            }
        },

        // 设置商品二级分类
        setSubCategory(val) {
            const self = this;
            if (val === "") {
                self.subCategoryId = "";
            } else {
                self.subCategoryId = val.id;
            }

            self.getGoodsList();
        },

        // 获取商品列表
        getGoodsList() {
            const self = this;
            self.page = 1;
            let sendData = {
                storeId: this.storeId,
                sort: self.sort,
                pageIndex: self.page,
                pageSize: 20,
                type: self.subCategoryId || self.categoryId,
                status: this.typeStatus,
                keyword: this.searchVal || "",
            };

            uni.showLoading({
                title: "加载中...",
            });
            self.api.get("/Product/GetSlimList", sendData).then((res) => {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (res.data.data.length) {
                    self.page++;
                    self.isHaveMore = true;
                } else {
                    self.isHaveMore = false;
                }

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

        // 获取更多商品
        getMoreGoods() {
            const self = this;
            if (!this.isHaveMore) {
                return;
            }
            let sendData = {
                storeId: this.storeId,
                sort: self.sort,
                pageIndex: self.page,
                pageSize: 20,
                type: self.subCategoryId || self.categoryId,
                status: this.typeStatus,
            };
            self.api.get("/Product/GetSlimList", sendData).then((res) => {
                if (res.data.data.length) {
                    self.page++;
                } else {
                    self.isHaveMore = false;
                }

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

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

        // 获取二级分类
        getSubCategory(id) {
            let flag = true;
            for (let item of this.categoryList) {
                if (item.id === id && item.children) {
                    flag = false;
                    this.subCategoryList = item.children;
                }
            }
            if (flag) {
                this.subCategoryList = [];
            }
            this.subCategoryId = "";
            this.getGoodsList();
        },

        // 搜索
        search() {
            if (this.searchVal) {
                // this.categoryId = "";
                // this.subCategoryId = "";
                // this.subCategoryList = [];
                this.getGoodsList();
            }
        },

        closeSearchVal() {
            this.searchVal = "";
            this.getGoodsList();
        },

        addCart(good) {
            if (good.skus.length) {
                return;
            }
            let cloneGood = { ...good };
            let flag = true;
            for (let item of this.selectList) {
                if (item.id === cloneGood.id) {
                    item.select_num++;
                    flag = false;
                }
            }
            if (flag) {
                cloneGood.select_num = 1;
                this.selectList.push(cloneGood);
            }
        },

        ifSelect(good) {
            for (let item of this.selectList) {
                if (item.id === good.id) {
                    return item;
                }
            }
            return undefined;
        },

        removeSelect(good) {
            let arr = [];
            for (let item of this.selectList) {
                if (item.id === good.id) {
                    if (item.select_num !== 1) {
                        item.select_num--;
                        arr.push(item);
                    }
                } else {
                    arr.push(item);
                }
            }
            this.selectList = arr;
        },

        selectRemove(val) {
            let arr = [];
            for (let item of this.selectList) {
                if (val.id === item.id) {
                    if (item.select_num !== 1) {
                        item.select_num--;
                        arr.push(item);
                    }
                } else {
                    arr.push(item);
                }
            }
            this.selectList = arr;
        },

        selectAdd(val) {
            let arr = [];
            for (let item of this.selectList) {
                if (val.id === item.id) {
                    item.select_num++;
                    arr.push(item);
                } else {
                    arr.push(item);
                }
            }
            this.selectList = arr;
        },
        removeSelectAll() {
            this.fn
                .showModal({
                    content: "是否确认清空选中?",
                })
                .then((res) => {
                    if (res.confirm) {
                        this.selectList = [];
                        this.showSelectList = false;
                    }
                });
        },

        addNumGood() {
            this.$refs.popupGood.open({
                type: "dialog",
            });
        },

        addNumGoodConfirm(done, value) {
            if (value) {
                let num = Number(value);
                if (isNaN(num)) {
                    this.fn.showToast("请输入正确的库存");
                    return;
                }
                console.log(value);
                this.selectList.push({
                    name: "无码商品",
                    price: value * 100,
                    id: Date.now(),
                    select_num: 1,
                    _type: "-1",
                });
                done();
            } else {
                this.fn.showToast("请输入商品单价");
            }
        },

        submit() {
            if (this.selectList.length === 0) {
                return this.fn.showToast("请选择收银商品");
            }
            // console.log(JSON.stringify(this.selectList));
            this.$store.commit("common/update", {
                cashierGoodList: [...this.selectList],
            });
            // this.selectList = [];
            this.router.push("/pages/manage/cashier/settlement");
        },

        // 打开规格
        openSpec(good) {
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            let self = this;
            this.api
                .get("/Product/Detail", {
                    id: good.id,
                })
                .then((goodRes) => {
                    uni.hideLoading();
                    if (goodRes.success) {
                        let goodDetail = goodRes.data;
                        goodDetail.skuInfo = JSON.parse(goodDetail.skuInfo);
                        for (let item of this.selectList) {
                            if (item.id === good.id && item._sku) {
                                for (let skuItem of goodDetail.skuInfo.skus) {
                                    if (item._sku.skuId === skuItem.skuId) {
                                        skuItem.select_num = item.select_num;
                                    }
                                }
                            }
                        }

                        self.$refs.spec.open(goodDetail, (res, type) => {
                            if (type === "add") {
                                this.selectList.push(res);
                            } else {
                                let arr = [];
                                for (let item of this.selectList) {
                                    if (
                                        item.id === res.id &&
                                        item._sku.skuId === res._sku.skuId
                                    ) {
                                        if (res.select_num !== 0) {
                                            item.select_num = res.select_num;
                                            arr.push(item);
                                        }
                                    } else {
                                        arr.push(item);
                                    }
                                }
                                this.selectList = arr;
                            }
                        });
                    } else {
                        self.fn.showModal({
                            title: "获取商品出错",
                            showCancel: false,
                        });
                    }
                });
        },

        modalCartChange() {},

        // 挂单显示
        viewCache() {
            if(this.selectList.length === 0){
                return  this.fn.showToast("请先选择商品");
            }
              this.$refs.popupCache.open({
                type: "dialog",
            });
        },

        cacheConfirm(done,value) {

            this.cacheShow = false;
            console.log(value)
            if(!value){
                return this.fn.showToast("请输入牌号");
            }
            uni.showLoading({
                title: "提交中...",
                mask: true,
            });
            let sendData = {
                suspendNo: value,
                orderItems: [],
            }
            for(let item of this.selectList){
                sendData.orderItems.push({
                     productId: item.id,
                    skuId: item._sku ? item._sku.skuId : "",
                    count: item.select_num,
                })
            }
            this.api
                .post(
                    "/order/Suspend",
                    sendData,
                    { pass: true }
                )
                .then((res) => {
                    this.btnLoading = false;
                    uni.hideLoading();
                    if (res.success) {
                        this.fn.showToast("挂单成功");
                        this.selectList = [];
                        done();
                    } else {
                        this.fn.showModal({
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },

        goCacheList(){
            this.router.push('/pages/manage/cashier/cache')
        }
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        user() {
            return this.$store.state.user.user;
        },
        selectPrice() {
            let num = 0;
            for (let item of this.selectList) {
                if (item._sku) {
                    num += (item._sku.price / 100) * item.select_num;
                } else {
                    num += (item.price / 100) * item.select_num;
                }
            }
            num = num.toFixed(2);
            return num;
        },
    },

    // 数据监听
    watch: {
        categoryId(val) {
            const self = this;
            self.getSubCategory(val);
        },
    },
};
</script>

<style>
page {
    height: 100%;
    background-color: #fff;
}
</style>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__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;
    }
    .page__bottom-block {
        height: px(130);
    }
    &__bottom {
        height: px(130);
        background-color: #343434;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        overflow: visible;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 100;
        .btn {
            width: px(240);
            height: 100%;
            font-size: px(44);
            color: #fff;
            background-color: #fd1135;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-icon {
            width: px(130);
            height: px(130);
            border-radius: 50%;
            border-top: 1px solid #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: px(-20);
            left: 0;
            z-index: 1;
            background-color: #343434;
            position: relative;
            .num {
                color: #fff;
                padding: 0 px(10);
                font-size: px(30);
                min-width: px(44);
                min-height: px(44);
                text-align: center;
                line-height: px(44);
                border-radius: px(22);
                background-color: #fd1135;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
            }
            .img {
                width: px(55);
                height: px(55);
                /deep/ img {
                    width: px(55);
                    height: px(55);
                }
            }
        }
        .price {
            padding-left: px(30);
            font-size: px(46);
            color: #fff;
        }
        .bottom-l {
            margin-left: px(30);
            position: relative;
            overflow: visible;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
    }
}
.bottom-r {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .cache {
        background-color: #343434;
    }
}
.select-list {
    position: fixed;
    z-index: -1;
    height: 100vh;
    left: 0;
    right: 0;
    bottom: 0;
    .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .list-main {
        position: absolute;
        left: 0;
        bottom: px(130);
        z-index: 1;
        width: 100%;
        background-color: #fff;
    }
    .select-head {
        height: px(88);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f7f7f7;
        border-bottom: 1px solid #f1f1f1;
        font-size: px(36);
        padding: 0 px(30);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        .head-tit {
            color: #666;
            font-size: px(40);
        }
        .head-r {
            display: flex;
            align-items: center;
            color: #999;
        }
        .all-remove {
            width: px(36);
            height: px(36);
            margin-right: px(10);
            /deep/ img {
                width: px(36);
                height: px(36);
            }
        }
    }
    .list-box {
        margin-top: px(88);
        overflow: auto;
        height: 50vh;
        min-height: px(1000);
    }
    .select-item {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        height: px(140);
        padding: px(0) px(30);
        .item-l,
        .item-r {
            width: 50%;
            border-bottom: 1px solid #f1f1f1;
            height: 100%;
        }
        .item-l {
            @include omit(50%);
            font-size: px(40);
            line-height: px(140);
        }
        .item-r {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .tool {
            display: flex;
            align-items: center;
            .num-input {
                width: px(140);
                font-size: px(40);
                text-align: center;
            }
        }
        .remove-num,
        .add-num {
            display: block;
            width: px(50);
            height: px(50);
            border-radius: 50%;
            position: relative;
        }
        .remove-num {
            border: 1px solid #999;
        }
        .remove-num::after {
            content: "";
            width: 60%;
            height: 2px;
            background-color: #999;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .add-num {
            border: 1px solid #fd1135;
            background-color: #fd1135;
        }
        .add-num::after,
        .add-num::before {
            content: "";
            width: 60%;
            height: 2px;
            background-color: #fff;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .add-num::before {
            transform: translate(-50%, -50%) rotate(90deg);
            transform-origin: center;
        }
        .price {
            .new-price {
                font-size: px(38);
                color: #fd1135;
            }
            .old-price {
                font-size: px(30);
                color: #999;
                text-decoration: line-through;
            }
        }
    }
}

.search {
    display: flex;
    align-items: center;
    width: 100%;
    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;
        width: 100%;
    }
}

.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) 0 0 0;
        background-color: #fff;
        border-top: 1px solid #f6f6f6;
    }

    &__item {
        width: 100%;
        margin-bottom: px(60);
        border-bottom: 1px solid #f1f1f1;
    }
    .main {
        width: 100%;
        overflow: hidden;
        // border-radius: px(20) px(20) 0 0;
        display: flex;
        justify-content: space-between;
        padding: 0 px(35);
    }

    &__img {
        flex-shrink: 0;
        margin-right: px(30);
        /deep/ img {
            width: px(230);
            height: px(230);
        }
    }

    &__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(32);
        line-height: px(40);
        color: #999;
        margin-top: px(20);
        span ~ span {
            margin-left: px(20);
        }
    }
    .sale-price {
        color: #f00;
        font-size: px(40);
    }
    .sale-old {
        margin-top: px(10);
        text-decoration: line-through;
    }

    &__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;
        width: 100%;
        display: flex;
        align-items: center;
        max-width: 100%;
        border-top: 1px solid #f1f1f1;
        margin-top: px(20);
    }
    .btn {
        width: 25%;
        height: px(100);
        line-height: px(100);
        // background-color: #27a34f;
        color: #333;
        font-size: px(40);
        padding: 0 px(20);
        text-align: center;
        & ~ .btn {
            border-left: 1px solid #f1f1f1;
        }
    }
    .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;
    }

    &__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: #fe6661;
                    }
                }
            }
        }
        .category-sub {
            &__item {
                &--active {
                    background-color: rgba(254, 102, 97, 0.2);
                    border: 1px solid #fe6661;
                    color: #fe6661;
                }
            }
        }
        .category-sub-all {
            &__item {
                &--active {
                    color: #262626;
                    background-color: rgba(254, 102, 97, 0.2);
                    border: 1px solid #fe6661;
                    color: #fe6661;
                }
            }
        }
        .goods {
            &__add-text {
                background-color: #fe6661;
            }
            &__add {
                background-color: #fe6661;
                box-shadow: px(1) px(2) px(6) #fe6661;
            }
        }

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

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

                &--down:after {
                    border-color: #fe6661 transparent transparent transparent;
                }
            }
        }
    }
}
.item_one {
    border-bottom: 3px solid #c9c9c9;
    background-color: #efefef;
    padding: px(20) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.switch {
    transform: scale(0.7);
}
.canvas {
    position: fixed;
    top: -100%;
    left: -100%;
    z-index: -11;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    &__content {
        position: relative;
        width: 100%;
        height: 100%;
        padding: px(200) px(80) 0;
        z-index: 10;
    }

    &__close {
        position: absolute;
        top: px(50);
        right: px(120);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(100);
        height: px(100);
        border-radius: 50%;
        border: solid px(3) #fff;

        &:after {
            content: "";
            position: absolute;
            top: px(100);
            left: 50%;
            z-index: 1;
            display: block;
            width: px(3);
            height: px(50);
            transform: translateX(-50%);
            background-color: #fff;
        }
    }

    &__img {
        width: px(60);
        height: px(60);
    }

    &__box {
        width: px(920);
        height: px(1483);
        background-color: #fff;
    }
}
.remove-icon {
    padding-left: px(20);
}
.quick-text {
    font-size: px(40);
    color: #4395ff;
    flex-shrink: 0;
    margin-right: px(30);
}
.tools {
    display: flex;
    align-items: center;
    justify-content: center;
    .select-num {
        font-size: px(40);
        color: #333;
    }
    .remove-box {
        height: 100%;
        padding-left: px(20);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .remove {
        display: block;
        width: px(66);
        height: px(66);
        background-color: #e11b34;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        /deep/ img {
            width: px(50);
            height: px(50);
        }
    }
}
.select-spec {
    height: px(60);
    line-height: px(60);
    background-color: #27a34f;
    color: #fff;
    font-size: px(30);
    padding: 0 px(20);
    border-radius: px(30);
    flex-shrink: 0;
}
.cache-modal {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1005;
    .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .cache-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background-color: #fff;
    }
    .head {
        background-color: #f4f4f4;
        height: px(130);
        padding: 0 px(35);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: px(40);
        .close {
            color: #149eba;
        }
    }
    .body {
    }
    .item {
        padding: px(10) px(35);
        border-bottom: 1px solid #f1f1f1;
        input {
            height: px(120);
            width: 100%;
        }
    }
    .cache-btn {
        width: 100%;
        height: px(120);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #27a34f;
        color: #fff;
        font-size: px(40);
    }
}
</style>