<template>
    <div class="page">
        <div class="head-main">
            <div class="user-info">
                <my-image
                    class="user-head"
                    :src="orderData.user.headIcon"
                ></my-image>
                <span class="name"
                    >{{ orderData.user.nickName }}向您推荐了订单</span
                >
            </div>
            <!-- <div class="line">
                <span class="line-ele"></span>
                <span class="text">大家都在抢</span>
                <span class="line-ele"></span>
            </div> -->
            <ul class="good-list">
                <li
                    class="item"
                    v-for="(item, index) of orderData.productList"
                    :key="index"
                >
                    <my-image
                        class="good-img"
                        @click="goDetail(item)"
                        :src="item.image"
                    ></my-image>
                    <div class="con">
                        <div class="info">
                            <div class="name" @click="goDetail(item)">
                                {{ item.name }}
                            </div>
                            <div
                                class="tag-price"
                                @click="goDetail(item)"
                                v-if="item.tagPrice"
                            >
                                <span class="symbol">￥</span>
                                {{ item.tagPrice / 100 }}
                            </div>
                            <div class="price" @click="goDetail(item)">
                                <span class="symbol">￥</span>
                                {{ item.price / 100 }}
                            </div>
                        </div>
                        <div class="tool">
                            <div class="btn" @click="addCart(item)">
                                加入购物车
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="more-list" v-if="goodsList && goodsList.length">
            <div class="more-tit">精品推荐</div>
            <ul class="good-list">
                <li
                    class="item"
                    v-for="(item, index) of goodsList"
                    :key="index"
                >
                    <my-image
                        class="good-img"
                        @click="goDetail(item)"
                        :src="item.image"
                    ></my-image>
                    <div class="con">
                        <div class="info" @click="goDetail(item)">
                            <div class="name">{{ item.name }}</div>
                            <!-- <div class="des">
                                <span>5月14日提货</span>
                                <span>已售5.6万件</span>
                            </div> -->
                            <div
                                class="tag-price"
                                @click="goDetail(item)"
                                v-if="item.tagPrice"
                            >
                                <span class="symbol">￥</span>
                                {{ item.tagPrice / 100 }}
                            </div>
                            <div class="price" @click="goDetail(item)">
                                <span class="symbol">￥</span>
                                {{ item.price / 100 }}
                            </div>
                        </div>
                        <div class="tool" @click="addCart(item)">
                            <div class="btn">加入购物车</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="more-loading" v-if="moreLoading">加载中...</div>
            <div class="more-loading" v-else-if="!isHaveMore">没有更多数据了</div>
        </div>
        <div class="navigation">
            <ul class="navigation__list">
                <!-- <button class="button">
                    <li class="navigation__item">
                        <i class="iconfont iconkefu navigation__icon"></i>
                        <div class="navigation__text">找客服</div>
                    </li>
                </button> -->
                <li
                    class="navigation__item"
                    @click="
                        jump({ isTabBer: true, path: '/pages/goods/index' })
                    "
                >
                    <i class="iconfont icondianpu navigation__icon"></i>
                    <div class="navigation__text">首页</div>
                </li>
                <li class="navigation__item">
                    <button v-if="user.login" class="button" @click="jumpCart">
                        <i class="iconfont icongouwuche navigation__icon"></i>
                        <div class="navigation__text">购物车</div>
                    </button>

                    <div class="navigation__num" v-if="cartInfo.count">
                        {{ cartInfo.count }}
                    </div>
                </li>
            </ul>
            <div class="navigation__right">
                <div class="price">
                    总价：<span class="symbol">￥</span
                    ><span class="num">{{ cartInfo.amount / 100 }}</span>
                </div>
                <button class="button" v-if="user.login" @click="submit">
                    <div class="navigation__btn">去结算</div>
                </button>
                <button
                    class="button"
                    v-if="!user.login"
                    open-type="getUserInfo"
                    lang="zh_CN"
                    @getuserinfo="submit"
                >
                    <div class="navigation__btn">去结算</div>
                </button>
            </div>
        </div>
        <g-spec ref="spec" :goods="goods" :spec.sync="spec"></g-spec>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import GSpec from "../goods/spec";
export default {
    name: "",
    components: { MyImage, GSpec },
    // 数据
    data() {
        return {
            orderId: "",
            orderData: {},
            cartInfo: {},
            goods: {},

            isHaveMore: true, // 是否有更多数据
            loading: false, // 是否加载完成
            goodsList: [], // 详情数据 加入购物车时用
            page: 1,
            moreLoading: false,
        };
    },

    async onShow() {},
    onLoad(opts) {
        this.orderId = opts.orderId;
        this.getCartNumber();
        this.getOrderData();
        this.getGoodsList();
    },

    onReachBottom() {
        this.getMoreGoods();
    },
    // 函数
    methods: {
        getOrderData() {
            this.api
                .get("/Order/GetOrderInfo", {
                    id: this.orderId,
                })
                .then((res) => {
                    this.orderData = res.data;
                    console.log(this.orderData);
                    // this.orderProuct = this.orderData.
                    this.fn.shareMenu();
                    console.log(this.orderData);
                });
        },

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

            self.page = 1;
            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Product/GetList", {
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    let data = res.data.data;
                    if (data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.goodsList = data;
                    console.log(data);
                    // self.loading = true;
                    uni.hideLoading();
                });
        },

        // 获取更多商品
        getMoreGoods() {
            const self = this;
            this.moreLoading = true;
            self.api
                .get("/Product/GetList", {
                    pageIndex: self.page,
                    pageSize: 20,
                })
                .then((res) => {
                    this.moreLoading = false;
                    let data = res.data.data;
                    if (data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

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

        // 加入购物车
        addCart(val) {
            const self = this;
            let pid = val.id || val.pid;
            uni.showLoading({
                title: "处理中...",
            });
            self.api
                .get(
                    "/Product/Detail",
                    {
                        id:pid,
                    },
                    {
                        pass: true,
                    }
                )
                .then((res) => {
                    self.goods = JSON.parse(res.data);
                    console.log(self.goods);
                    if (!self.goods.skuDetail.skus || self.goods.skuDetail.skus.length===0) {
                        self.api
                            .post("/Order/AddCart", {
                                productId: pid,
                                count: 1,
                                skuId: self.goods.skuDetail.skus[0].skuId,
                                productSource: 0, //,
                            })
                            .then((res) => {
                                uni.hideLoading();
                                this.fn.showToast("已成功加入购物车");
                                this.getCartNumber();
                            });
                    } else {
                        uni.hideLoading();
                        this.openSpec();
                    }
                });
        },
        goDetail(val) {
            const self = this;

            self.router.push({
                path: "/pages/goods/detail",
                query: {
                    goodsId: val.id,
                },
            });
        },
        // 打开规则选项
        openSpec() {
            this.$refs.spec.open("cart", (res) => {
                this.getCartNumber();
                this.fn.showToast("已成功加入购物车");
            });
        },

        // 获取购物车数量
        getCartNumber() {
            const self = this;
            self.api
                .get("/Order/GetCartInfo", { productSource: 0 })
                .then((res) => {
                    this.cartInfo = res.data;
                });
        },

        // 跳转到购物车
        jumpCart() {
            this.router.push({
                isTabBer: true,
                path: "/pages/cart/index",
            });
        },

        submit(userInfo) {
            if (userInfo) {
                this.api
                    .post("/User/UpdateUserWechatInfo", userInfo)
                    .then(() => {
                        self.$store.commit("user/update", {
                            login: true,
                            userInfo: userInfo,
                        });
                    });
            }

            this.router.push({
                path: "/pages/order/affirm",
                query: {
                    ids: this.cartInfo.orderItemIds.join(","),
                    productSource: 1
                },
            });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user;
        },
    },

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

<style lang="scss" scoped>
.page {
    height: 100vh;
    overflow: auto;
    padding-bottom: px(185);
}
.head-main {
    padding: px(45);
    background: linear-gradient(#27a34f, #78d197);
    font-size: px(44);
    .user-info {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .user-head {
        width: px(70);
        height: px(70);
        border-radius: 50%;
        background-color: #eee;
        flex-shrink: 0;
        margin-right: px(20);
        /deep/ img {
            width: px(60);
            height: px(60);
        }
    }
    .name {
        color: #fff;
    }
    .line {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: px(30);
    }
    .text {
        font-size: px(40);
        color: #fff;
        padding: 0 px(20);
    }
    .line-ele {
        height: 1px;
        width: 35%;
        background-color: #fff;
    }
}
.good-list {
    margin-top: px(60);
    .item {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        background-color: #fff;
        border-radius: px(20);
        padding: px(30);
        .good-img {
            background-color: pink;
            width: px(440);
            height: px(440);
            flex-shrink: 0;
            margin-right: px(30);
            /deep/ img {
                width: px(440);
                height: px(440);
            }
        }
        .con {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
                font-size: px(44);
                color: #333;
                font-weight: bold;
                @include omits(2);
            }
            .des {
                font-size: px(40);
                color: #888;
                margin-top: px(20);
                span ~ span {
                    margin-left: px(10);
                    padding-left: px(10);
                    border-left: 1px solid #f1f1f1;
                }
            }
            .price {
                color: #e30b00;
                font-size: px(54);
                margin-top: px(20);
                .symbol {
                    font-size: px(40);
                }
            }
            .tag-price {
                margin-top: px(20);
                color: #999;
                text-decoration: line-through;
                font-size: px(42);
                .symbol {
                    font-size: px(40);
                }
            }
            .tool {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .btn {
                    width: 100%;
                    height: px(100);
                    border-radius: px(50);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    font-size: px(40);
                    background-color: #27a34f;
                }
            }
        }
    }
    .item ~ .item {
        margin-top: px(30);
    }
}
.navigation {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 995;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: px(185);
    padding: 0 px(40);
    background-color: #fff;
    border-top: 1px solid #f1f1f1;

    &--iphoneX {
        height: px(215);
        padding-bottom: px(30);
    }

    &__list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: px(200);
    }

    &__item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

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

    &__text {
        margin-top: px(20);
        font-size: px(32);
        color: #666;
    }

    &__num {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px(40);
        height: px(40);
        padding: 0 px(15);
        transform: translate(30%, -30%);
        font-size: px(26);
        color: #fff;
        border-radius: px(20);
        background-color: #ff4421;
    }

    &__right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;
        margin-left: px(40);
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(270);
        height: px(110);
        font-size: px(40);
        color: #fff;
        border-radius: px(55);
        background-color: #27a34f;
        margin-left: px(20);
        &--cart {
            color: #262626;
            background-color: #e5e5e5;
        }
    }

    &__null {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: px(110);
        font-size: px(40);
        color: #fff;
        border-radius: px(55);
        background-color: #e5e5e5;
    }
    .price {
        font-size: px(40);
    }
    .symbol {
    }
    .symbol,
    .num {
        color: red;
    }
    .num {
        font-size: px(50);
    }
}

.more-loading {
    font-size: px(40);
    color: #999;
    text-align: center;
    padding: px(30);
}
.more-list {
    padding: px(45);
    background-color: #f1f1f1;
}
.more-tit {
    font-size: px(50);
    font-weight: bold;
    text-align: center;
    padding-top: px(30);
}
</style>