<template>
    <div class="page">
        <div class="pay">
            <div class="status-img">
                <my-image
                    v-if="type === 'success'"
                    src="/static/icon/select.png"
                ></my-image>
                <my-image v-else src="/static/icon/error.png"></my-image>
            </div>
            <div class="pay__title" v-if="type === 'success'">订单支付成功</div>
            <div class="pay__title" v-else>支付已取消</div>
            <div class="pay__content">
                <div class="pay__sub-title">支付金额：</div>
                <div class="pay__price">{{ "¥" + (price || "0.00") }}</div>
            </div>

            <div class="btn-box">
                <button
                    open-type="share"
                    class="big__btn"
                    v-if="type === 'success'"
                >
                    {{
                        enablePoints
                            ? "分享到群，赚积分"
                            : "分享到群，提醒群主接单"
                    }}
                </button>
                <div class="pay__btns">
                    <div class="pay__btn" @click="jumpOrderDetail">
                        查看订单
                    </div>
                    <div
                        class="pay__btn"
                        v-if="type === 'success'"
                        @click="
                            jump({ isTabBer: true, path: '/pages/goods/index' })
                        "
                    >
                        去逛首页
                    </div>
                    <div class="pay__btn" v-else @click="pay">立即支付</div>
                </div>
            </div>
        </div>

        <!-- yx -->
        <div v-if="productSource == 1 && goodsList && goodsList.length">
            <div class="more-title">买了又买</div>
            <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>
                </li>
            </ul>
            <div class="more-text" v-if="moreLoading">- 加载中... -</div>
            <div class="more-text" v-else-if="goodsList.length && !isHaveMore">
                - {{ moreLoading ? "加载中..." : "没有更多了" }} -
            </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>
        </div>

        <!-- shop -->
        <div v-if="productSource == 0 && shopGoodsList && shopGoodsList.length">
            <div class="more-title">买了又买</div>
            <ul class="goods">
                <li
                    class="goods__item"
                    v-for="(item, index) in shopGoodsList"
                    :key="index"
                >
                    <my-image
                        class="goods__img"
                        :src="item.image"
                        @click="jumpShopGoodsDetail(item)"
                    ></my-image>
                    <div
                        class="goods__title"
                        @click="jumpShopGoodsDetail(item)"
                    >
                        {{ item.name }}
                    </div>
                    <div class="goods__price">
                        <div
                            class="goods__present"
                            @click="jumpShopGoodsDetail(item)"
                        >
                            <span class="goods__rmb">¥</span>
                            <span class="goods__big">{{
                                item.price / 100
                            }}</span>
                        </div>
                        <div
                            class="goods__original"
                            @click="jumpShopGoodsDetail(item)"
                            v-if="item.tagPrice !== 0"
                        >
                            {{ "¥" + item.tagPrice / 100 }}
                        </div>
                    </div>
                </li>
            </ul>
            <div class="more-text" v-if="moreLoading">- 加载中... -</div>
            <div
                class="more-text"
                v-else-if="shopGoodsList.length && !isHaveMore"
            >
                - {{ moreLoading ? "加载中..." : "没有更多了" }} -
            </div>
            <div class="null" v-if="loading && !shopGoodsList.length">
                <img
                    class="null__img"
                    src="/static/common/goods_null_2.jpg"
                    alt
                />
                <div class="null__title">抱歉！没有找到相关商品~</div>
            </div>
        </div>
        <canvas
            class="canvas__forward"
            canvas-id="canvas2"
            :disable-scroll="true"
        ></canvas>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            type: "",
            orderId: "",
            price: "",
            layout: [],
            sub: "",
            orderData: {},
            productSource: 1, // 1优选 0 店铺
            enablePoints: false,
            loading: false, // 是否加载完成
            moreLoading: false,
            page: 1,

            goodsList: [], // 详情数据
            isHaveMore: true, // 是否有更多数据

            shopGoodsList: [],
        };
    },

    async onShow() {
        const self = this;

        self.type = self.$mp.query.type || "success";
        self.orderId = self.$mp.query.orderId;
        self.price = self.$mp.query.price;
        self.sub = self.$mp.query.sub;
        self.fn.getMsgTpls(self.orderId, self.type === "success" ? 2 : 1);
        if (this.orderId && self.type === "success") {
            this.getOrderData();
            this.getEnablePoints();
        }
        await self.fn.init();
    },

    onReachBottom() {
        if (this.productSource == 1) {
            this.getMoreGoods();
        } else {
            this.getMoreShopGoods();
        }
    },
    onShareAppMessage() {
        let url = '/pages/pay/order-share';
        if(this.productSource == 0){
            url = '/pages/pay/order-share2';
        }
        console.log(this.user);
        url +=`?orderId=${this.orderId}&shopId=${this.activeShop.id}&uid=${this.user.user.id}`;

        if(this.activeShop){
            url+=`&shopId=${this.activeShop.id}`;
        }
        if(this.activeShop.store){
            url+=`&storeId=${this.activeShop.store.id}`
        }
        return {
            title: `我购买了${this.orderData.orderInfo.itemOrders[0].title}，推荐您来看看`,
            path: url,
            imageUrl:
                this.canvasforwardPath ||
                this.orderData.orderInfo.itemOrders[0].imgUrl,
        };
    },
    // 函数
    methods: {
        getEnablePoints() {
            this.api
                .get("/Shop/GetEnablePoints", {
                    id: this.orderId,
                })
                .then((res) => {
                    this.enablePoints = res.data;
                });
        },

        getOrderData() {
            this.api
                .get("/Order/Detail", {
                    id: this.orderId,
                })
                .then((res) => {
                    this.orderData = JSON.parse(res.data);
                    this.productSource = this.orderData.orderInfo.productSource;
                    this.fn.shareMenu();
                    if (this.productSource == 1) {
                        this.getGoodsList();
                        this.creationShare2();
                    } else {
                        this.getShopGoods();
                    }
                });
        },

        // 支付
        pay() {
            const self = this;

            self.fn.pay(self.orderId, self.price);
        },

        // 跳转到订单详情
        jumpOrderDetail() {
            const self = this;

            if (self.orderId) {
                self.router.replace({
                    path: "/pages/order/detail",
                    query: {
                        orderId: self.orderId,
                    },
                });
            } else {
                self.fn.showToast("暂不支持查看订单");
            }
        },

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

            self.page = 1;
            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Product/GetHHSGProductList", {
                    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;
                    console.log(data);
                    // self.loading = true;
                    uni.hideLoading();
                });
        },

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

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

        // 店铺商品
        getShopGoods() {
            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();
                    if (res.data.data.length) {
                        self.page++;
                    } else {
                        self.isHaveMore = false;
                    }

                    self.shopGoodsList = res.data.data;
                    uni.hideLoading();
                });
        },

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

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

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

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

        jumpShopGoodsDetail(val) {
            const self = this;

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

        // 创建分享图
        creationShare2() {
            const self = this;
            const ctx = uni.createCanvasContext("canvas2", self);
            const good = self.orderData.orderInfo.itemOrders[0];
            return new Promise((resolve) => {
                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: good.imgUrl,
                        }),
                        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);

                        // 价格
                        let price = good.price / 100;
                        ctx.setFontSize(38);
                        ctx.setFillStyle("#f00");
                        ctx.fillText("￥" + price, 320, 220);
                        ctx.stroke();

                        // 价格2
                        // if (self.goods.tagPrice) {
                        //     let tagPrice = self.goods.tagPrice / 100;
                        //     ctx.setFontSize(28);
                        //     ctx.setFillStyle("#999");
                        //     ctx.fillText("￥" + tagPrice, 325, 265);
                        //     ctx.fillRect(
                        //         328,
                        //         253,
                        //         (String(tagPrice).length + 1) * 20,
                        //         2
                        //     );
                        //     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: {
        user() {
            return this.$store.state.user;
        },
        activeShop() {
            return this.$store.state.common.activeShop;
        },
        customConfig() {
            return this.$store.state.common.customConfig;
        },
        cashCouponName() {
            return this.$store.state.common.cashCouponName || "";
        },
    },

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

<style lang="scss" scoped>
.pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    // min-height: 100vh;
    padding-bottom: px(50);
    &__title {
        margin-top: px(60);
        font-size: px(50);
        color: #000;
    }

    &__content {
        display: flex;
        align-items: center;
        margin-top: px(30);
    }

    &__sub-title {
        font-size: px(36);
        color: #666;
    }

    &__price {
        margin-left: px(10);
        font-size: px(36);
        color: #f8662a;
    }

    &__btns {
        display: flex;
        margin-top: px(40);
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48%;
        height: px(120);
        margin: 0 px(15);
        font-size: px(44);
        color: #666;
        border-radius: px(60);
        border: solid px(3) #ddd;
    }
}
.btn-box {
    padding: 0 px(60);
    width: 100%;
}
.big__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: px(120);
    margin: 0 px(15);
    font-size: px(44);
    color: #fff;
    border-radius: px(60);
    border: solid px(3) #ddd;
    background-color: #27a34f;
    margin-top: px(60);
}
.status-img {
    width: px(200);
    height: px(230);
    margin: 0 auto;
    padding-top: px(30);
    /deep/ img {
        display: block;
        width: px(200);
        height: px(200);
    }
}

.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);
        color: #27a34f;
    }

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

.more-title {
    margin-top: px(60);
    margin-bottom: px(30);
    text-align: center;
    font-size: px(50);
    font-weight: bold;
}
.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(741);
        height: px(340);
    }

    &__title {
        margin-top: px(60);
        font-size: px(42);
        color: #666;
    }
}
.canvas__forward {
    width: 500px;
    height: 400px;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: -999px;
    top: -999px;
    z-index: -1;
}
</style>