<template>
    <div class="page" :class="{ page_red: theme === 1 }">
        <scroll-view
            class="page__scroll"
            :class="{ 'page__scroll--iphoneX': iphoneX }"
            :scroll-y="true"
            :refresher-enabled="true"
            :refresher-triggered="triggered"
            :scroll-into-view="scroll"
        >
            <swiper
                class="swiper"
                :indicator-dots="true"
                @change="swiperChange($event)"
            >
                <swiper-item
                    class="swiper__item"
                    v-for="(item, index) in goods.pictureUrls"
                    :key="index"
                >
                    <my-image class="swiper__img" :src="item"></my-image>
                </swiper-item>
            </swiper>
            <div class="info">
                <div class="info__top">
                    <div class="price">
                        <div class="price__present">
                            <span class="price__rmb">¥</span>
                            <span class="price__big">{{
                                goods.minPrice / 100 || "0.00"
                            }}</span>
                        </div>
                        <div
                            class="price__original"
                            v-if="goods.tagPrice !== '0.00'"
                        >
                            {{ "¥" + (goods.tagPrice / 100 || "0.00") }}
                        </div>
                    </div>
                    <div class="info__num">
                        {{ "销量" + (goods.weSold || "0") }}
                    </div>
                </div>
                <div class="info__bottom">
                    <div class="info__title">
                        {{ goods.name || "" }}
                    </div>
                    <!-- <div class="share" @click="oprenShare">
                        <img
                            class="share__img"
                            src="/static/goods/share.png"
                            alt=""
                        />
                        <div class="share__text">分享</div>
                    </div> -->
                </div>
            </div>

            <div class="describe" v-if="goods.itemInfo.desc">
                <!-- <div class="describe__title">商品描述</div> -->
                <ul class="describe__list">
                    <li class="describe__item">{{ goods.itemInfo.desc }}</li>
                </ul>
            </div>
            <ul id="a" class="nav">
                <li
                    class="nav__item"
                    :class="{ 'nav__item--active': nav === 'a' }"
                    @click="setNav('a')"
                >
                    图文详情
                </li>
            </ul>

            <div class="images">
                <my-image
                    class="images__item"
                    mode="widthFix"
                    :src="item"
                    v-for="(item, index) in goods.pictureUrls"
                    :key="index"
                ></my-image>
            </div>

 
        </scroll-view>

    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import MyShare from "../../components/share/index";
let app = getApp();

export default {
    name: "",
    components: { MyImage, MyShare },
    // 数据
    data() {
        return {
            goodsId: "",
            goods: "",
            nav: "a",
            scroll: "",
            cartNum: 0,
            spec: "",
            canvasShow: false,
            canvasHandleStatus: false,
            shoprRecommendList: [],
            couponText: "",
            canvasImgPath: "",

            deliveryConfig: null,
            layout: null,

            triggered: false,
        };
    },
    onLoad(opts){
        this.goodsId = opts.id;
        this.getGoodsDetail();
    },
    async onShow() {
    },

    // 函数
    methods: {

        // 获取商品详情
        getGoodsDetail() {
            const self = this;

            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get(
                    "/Yx/GetProduct",
                    {
                        id: self.goodsId,
                    },
                    {
                        pass: true,
                    }
                )
                .then((res) => {
                    uni.hideLoading();
                    self.triggered = false;
                    if (res.data) {
                        let data = JSON.parse(res.data);
                        self.goods = data;
                    } else {
                        self.fn
                            .showModal({
                                title: "商品已下架",
                                showCancel: false,
                            })
                            .then((res) => {
                                if (res.confirm) {
                                    self.router.push({
                                        path:'/pages/index/index',
                                        isTabBer:true
                                    });
                                }
                            });
                    }
                });
        },

        // 判断规格，只有一个默认选择
        ifSpec() {
            if (this.goods.skuDetail.skus.length === 1) {
                this.spec = this.goods.skuDetail.skus[0];
                this.goods.skuDetail.props[0].list[0].active = true;
            }
        },

        // 修改导航
        setNav(val) {
            const self = this;

            self.nav = val;
            self.scroll = val;
        },



        viewImg() {
            let self = this;
            //查看图片
            console.log(111, self.canvasImgPath);
            uni.previewImage({
                urls: self.canvasImgPath,
                longPressActions: true,
            });
        },

        // swiper切换
        swiperChange(e) {
            let videoContext = uni.createVideoContext("goodVideo");
            let index = e.detail.current;
            if (videoContext) {
                if (index === 0) {
                    videoContext.play();
                } else {
                    videoContext.pause();
                }
            }
        },

    },

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

            let list = [];

            if (self.spec) {
                list = [];
                list.push(self.spec.properties);
            }

            return list;
        },
    },

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

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

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

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

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

.swiper {
    width: 100%;
    height: px(1080);

    &__video {
        width: 100%;
        height: 100%;
    }

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

.info {
    padding: px(40) 0 px(35) px(60);
    background-color: #fff;

    &__top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    &__num {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(165);
        height: px(56);
        font-size: px(30);
        color: #27a34f;
        border-radius: px(28) 0 0 px(28);
        background-color: #f8f8f8;
    }

    &__share {
        margin-top: px(40);
        font-size: px(44);
        color: #999;
        font-weight: 600;
    }

    &__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: px(50);
    }

    &__title {
        @include omits(2);
        flex: 1;
        padding-right: px(35);
        font-size: px(44);
        color: #333;
    }
}

.price {
    display: flex;
    align-items: baseline;

    &__present {
        color: #27a34f;
        font-weight: 600;
    }

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

    &__big {
        margin-left: px(10);
        font-size: px(68);
    }

    &__original {
        position: relative;
        margin-left: px(30);
        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;
        }
    }
}

.share {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 px(60) 0 px(30);
    border-left: dashed px(3) #e7e7e7;

    &__icon {
        font-size: px(60);
        color: #262626;
    }
    &__img {
        width: px(50);
        height: px(50);
        object-fit: contain;
    }

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

.specification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(130);
    margin-top: px(30);
    padding: 0 px(60);
    background-color: #fff;

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

    &__img {
        width: px(34);
        height: px(34);
        margin-right: px(15);
    }

    &__text {
        margin-right: px(30);
        font-size: px(42);
        color: #333;
    }

    &__arrows {
        font-size: px(40);
        color: #999;
    }
}

.describe {
    // margin-top: px(30);
    padding: px(0) px(60) px(40);
    background-color: #fff;

    &__title {
        font-size: px(42);
        color: #333;
        font-weight: 700;
    }

    &__list {
        // margin-top: px(50);
    }

    &__item {
        // margin-top: px(15);
        font-size: px(36);
        color: #666;
    }
}

.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: px(130);
    margin-top: px(30);
    background-color: #fff;

    &__item {
        font-size: px(44);
        color: #333;
        font-weight: 700;

        &:after {
            content: "";
            display: block;
            height: px(8);
            margin-top: px(20);
            background-color: #fff;
        }

        &--active {
            &:after {
                background-color: #333;
            }
        }
    }
}

.images {
    &__item /deep/ img {
        width: 100%;
    }
}

.recommend {
    margin-top: px(30);
    background-color: #fff;

    &__title {
        display: flex;
        align-items: center;
        padding: px(50) px(60);
        font-size: px(44);
        color: #333;
        font-weight: 700;
    }
}

.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 px(60);
    background-color: #fff;

    &__item {
        width: px(310);
        padding-bottom: px(100);
        overflow: hidden;
        border-radius: px(20);
    }

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

    &__title {
        @include omits(2);
        height: px(100);
        margin-top: px(30);
        font-size: px(36);
        color: #333;
    }

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

    &__present {
        font-size: px(38);
        color: #000;
    }
}

.live {
    position: fixed;
    bottom: px(420);
    right: px(30);
    z-index: 995;
    width: px(150);
    height: px(150);
}

.back {
    position: fixed;
    bottom: px(290);
    right: 0;
    z-index: 995;
    display: flex;
    justify-content: center;
    align-items: center;
    width: px(225);
    height: px(90);
    font-size: px(36);
    color: #fff;
    border-radius: px(45) 0 0 px(45);
    background-color: #505050;
}

.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;

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

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

    &__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: space-between;
        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;

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

.canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 996;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);

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

.shop-recommend {
    margin-top: px(30);
    background-color: #fff;

    &__title {
        padding: px(50) px(55) 0;
        font-size: px(44);
        color: #333;
        font-weight: 700;
    }

    &__swiper {
        height: px(540);
        padding: 0 px(55);
        margin-top: px(50);
    }
}

.shop-goods {
    display: flex;
    height: 100%;

    &__item {
        width: px(305);
        height: 100%;
        margin-left: px(27.5);

        &:first-child {
            margin-left: 0;
        }
    }

    &__img /deep/ img {
        width: px(305);
        height: px(305);
        border-radius: px(10);
    }

    &__title {
        @include omits(2);
        height: px(100);
        margin-top: px(20);
        font-size: px(36);
        color: #333;
        font-weight: 700;
    }

    &__price {
        margin-top: px(25);
        font-size: px(36);
        font-weight: 600;
    }
}

.coupon {
    height: px(240);
    padding: 0 px(55);
    margin-top: px(30);
    background-color: #fff;

    &__title {
        display: flex;
        align-items: center;
        height: px(130);
        font-size: px(42);
        color: #333;
        font-weight: 700;
        border-bottom: solid px(3) #f8f8f8;
    }

    &__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: px(30);
    }

    &__left {
        display: flex;
        align-items: center;
        flex: 1;
        margin-right: px(30);
    }

    &__label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(155);
        height: px(50);
        font-size: px(36);
        color: #f66829;
        border-radius: px(25);
        border: solid px(3) #f66829;
    }

    &__text {
        @include omit(px(620));
        flex: 1;
        margin-left: px(30);
        font-size: px(36);
        color: #f66829;
    }

    &__right {
        display: flex;
        align-items: baseline;
    }

    &__btn {
        font-size: px(36);
        color: #999;
    }

    &__arrows {
        margin-left: px(30);
        font-size: px(40);
        color: #999;
    }
}

.coupon-info {
    display: flex;
    align-items: center;
    margin-top: px(40);

    &__label {
        width: px(33);
        height: px(33);
    }

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

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

.page_red {
    .info__num {
        color: #27a34f;
    }
}
.special {
    margin-top: px(10);
    background-color: #fff;
    padding: px(40);
    color: #666;
    .tit {
        font-size: px(44);
        text-align: center;
    }
    .des {
        font-size: px(38);
        padding-top: px(20);
    }
}
</style>