<template>
    <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
        <scroll-view
            class="page__scroll"
            :scroll-y="true"
            @scrolltolower="getMoreGoods"
        >
            <div class="a-info" v-if="activityData">
                <div class="head">
                    <my-image
                        class="a-img"
                        :src="activityData.brandLogo"
                    ></my-image>
                    <div class="head-con">
                        <div class="a-name">{{ activityData.brandName }}</div>
                        <div
                            class="des"
                            v-if="
                                activityData.activityLabelBOList &&
                                activityData.activityLabelBOList.length
                            "
                        >
                            <!-- <span class="key">标签：</span> -->
                            <span
                                class="tag-item"
                                v-for="item of activityData.activityLabelBOList"
                                :key="item.prices"
                                >{{ item.prices }}</span
                            >
                        </div>
                    </div>
                </div>
                <div class="time">
                    活动时间：{{ activityData.endTime | viewDate2 }}
                </div>
                <div class="des" v-if="activityData.description">
                    <span class="key">品牌描述：</span>
                    <span
                        class="val"
                        @click="
                            showContent('品牌描述', activityData.description)
                        "
                        >{{ activityData.description }}</span
                    >
                    <my-image
                        class="arrow"
                        src="/static/common/arrows_left.png"
                    ></my-image>
                </div>
                <div class="des" v-if="activityData.deliveryDesc">
                    <span class="key">发货描述：</span>
                    <span
                        class="val"
                        @click="
                            showContent('发货描述', activityData.deliveryDesc)
                        "
                        >{{ activityData.deliveryDesc }}</span
                    >
                    <my-image
                        class="arrow"
                        src="/static/common/arrows_left.png"
                    ></my-image>
                </div>
            </div>

            <ul class="menu">
                <li
                    class="menu__item"
                    :class="{ 'menu__item--active': sort === 2 }"
                    @click="setSort(2)"
                >
                    <div class="menu__text">销量</div>
                </li>
                <li
                    class="menu__item"
                    :class="{ 'menu__item--active': sort === 3 }"
                    @click="setSort(3)"
                >
                    <div class="menu__text">新品</div>
                </li>
                <li
                    class="menu__item"
                    :class="{
                        'menu__item--active': sort === 1,
                    }"
                    @click="setSort('Price')"
                >
                    <div class="menu__text">价格</div>
                    <div
                        class="menu__sort"
                        :class="{
                            'menu__sort--up': asc == 1 && sort === 1,
                            'menu__sort--down': asc == 0 && sort === 1,
                        }"
                    ></div>
                </li>
            </ul>
            <ul class="goods">
                <li
                    class="goods__item"
                    v-for="(item, index) in goodsList"
                    :key="index"
                >
                    <my-image
                        class="goods__img"
                        :src="item.pictureUrls[0]"
                        @click="jumpGoodsDetail(item)"
                    ></my-image>
                    <div class="goods__title" @click="jumpGoodsDetail(item)">
                        {{ item.name }}
                    </div>
                    <div
                        class="goods__coupon"
                        v-if="item.coupon"
                        @click="jumpGoodsDetail(item)"
                    >
                        {{ item.coupon }}
                    </div>
                    <div class="goods__price">
                        <div
                            class="goods__present"
                            @click="jumpGoodsDetail(item)"
                        >
                            <!-- <span class="goods__rmb"></span> -->
                            <span class="goods__big"
                                >¥{{ item.minPrice / 100 }}</span
                            >
                        </div>
                        <div
                            class="goods__original"
                            @click="jumpGoodsDetail(item)"
                            v-if="item.tagPrice !== 0"
                        >
                            {{ "¥" + item.tagPrice / 100 }}
                        </div>
                    </div>
                    <!-- 登录 -->
                    <div class="btns"></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_2.jpg"
                    alt
                />
                <div class="null__title">抱歉！没有找到相关商品~</div>
            </div>
        </scroll-view>
        <!-- <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 ref="shopCart" @change="cartChange()"></shop-cart> -->
        <!-- 描述 -->
        <div class="des-modal" v-if="desModalVisible">
            <div class="bg" @click="hideContent"></div>
            <div class="main">
                <div class="head">
                    <span class="head-tit">{{ desModalTitle }}</span>
                    <div class="head-r" @click="hideContent">关闭</div>
                </div>
                <div class="body">
                    {{ desModalDes }}
                </div>
            </div>
        </div>
        <canvas
            class="canvas__forward"
            canvas-id="canvas2"
            :disable-scroll="true"
        ></canvas>
    </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 FInputNumber from "../../components/form/inputNumber";

export default {
    name: "",
    components: { MyImage, ShopCart, FInputNumber },
    // 数据
    data() {
        return {
            aid: "",
            sort: 2, // 排序
            asc: 0,
            page: 1, // 页码
            goodsList: [],
            isHaveMore: true, // 是否有更多数据
            loading: false, // 是否加载完成
            goods: null, // 详情数据 加入购物车时用
            activityData: null,
            cartNum: 0, // 购物车数量
            cartList: [],

            // 文字弹框
            desModalVisible: false,
            desModalTitle: "",
            desModalDes: "",

            canvasforwardPath: "",
        };
    },

    onLoad() {
        const self = this;
        self.fn.shareMenu();

        if (!self.loading) {
            uni.showLoading({
                title: "加载中...",
            });
        }
    },

    async onShow() {
        const self = this;

        await self.fn.init();
        self.aid = self.$mp.query.aid;
        self.getGoodsList();
        this.getActivity();
    },

    onShareAppMessage() {
        const self = this;
        let obj = {
            ...self.$mp.query,
            shopId: this.activeShop.id,
            uid: this.user.user.id,
        };
        if (this.activeShop.store) {
            obj.storeId = this.activeShop.store.id;
        }
        let title =
            self.activityData.brandName +
            ` (${self.activityData.onlineProductCount}款)`;
        title += `【${self.activityData.minPrice / 100}元起】`;
        return {
            title: title,
            imageUrl: self.canvasforwardPath || self.activityData.brandLogo,
            path: self.router.getPath(self.$mp.page.route, self.$mp.query),
        };
    },

    onPullDownRefresh() {
        const self = this;
        self.getGoodsList();
        // this.getCartLsit();
        this.getActivity();
        // this.$refs.shopCart.refresh();
    },

    // 函数
    methods: {
        showContent(tit, con) {
            this.desModalVisible = true;
            this.desModalTitle = tit;
            this.desModalDes = con;
        },

        hideContent() {
            this.desModalVisible = false;
            this.desModalTitle = "";
            this.desModalDes = "";
        },
        // 设置排序
        setSort(val) {
            const self = this;

            if (val === "Price") {
                self.sort = 1;
                self.asc = self.asc === 1 ? 0 : 1;
            } else {
                self.asc = 0;
                self.sort = val;
            }
            this.$forceUpdate();

            self.getGoodsList();
        },
        getActivity() {
            this.api
                .get("/Product/GetActivity", {
                    aid: this.aid,
                })
                .then((res) => {
                    let data = JSON.parse(res.data);
                    this.activityData = data;
                    this.fn.setTitle(data.brandName);
                    this.creationShare2();
                });
        },

        // 获取商品列表
        getGoodsList() {
            const self = this;

            let keyword = !self.categoryId && !self.brandId ? self.title : "";

            self.page = 1;
            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Product/GetHHSGProductList", {
                    aid: this.aid,
                    // keyword:,
                    asc: this.asc,
                    sortBy: self.sort,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    let data = JSON.parse(res.data.list);
                    if (data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

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

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

            self.api
                .get("/Product/GetHHSGProductList", {
                    aid: this.aid,
                    // keyword:,
                    asc: this.asc,
                    sortBy: self.sort,
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    let data = JSON.parse(res.data.list);
                    if (data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

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

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

            self.router.push({
                path: "/pages/recommend/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,
                                    });
                                }
                            });
                    }
                });
        },
        // 获取购物车列表
        getCartLsit() {
            const self = this;

            self.api
                .get("/Order/GetCartList", {
                    pageIndex: 1,
                    pageSize: 100,
                })
                .then((res) => {
                    res.data.forEach((item) => {
                        item.price = item.priceFmt;
                        item.active =
                            item.stock >= item.count &&
                            item.productStatus === 1;
                    });
                    self.cartList = res.data;
                    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];
        },

        // 判断是否在购物车
        ifCart(val) {
            const cartList = this.cartList;
            if (cartList) {
                for (let item of cartList) {
                    if (item.productId === val.id) {
                        return item;
                    }
                }
            }
            return false;
        },

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

        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();
                    });
            }
        },

        // 打开规则选项
        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.fn.showToast("已成功加入购物车");
                        self.$refs.shopCart.refresh();
                    })
                    .catch((res) => {
                        this.getCartLsit();
                    });
            }
        },

        // 创建分享图
        creationShare2() {
            const self = this;
            const ctx = uni.createCanvasContext("canvas2", self);
            let logoUrl =
                "https://youxuan.ixiaokejia.com/home/forwardimg?url=" +
                encodeURI(self.activityData.brandLogo);
            this.api.get(logoUrl).then((logoRes) => {
                self.router.getScene(self.$mp.query).then((res) => {
                    res.uid = self.user.id;
                    res.shopId = self.activeShop.id;

                    Promise.all([
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_bg.jpg",
                        }),
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_bg_box.png",
                        }),
                        uni.getImageInfo({
                            src: logoRes.data,
                        }),
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_tag1.jpg",
                        }),
                        uni.getImageInfo({
                            src:
                                "https://oss.ixiaokejia.com/images/common/share_tag2.png",
                        }),
                    ]).then((res) => {
                        // 背景
                        ctx.drawImage(res[0][1].path, 0, 0, 500, 400);

                        // 标题
                        ctx.setFontSize(28);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("厂商直邮", 205, 40);
                        ctx.stroke();

                        ctx.setFontSize(24);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("免费包邮，厂商快递直邮到家", 100, 75);
                        ctx.stroke();

                        // 背景box
                        ctx.drawImage(res[1][1].path, 10, 92, 477, 292);

                        // // 商品图片
                        ctx.drawImage(res[2][1].path, 20, 100, 275, 275);

                        // 特惠商品
                        ctx.drawImage(res[3][1].path, 310, 110, 157, 46);

                        ctx.setFontSize(28);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("限时活动", 330, 144);

                        if (self.activityData.minDiscount) {
                            //折扣
                            let tagPrice = "最低";
                            ctx.setFontSize(28);
                            ctx.setFillStyle("#999");
                            ctx.fillText(tagPrice, 325, 215);
                            ctx.stroke();

                            let itemPrice = self.activityData.minDiscount * 10;
                            itemPrice = itemPrice.toFixed(1) + "折";
                            ctx.setFontSize(40);
                            ctx.setFillStyle("#f00");
                            ctx.fillText(itemPrice, 320, 265);
                            ctx.stroke();
                        } else {
                            // 价格
                            let itemPrice =
                                self.activityData.minPrice / 100 + "元";
                            ctx.setFontSize(38);
                            ctx.setFillStyle("#f00");
                            ctx.fillText("￥" + itemPrice, 320, 220);
                            ctx.stroke();

                            // 价格2
                            let tagPrice = "起购";
                            ctx.setFontSize(28);
                            ctx.setFillStyle("#999");
                            ctx.fillText(tagPrice, 325, 265);
                            ctx.stroke();
                        }

                        // buy
                        ctx.drawImage(res[4][1].path, 307, 300, 170, 70);

                        ctx.setFontSize(28);
                        ctx.setFillStyle("#fff");
                        ctx.fillText("立即购买", 335, 345);

                        ctx.draw();

                        setTimeout(() => {
                            // 生成临时路径
                            uni.canvasToTempFilePath({
                                canvasId: "canvas2",
                                fileType: "jpg",
                                success: function (res) {
                                    // self.canvasShow = false
                                    self.canvasforwardPath = res.tempFilePath;
                                },
                            });
                        }, 100);
                    });
                });
            });
        },
    },

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

    // 数据监听
    watch: {},
};
</script>

<style>
page {
    height: 100%;
}
</style>

<style lang="scss" scoped>
.page {
    position: relative;
    height: 100%;

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

.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;
    margin-top: px(30);
    &__item {
        display: flex;
        align-items: center;
    }

    &__text {
        font-size: px(40);
        color: #000;
    }

    &__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;
        }
    }
}

.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 px(25) px(30);

    &__item {
        width: px(500);
        padding-bottom: px(30);
        margin-top: px(25);
        overflow: hidden;
        border-radius: px(15);
        background-color: #fff;
        position: relative;

        &:nth-child(2n + 1) {
            margin-right: px(30);
        }
    }
    .button {
        // overflow: visible;
        // position: absolute;
        // bottom: 0;
        // right: 0;
        // z-index: 1;
        // padding: px(10) px(30) px(30) px(10);
    }
    .btns {
        overflow: visible;
        position: absolute;
        bottom: px(30);
        right: px(30);
        z-index: 1;
        display: flex;
        align-items: center;
    }
    .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: px(20);
        right: px(20);
        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%);
        }
    }

    &__img /deep/ img {
        width: px(500);
        height: px(500);
    }

    &__title {
        @include omits(2);
        height: px(110);
        margin: px(20);
        font-size: px(40);
        color: #333;
    }

    &__coupon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: px(40);
        padding: 0 px(15);
        margin: 0 px(20);
        font-size: px(30);
        color: #27a34f;
        border-radius: px(20);
        border: solid px(3) #27a34f;
    }

    &__price {
        display: flex;
        align-items: flex-end;
        padding: 0 px(20);
        margin-top: px(20);
    }

    &__present {
        color: #000;
    }

    &__rmb {
        font-size: px(30);
    }

    &__big {
        font-size: px(38);
        color: #27a34f;
    }

    &__original {
        position: relative;
        margin-left: px(20);
        font-size: px(32);
        color: #999;

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(1);
            transform: translateY(-100%);
            background-color: #999;
        }
    }
}

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

    &__img {
        width: px(741);
        height: px(340);
    }

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

.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}
.page_red {
    .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;
            }
        }
    }
    .goods {
        &__add-text {
            background-color: #27a34f;
        }
        &__add {
            background-color: #27a34f;
            box-shadow: px(1) px(2) px(6) #27a34f;
        }
    }
}
.a-info {
    background-color: #fff;
    margin: 0 px(30) px(50);
    border-radius: px(5);
    padding: px(30);
    .head {
        display: flex;
        justify-content: space-between;
        .a-img {
            display: block;
            width: px(150);
            flex-shrink: 0;
            margin-right: px(30);
            border: 1px solid #f1f1f1;
            border-radius: px(5);
            /deep/ img {
                height: px(150);
                width: px(150);
            }
        }
        .head-con {
            width: 100%;
        }
        .a-name {
            font-size: px(44);
            @include omits(2);
        }
    }
    .time {
        margin-top: px(30);
        color: #333;
        font-size: px(40);
    }
    .des {
        margin-top: px(30);
        font-size: px(40);
        line-height: 1.5;
        color: #888;
        display: flex;
        align-items: flex-start;
        // justify-content: space-between;
        line-height: px(60);

        & ~ .des {
            margin-top: px(10);
        }
        .key {
            color: #333;
            width: px(200);
            flex-shrink: 0;
        }
        .val {
            width: 100%;
            @include omits(2);
        }
        .arrow {
            width: px(40);
            height: px(40);
            margin-left: px(10);
            flex-shrink: 0;
            transform: rotate(180deg) translate(0, -3px);
            /deep/ img {
                width: px(40);
                height: px(40);
            }
        }
    }
}
.des-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .head-r {
        font-size: px(40);
        color: #666;
    }
    .main {
        max-height: 80vh;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        background-color: #fff;
    }
    .head {
        height: px(120);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f1f1f1;
        padding: 0 px(40);
    }
    .body {
        padding: px(60) px(40);
        font-size: px(44);
        line-height: 1.5;
        text-indent: 2em;
    }
}
.tag-item {
    font-size: px(36);
    margin: 0 px(16) px(16) 0;
    padding: 0 px(7);
    display: inline-block;
    line-height: px(56);
    border: 1px solid #d9d9d9;
    border-radius: px(4);
    opacity: 1;
    transition: all 0.3s;
    white-space: nowrap;
    color: #fa8c16;
    background: #fff7e6;
    border-color: #ffd591;
}
.canvas__forward {
    width: 500px;
    height: 400px;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: -999px;
    top: -999px;
    z-index: -1;
}
</style>