<template>
    <div class="detailPage">
        <div class="top">
            <div class="swiper-box" style="height: 560px">
                <!-- swiper1 -->
                <Swiper ref="swiperTop" :options="swiperOptionTop" class="gallery-top">
                    <SwiperSlide v-for="(item) in productData.images" :key="item"
                        :style="{ backgroundImage: 'url(' + item + ')' }">
                    </SwiperSlide>
                </Swiper>
                <!-- swiper2 Thumbs -->
                <div class="swiperThumbsLeft">
                    <div class="thumbsBox">
                        <Swiper ref="swiperThumbs" :options="swiperOptionThumbs" class="gallery-thumbs">
                            <SwiperSlide v-for="(item, index) in productData.images" :key="index"
                                :style="{ backgroundImage: 'url(' + item + ')' }">
                                <div style="width: 100%; height: 100%;" @click="thumbsClick(index)"></div>
                            </SwiperSlide>
                        </Swiper>
                        <div slot="button-prev" class="swiper-button-prev swiper-button-white iconfont">
                            <i class="el-icon-arrow-up"></i>
                        </div>
                        <div slot="button-next" class="swiper-button-next swiper-button-white iconfont">
                            <i class="el-icon-arrow-down"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="proInfo">
                <div class="title">
                    <p>趴趴熊猫公仔抱抱熊床上可爱玩偶小号抱枕布偶女生睡觉毛绒玩具趴趴熊国宝大熊猫11111111111111</p>
                </div>
                <div class="price">
                    <div class="left">
                        <p>协议价：<span>￥5.6</span></p>
                        <p>营销价：<span>￥6.9</span></p>
                    </div>
                    <div class="right">
                        <p>已出售：<span>3260</span></p>
                        <p>库存：<span>100+</span></p>
                    </div>
                </div>
                <div class="sku">
                    <div class="text">规格</div>
                    <div class="sku-list">
                        <ul>
                            <li v-for="item in 5" :key="item">【原切肉块】五香味牛肉片50g</li>
                        </ul>
                    </div>
                </div>
                <div class="num">
                    <div class="text">数量</div>
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                </div>
                <div class="add-selection">
                    <button>加入采购单</button>
                    <button>加入选品</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
    components: {
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            swiperTop: null,
            swiperThumbs: null,
            swiperOptionTop: {
                spaceBetween: 10,
                loop: true,
                loopedSlides: 20
            },
            swiperOptionThumbs: {
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                direction: 'vertical',
                spaceBetween: 10,
                slidesPerView: 3,
                loop: true,
                freeMode: true,
                loopedSlides: 20, // looped slides should be the same
                centeredSlides: true,
                watchSlidesVisibility: true
            },
            productData: {
                images: ["https://img1.baidu.com/it/u=1635025062,2659056813&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", "https://img95.699pic.com/xsj/0y/14/dg.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast", "https://img2.baidu.com/it/u=3206404871,704002142&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"]
            },
            num: 1
        }
    },
    mounted() {
        if (!this.swiperTop || !this.swiperThumbs) {
            this.swiperTop = this.$refs.swiperTop.$swiper
            this.swiperThumbs = this.$refs.swiperThumbs.$swiper

            this.swiperTop.controller.control = this.swiperThumbs
            this.swiperThumbs.controller.control = this.swiperTop
        }
    },
    methods: {
        // 轮播图
        thumbsClick(index) {
            console.log(index);
            this.swiperThumbs.slideTo(index, 300, false)
            this.swiperTop.slideTo(index, 300, false)
        },
        //  数量
        handleChange(value) {
            console.log(value);
        }
    },
}
</script>

<style lang="scss" scoped>
$mainGlod: #C5AA7B;

.detailPage {
    .top {
        margin-bottom: 30px;
        padding: 40px 45px;
        background-color: #FFF;
        display: flex;

        .swiper-box {
            width: 580px;
            position: relative;
            margin-right: 50px;

            .swiper-slide {
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            .gallery-top {
                height: 100% !important;
                width: 440px;
                position: absolute;
                right: 0;
            }

            .swiperThumbsLeft {
                width: 120px;
                position: absolute;
                left: 0;
                top: 10%;
                box-sizing: border-box;
                padding: 10px 0;
                height: 80%;

                .thumbsBox {
                    width: 100%;
                    height: 100%;
                    position: relative;

                    .swiper-button-prev,
                    .swiper-button-next {
                        font-size: 30px;
                        position: absolute;
                        left: 45px;
                        text-align: center;
                        color: $mainGlod;

                        &::after {
                            content: '';
                        }
                    }

                    .swiper-button-prev {
                        position: absolute;
                        top: -30px;
                    }

                    .swiper-button-next {
                        position: absolute;
                        top: initial;
                        bottom: -50px;
                    }
                }
            }

            .gallery-thumbs {
                position: relative;
                width: 100%;
                height: 100%;
            }

            .gallery-thumbs .swiper-slide {
                width: 100%;
                opacity: 0.7;
            }

            .gallery-thumbs .swiper-slide-active {
                opacity: 1;
                border: 1px solid $mainGlod;
                box-sizing: border-box;
            }
        }

        .proInfo {
            width: 700px;
            font-family: Microsoft YaHei;

            .title {
                p {
                    width: 100%;
                    font-size: 24px;
                    font-weight: 800;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .price {
                margin-top: 50px;
                display: flex;
                padding: 0 30px;
                box-sizing: border-box;
                justify-content: space-between;
                height: 150px;
                background-color: rgb(244, 249, 254);
                padding-top: 40px;

                .left {
                    p {
                        &:first-of-type {
                            margin-bottom: 20px;

                            span {
                                font-size: 24px;
                                font-weight: 600;
                            }
                        }

                        span {
                            color: rgb(251, 106, 66);
                        }
                    }
                }

                .right {
                    display: flex;
                    gap: 30px;
                }
            }

            .sku {
                margin: 40px 0 20px;
                display: flex;
                box-sizing: border-box;
                padding-left: 40px;
                gap: 40px;

                .sku-list {
                    flex: 1;

                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 20px;

                        li {
                            border: 1px solid #ccc;
                            padding: 5px 10px;
                            border-radius: 5px;
                            font-size: #000;
                        }
                    }
                }
            }
            .num{
                display: flex;
                align-items: center;
                margin: 40px 0 20px;
                box-sizing: border-box;
                padding-left: 40px;
                gap: 40px;
            }
            .add-selection{
                display: flex;
                margin-top: 40px;
                padding-left: 150px;
                box-sizing: border-box;
                gap: 30px;
                button{
                    cursor: pointer;
                    padding: 10px 20px;
                    border-radius:42px;
                    height: 40px;
                    color: #fff;
                    background-image: linear-gradient(90deg,#ff724b,#ff3e13);
                }
            }
        }
    }

}</style>