<!--商品详情-->
<template>
    <div id="productDetails">
        <Nav :title="$t('productDetails.title')"></Nav>
        <div id="swipeBox">
            <van-swipe v-if="swipeHeight" :height="swipeHeight" @change="swipeChange" :show-indicators="false">
                <van-swipe-item v-for="item,index in swipeList" :key="index">
                    <img style="width:100%;height:100%" :src="requestUrl+item" alt="" srcset="">
                </van-swipe-item>
            </van-swipe>
            <template>
                <div class="custom-indicator">{{ activeNum + 1 }}/{{ swipeList.length }}</div>
            </template>
        </div>
        <div class="content">
            <div class="titleBox">
                <div class="title">
                    <van-skeleton :row="2" :loading="loading">
                        <span>{{commodityDetails.commodity.commodityName}}</span>
                    </van-skeleton>
                </div>
                <!--
                <div class="stock">
                    <van-skeleton :row="1" :loading="loading">
                        <span>{{commodityDetails.commodity.stock}}</span>
                    </van-skeleton>
                    <span>{{$t('productDetails.stock')}}</span>
                </div>
                -->
            </div>
            <div class="discount" v-if="commodityDetails.commodity.commodityCouponList.length">
                <div class="left">
                    <van-skeleton :row="1" :loading="loading">
                        <span>{{commodityDetails.commodity.commodityCouponList[0].couponName}}</span>
                    </van-skeleton>
                    <span>{{$t('productDetails.validity')}}</span>
                    <van-skeleton :row="1" :loading="loading">
                        <span>{{commodityDetails.commodity.commodityCouponList[0].beginTime}} {{$t('productDetails.to')}} {{commodityDetails.commodity.commodityCouponList[0].endTime}}</span>
                    </van-skeleton>
                </div>
                <div class="right">
                    <van-skeleton :row="1" :loading="loading">
                        <span><span class="yen"></span>{{commodityDetails.commodity.commodityCouponList[0].discountPrice}}円OFF</span>
                    </van-skeleton>
                    <span @click="receive" v-if="commodityDetails.commodity.couponUser=='0'">{{$t('productDetails.receive')}}</span>
                    <span v-else>{{$t('productDetails.received')}}</span>

                </div>
            </div>
            <div class="trip">
                <div class="titleStyle">
                    <div class="title"><span>{{$t('productDetails.journey')}}</span></div>
                    <div class="contents">
                        <van-skeleton :row="1" :loading="loading">
                            <div class="tripCell" v-for="item,index in tripList" :key="index">
                                <div class="left">
                                    <span>{{item.journeyTime}}</span>
                                </div>
                                <div class="right" :style="{'border-left':index+1==tripList.length?'none':'1px solid #EEEEEE','height':index+1==tripList.length?'auto':'.9rem' }">
                                    <img src="@/../public/static/images/icon1.png" alt="" srcset="">
                                    <span>{{item.detail}}</span>
                                </div>
                            </div>
                        </van-skeleton>
                    </div>
                </div>
            </div>
            <div class="hr"></div>
            <div class="comment">
                <div class="titleStyle">
                    <div class="title"><span>{{$t('productDetails.comment')}} ({{commentLsit.length}})</span></div>
                    <div class="contents">
                        <van-skeleton :row="3" :loading="loading">
                            <div class="commentBox" v-for="item,index in commentLsit" :key="index" :style="{'border-bottom':index+1==commentLsit.length?'none':'1px solid #EEEEEE'}">
                                <div class="top">
                                    <span>{{item.customerName}}</span>
                                    <span>{{item.createTime}}</span>
                                </div>
                                <div class="details">
                                    <span v-html="item.content"></span>
                                </div>
                                <div class="reply">
                                    <div>
                                        <span>カスタマーサポート：</span>
                                        <span>{{item.rebackTime}}</span>
                                    </div>
                                    <div><span v-html="item.rebackContent"></span></div>
                                    <div style="clear:both"></div>
                                </div>
                            </div>
                        </van-skeleton>
                        <div class="commentAll" v-if="commentLsitAll.length>=4">
                            <span>{{$t('productDetails.seeAll1')}}{{commentLsitAll.length}}{{$t('productDetails.seeAll2')}}
                                <van-icon name="arrow" />
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="hr"></div>
            <div class="explain">
                <div class="titleStyle">
                    <div class="title"><span>{{$t('productDetails.outline')}}</span></div>
                    <div class="contents">
                        <div class="explainBox">
                            <van-skeleton :row="3" :loading="loading">
                                <span v-html="commodityDetails.commodity.specification"></span>
                            </van-skeleton>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hr"></div>
            <div class="careful">
                <div class="titleStyle">
                    <div class="title"><span>{{$t('productDetails.careful')}}</span></div>
                    <div class="contents">
                        <div class="carefulBox">
                            <van-skeleton :row="3" :loading="loading">
                                <span v-html="commodityDetails.commodity.attention"></span>
                            </van-skeleton>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hr"></div>
            <div class="remark">
                <div class="titleStyle">
                    <div class="title"><span>{{$t('productDetails.remark')}}</span></div>
                    <div class="contents">
                        <div class="remarkBox">
                            <van-skeleton :row="2" :loading="loading">
                                <span v-html="commodityDetails.commodity.remark"></span>
                            </van-skeleton>
                        </div>
                    </div>
                </div>
            </div>

            <div class="recommend">
                <div class="titles">
                    <div></div>
                    <div><span>{{$t('productDetails.similar')}}</span></div>
                </div>
                <div class="recommendBox">
                    <div class="cell" v-for="item,index in recommend" :key="index" @click="getCommodity(item)">
                        <div class="left">
                            <img :src="requestUrl+item.faceImg" alt="" srcset="">
                        </div>
                        <!--div class="center">
                            <span>{{item.commodityName}}</span>
                        </div>
                        <div class="right">
                            <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
                        </div-->
                        <div class="center">
                            <span>{{item.commodityName}}</span>

                            <span class="right">¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomBox">
            <div class="cell">
                <div class="left">
                    <template v-if="commodityDetails.commodity.collectionUser=='1'">
                        <van-icon @click="collection(1)" name="star" size="24" color="#38d0c9" />
                    </template>
                    <template v-else>
                        <van-icon @click="collection(0)" name="star-o" size="24" color="#38d0c9" />
                    </template>
                </div>
                <div class="right">
                    <van-button @click="purchase('join')" color="#38d0c9" plain>{{$t('productDetails.addToCart')}}</van-button>
                    <van-button @click="purchase('immediately')" color="#38d0c9">{{$t('productDetails.buyNow')}}</van-button>
                </div>
            </div>
        </div>
        <van-popup v-model="popupShow" position="bottom" :style="{ height: '80%' }" closeable>
            <div class="choiceBox">
                <div class="title">
                    <span>{{$t('productDetails.selectDate')}}</span>
                </div>
                <div class="timeBox">
                    <div>
                        <div v-for="item,index in dateList" :key="index" :class="{active:item.active, noseat:item.noseat}" @click="timeToogle(index)">
                            <span>{{item.week}}</span>
                            <span>{{item.time}}</span>
                        </div>
                    </div>
                    <div>
                        <span @click="moreTime">{{$t('productDetails.more')}}
                            <van-icon name="arrow" />
                        </span>
                    </div>
                </div>
                <div class="title">
                    <span>{{$t('productDetails.placeDeparture')}}</span>
                </div>
                <div class="setOutBox">
                    <van-radio-group v-model="choice.setOut" direction="horizontal">
                        <div class="setOutCell" v-for="item,index in setOutList" :key="index">
                            <van-radio checked-color="#38d0c9" :name="item">{{item}}{{$t('productDetails.setOut')}}</van-radio>
                        </div>
                    </van-radio-group>
                </div>
                <div class="title">
                    <span>{{$t('productDetails.travelersNum')}}</span>
                </div>
                <div class="travelBox">
                    <div class="travelCell" v-for="item,index in travelList" :key="index">
                        <div>
                            <span>{{item.name}}</span>
                            <span>￥{{item.price}}/{{$t('productDetails.people')}}</span>
                        </div>
                        <div>
                            <van-stepper v-model="item.num" min="0" :max="index==0?adultNum:childrenNum" />
                        </div>
                    </div>
                    <div class="remark">
                        <span>{{$t('productDetails.explain')}}:</span><span>{{commodityDetails.commodity.childPriceExplain}}</span>
                    </div>
                    <div class="stock">
                        <span>{{$t('productDetails.surplus')}}:</span><span>{{stockNum}}</span>
                    </div>
                    <div class="but">
                        <van-button @click="confirm" type="primary" color="#38d0c9" block>{{$t('productDetails.confirm')}}</van-button>
                    </div>
                </div>

            </div>
        </van-popup>
        <van-calendar v-if="minDate&&maxDate" v-model="calendarShow" @confirm="calendarSubmit" :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import weekDay from "@/utils/weekDay.js";
import getTime from "@/utils/getTime.js";
import {
    getCommodity4H5Open,
    getCommodity4H5,
    addCollection,
    delCollection,
    receiveCoupon,
    addShoppingCar,
    submitOrder,
} from "@/api/comp/home.js";
import { getToken } from "@/utils/auth"; // get token from cookie
export default {
    data() {
        return {
            activeNum: 0,
            swipeList: [],
            loading: true,
            tripList: [],
            popupShow: false,
            calendarShow: false,
            minDate: null,
            maxDate: null,
            productData: {}, //商品调用接口依赖的一些父级传回来的参数
            shoppingStatus: null, //用来判断是加入购物车还是去支付
            commodityDetails: {
                commodity: {
                    commodityCouponList: [],
                },
            }, //接口接收的商品详情
            commentLsit: [],
            commentLsitAll: [],
            recommend: [],
            dateList: [],
            choice: {
                time: "",
                setOut: "",
                remark: "",
                num: 0,
            },
            setOutList: [],
            travelList: [],
            requestUrl: process.env.VUE_APP_BASE_API,
        };
    },
    created() {
        //拿到需要展示的商品参数 接口依赖
        this.productData = this.$store.state.home.product;
        this.getData();
    },
    computed: {
        swipeHeight() {
            let num = 0;
            let ht = Number(
                document
                    .getElementsByTagName("html")[0]
                    .style.fontSize.replace("px", "")
            );
            num = (ht / 100) * 258;
            return num;
        },
        //计算剩余票数
        stockNum() {
            let num = 0;
            if (this.travelList[0] && this.travelList[1]) {
                num =
                    this.getSeatNum(this.commodityDetails.commodity.seatInfoLst) -
                    (this.travelList[0].num + this.travelList[1].num);
            }
            if (num < 0) {
                num = 0;
            }
            return num;
        },
        //计算成人票数限制
        adultNum() {
            let num = 0;
            if (this.getSeatNum(this.commodityDetails.commodity.seatInfoLst) && this.travelList[1]) {
                num =
                    this.getSeatNum(this.commodityDetails.commodity.seatInfoLst) -
                    this.travelList[1].num;
            }
            return num;
        },
        //计算儿童票数限制
        childrenNum() {
            let num = 0;
            if (this.getSeatNum(this.commodityDetails.commodity.seatInfoLst) && this.travelList[0]) {
                num =
                    this.getSeatNum(this.commodityDetails.commodity.seatInfoLst) -
                    this.travelList[0].num;
            }
            return num;
        },
    },
    components: {
        Nav,
    },
    methods: {
        //获取商品详情
        getData() {
            this.loading = true;
            const hasToken = getToken();
            if (hasToken) {
                getCommodity4H5(this.productData.id).then((res) => {
                    if (res.code == 200) {
                        //插入轮播
                        this.commodityDetails = res.data;
                        if (res.data.commodity.commodityImg) {
                            this.swipeList =
                                this.commodityDetails.commodity.commodityImg.split(
                                    ","
                                );
                        }
                        this.tripList =
                            res.data.commodity.commodityJourneyInformationList;
                        this.commentLsitAll =res.data.commodity.orderEvaluateList;
                        //.map(item=>{
                        //    item.rebackContent=item.rebackContent.replace(/\<img/g, '<img style="width:auto;height:auto;max-width:100%;display:block"');
                        //    return item;
                        //})
                        this.recommend = res.data.sameTypeList;
                        //最初评论仅显示4条
                        //清空数据
                        this.commentLsit = [];
                        for (let i = 0; i < 4; i++) {
                            if (this.commentLsitAll[i]) {
                                this.commentLsit.push(this.commentLsitAll[i]);
                            }
                        }
                        //为弹出框加入数据
                        this.setOutList =
                            res.data.commodity.departurePlace.split(",");
                        //set on
                        if (this.setOutList.length == 1) {
                            this.choice.setOut = this.setOutList[0];
                        }
                        this.travelList = [
                            {
                                name: this.$t('productDetails.adult'),
                                price: res.data.commodity.adultPrice,
                                num: 0,
                            },
                            {
                                name: this.$t('productDetails.children'),
                                price: res.data.commodity.childPrice,
                                num: 0,
                            },
                        ];
                        //日历
                        this.minDate = new Date(res.data.commodity.periodStart);
                        this.maxDate = new Date(res.data.commodity.periodEnd);
                        let today = new Date(
                            getTime(new Date(), "-", "YMD")
                        ).getTime();
                        let minDate = new Date(
                            this.commodityDetails.commodity.periodStart
                        ).getTime();
                        let newDate = new Date();
                        //今日大于最小日期，今日即最小日期
                        if (today > minDate) {
                            this.minDate = newDate;
                        }
                        this.commodityDetails.commodity.attention=this.commodityDetails.commodity.attention.replace(/\<img/g, '<img style="width:auto;height:auto;max-width:100%;display:block"');
                        this.commodityDetails.commodity.specification=this.commodityDetails.commodity.specification.replace(/\<img/g, '<img style="width:auto;height:auto;max-width:100%;display:block"');
                        this.commodityDetails.commodity.remark=this.commodityDetails.commodity.remark.replace(/\<img/g, '<img style="width:auto;height:auto;max-width:100%;display:block"');
                        // let temp = document.createElement ("div");
                        // temp.innerHTML=this.commodityDetails.commodity.attention;
                        // let temps=temp.children;
                        // for(let i=0;i<temps.length;i++){
                        //     for(let j=0;j<temps[i].children.length;j++){
                        //         if(temps[i].children[j].nodeName=='IMG'){
                        //             console.log(temps[i].children[j].src,'++++++++++++++++')
                        //         }
                        //     }
                        // }

                        this.calendarSubmit(newDate);
                        this.loading = false;
                    }
                });
            } else {
                getCommodity4H5Open(this.productData.id).then((res) => {
                    if (res.code == 200) {
                        console.log(res, "商品详情");
                        //插入轮播
                        this.commodityDetails = res.data;
                        if (res.data.commodity.commodityImg) {
                            this.swipeList =
                                this.commodityDetails.commodity.commodityImg.split(
                                    ","
                                );
                        }
                        this.tripList =
                            res.data.commodity.commodityJourneyInformationList;
                        this.commentLsitAll =
                            res.data.commodity.orderEvaluateList.map(item=>{
                                item.rebackContent=item.rebackContent.replace(/\<img/g, '<img style="width:auto;height:auto;max-width:100%;display:block"');
                                return item;
                            });
                            console.log(this.commentLsitAll)
                        this.recommend = res.data.sameTypeList;
                        //最初平罗仅显示4条
                        //清空数据
                        this.commentLsit = [];
                        for (let i = 0; i < 4; i++) {
                            if (this.commentLsitAll[i]) {
                                this.commentLsit.push(this.commentLsitAll[i]);
                            }
                        }
                        //为弹出框加入数据
                        this.setOutList =
                            res.data.commodity.departurePlace.split(",");
                        //set on
                        if (this.setOutList.length == 1) {
                            this.choice.setOut = this.setOutList[0];
                        }
                        this.travelList = [
                            {
                                name: this.$t('productDetails.adult'),
                                price: res.data.commodity.childPrice,
                                num: 0,
                            },
                            {
                                name: this.$t('productDetails.children'),
                                price: res.data.commodity.adultPrice,
                                num: 0,
                            },
                        ];
                        //日历
                        this.minDate = new Date(res.data.commodity.periodStart);
                        this.maxDate = new Date(res.data.commodity.periodEnd);
                        let today = new Date(
                            getTime(new Date(), "-", "YMD")
                        ).getTime();
                        let minDate = new Date(
                            this.commodityDetails.commodity.periodStart
                        ).getTime();
                        let newDate = new Date();
                        //今日大于最小日期，今日即最小日期
                        if (today > minDate) {
                            this.minDate = newDate;
                        }
                        this.calendarSubmit(newDate);
                        this.loading = false;
                    }
                });
            }
        },
        swipeChange(index) {
            this.activeNum = index;
        },
        purchase(type) {
            this.shoppingStatus = type;
            this.popupShow = true;
        },
        moreTime() {
            this.calendarShow = true;
        },
        calendarSubmit(time) {
            const date = new Date(time);
            let condition = [];
            let week = [];
            if (this.commodityDetails.commodity.periodWeek) {
                condition = [].concat(
                    this.commodityDetails.commodity.periodWeek.split(",")
                );
                let weeks = [
                    this.$t('productDetails.monday'),
                    this.$t('productDetails.tuesday'),
                    this.$t('productDetails.wednesday'),
                    this.$t('productDetails.thursday'),
                    this.$t('productDetails.friday'),
                    this.$t('productDetails.saturday'),
                    this.$t('productDetails.sunday'),
                ];
                for (let i = 0; i < condition.length; i++) {
                    week.push(weeks[Number(condition[i]) - 1]);
                }
            }
            this.dateList = [];
            //避免无条件发生的无限循环
            if (week.length) {
                let minDate = new Date(
                    this.commodityDetails.commodity.periodStart
                ).getTime();
                let maxDate = new Date(
                    this.commodityDetails.commodity.periodEnd
                ).getTime();
                let today = new Date(getTime(new Date(), "-", "YMD")).getTime();
                //如果今天日期大于订单最大日期 结束 提示失效
                if (today > maxDate) {
                    //票已失效  
                    this.$toast({
                        type: "fail",
                        message:
                            this.$t('productDetails.message1') +
                            this.commodityDetails.commodity.periodEnd +
                            ','+this.$t('productDetails.message2')+'!',
                    });
                    this.calendarShow = false;
                    return;
                } else {
                    //今日大于最小日期，今日即最小日期
                    if (today > minDate) {
                        minDate = today;
                    }
                }
                for (let i = 0; this.dateList.length < 4; i++) {
                    let newDate = date.getTime() + 86400000 * i;
                    if (newDate > maxDate) {
                        break;
                    }
                    if (week.indexOf(weekDay(newDate)) !== -1) {
                        this.dateList.push({
                            week: weekDay(newDate),
                            time: getTime(newDate, "-", "MD"),
                            timeAll:getTime(newDate, "-", "YMD"),
                            active: newDate == date.getTime() ? true : false,
                            noseat: this.isHasSeat(getTime(newDate, "-", "YMD")) ? false : true,
                        });
                    }
                }
                //不够的时候补足4个 朝前查找
                if (this.dateList.length < 4) {
                    for (let i = 0; this.dateList.length < 4; i++) {
                        let newDate = date.getTime() - 86400000 * (i + 1);
                        if (newDate < minDate) {
                            break;
                        }
                        if (week.indexOf(weekDay(newDate)) !== -1) {
                            this.dateList.unshift({
                                week: weekDay(newDate),
                                time: getTime(newDate, "-", "MD"),
                                timeAll:getTime(newDate, "-", "YMD"),
                                active:
                                    newDate == date.getTime() ? true : false,
                                noseat: this.isHasSeat(getTime(newDate, "-", "YMD")) ? false : true,
                            });
                        }
                    }
                }
            }
            //
            this.calendarShow = false;
        },
        timeToogle(index) {
            for (let i = 0; i < this.dateList.length; i++) {
                if (index == i) {
                    this.dateList[i].active = true;
                } else {
                    this.dateList[i].active = false;
                }
            }
        },
        confirm() {
            let departureDate = "";
            for (let i = 0; i < this.dateList.length; i++) {
                if (this.dateList[i].active) {
                    departureDate = this.dateList[i].timeAll;
                    break;
                }
            }
            let request = {
                commodityId: this.commodityDetails.commodity.id, //商品id
                departurePlace: this.choice.setOut, //出发地
                departureDate: departureDate, //出发日期
                adultNum: this.travelList[0].num, //成人人数
                childNum: this.travelList[1].num, //儿童人数
            };
            let loginRules = [
                {
                    name: "departureDate",
                    required: true,
                    errmsg: this.$t('productDetails.selectDate'),
                },
                {
                    name: "departurePlace",
                    required: true,
                    errmsg: this.$t('productDetails.selectLocation'),
                },
            ];
            let valLoginRes = this.$validate.validate(request, loginRules);
            if (!valLoginRes.isOk) {
                this.$toast({ type: "fail", message: valLoginRes.errmsg });
                return false;
            }
            if (!(request.adultNum + request.childNum)) {
                this.$toast({ type: "fail", message: this.$t('productDetails.message3') });
                return false;
            }
            if (this.shoppingStatus == "join") {
                //加入购物车
                this.loading = true;
                addShoppingCar(request).then((res) => {
                    if (res.code == 200) {
                        this.$toast({
                            type: "success",
                            message: this.$t('productDetails.message4'),
                        });
                        this.$router.push({
                            path: "/shopping",
                        });
                        this.loading = false;
                    }
                });
            } else {
                //立即购买
                this.loading = true;
                let orderData = {
                    commodityId: request.commodityId, //商品id
                    departurePlace: request.departurePlace, //出发地
                    departureDate: request.departureDate, //出发日期
                    adultNum: request.adultNum, //成人人数
                    childNum: request.childNum, //儿童人数
                    orderMoney: (this.travelList[0].price*request.adultNum)+(this.travelList[1].price*request.childNum), 
                    couponDeduction: this.commodityDetails.commodity.couponUser=='1'?this.commodityDetails.commodity.commodityCouponList[0].discountPrice:0
                };
                //替后端算出折扣后的价格
                orderData.money=orderData.orderMoney-orderData.couponDeduction;
                let require={
                    orderMoney:orderData.orderMoney,
                    orderList:[orderData]
                }
                submitOrder(require).then(res=>{
                    if(res.code==200){
                        let commodityData={
                            id:res.data.totalId,
                            list:res.data.orderList
                        }
                        this.$store.commit("home/SET_ORDER_INFORMATION",commodityData);
                        this.$router.push({
                            path: "/confirmOrder",
                        });
                        this.loading = false;
                    }
                }).catch(err=>{
                    this.loading = false;
                })
            }
        },
        getCommodity(data) {
            console.log(data, "获得的商品数据");
            this.$store.commit("home/SET_PRODUCT", data);
            window.location.reload();
        },
        //收藏
        collection(type) {
            if (type == 0) {
                //增加收藏
                addCollection({ commodityId: this.productData.id }).then(
                    (res) => {
                        if (res.code == 200) {
                            this.commodityDetails.commodity.collectionUser =
                                "1";
                            this.$toast({
                                type: "success",
                                message: this.$t('productDetails.message5'),
                            });
                        }
                    }
                );
            } else {
                // 移除收藏
                delCollection(this.productData.id).then((res) => {
                    if (res.code == 200) {
                        this.commodityDetails.commodity.collectionUser = "0";
                        this.$toast({
                            type: "success",
                            message: this.$t('productDetails.message6'),
                        });
                    }
                });
            }
        },
        //领取优惠券
        receive() {
            receiveCoupon({
                couponId:
                    this.commodityDetails.commodity.commodityCouponList[0].id,
            }).then((res) => {
                if (res.code == 200) {
                    this.commodityDetails.commodity.couponUser = "1";
                    this.$toast({ type: "success", message: this.$t('productDetails.message7') });
                }
            });
        },
        formatter(day) {
            let condition = [];
            let weeks = [1, 2, 3, 4, 5, 6, 0];
            let week = [];
            if (this.commodityDetails.commodity.periodWeek) {
                condition = [].concat(
                    this.commodityDetails.commodity.periodWeek.split(",")
                );
                for (let i = 0; i < weeks.length; i++) {
                    if (condition.indexOf(weeks[i] + "") === -1) {
                        week.push(weeks[i]);
                    }
                }
            }
            let thisWeek = day.date.getDay();
            if (week.indexOf(thisWeek) !== -1) {
                day.type = "disabled";
            }
            return day;
        },

        //取得座位数
        getSeatNum(seatList) {
            //取得选中日期
            let departureDate = "";
            for (let i = 0; i < this.dateList.length; i++) {
                if (this.dateList[i].active) {
                    departureDate = this.dateList[i].timeAll;
                    break;
                }
            }
            let seatNum = 0;
            if (departureDate != "") {
                for (let i = 0; i < seatList.length; i++) {
                    if (seatList[i].departureDate == departureDate) {
                        seatNum = seatList[i].seatNum;
                        break;
                    }
                }
            }
            return seatNum;
        },
        isHasSeat(departDate) {
            let seatNum = 0;
            if (departDate != "") {
                for (let i = 0; i < this.commodityDetails.commodity.seatInfoLst.length; i++) {
                    if (this.commodityDetails.commodity.seatInfoLst[i].departureDate == departDate) {
                        seatNum = this.commodityDetails.commodity.seatInfoLst[i].seatNum;
                        if (seatNum > 0) {
                            return true;
                        }
                    }
                }
            }
            return false;
        },
    },
};
</script>

<style lang="scss" scoped>
#productDetails {
    #swipeBox {
        width: 100%;
        height: 2.58rem /* 258/100 */;
        position: relative;
        .custom-indicator {
            position: absolute;
            right: 0.05rem /* 5/100 */;
            bottom: 0.2rem /* 20/100 */;
            padding: 0.02rem /* 2/100 */ 0.05rem /* 5/100 */;
            font-size: 0.12rem /* 12/100 */;
            background: rgba(0, 0, 0, 0.1);
        }
    }
    .content {
        border-radius: 0.1rem /* 10/100 */ 0.1rem /* 10/100 */ 0 0;
        background: #fff;
        margin-top: -0.1rem /* 10/100 */;
        position: relative;
        // padding: 0.05rem /* 5/100 */ 0;
        box-sizing: border-box;
        z-index: 0;
        .titleBox {
            display: flex;
            align-items: center;
            background-image: linear-gradient(#38d0c9,#adebc3);
            border-radius:0.1rem 0.1rem 0 0;
            .title {
                font-size: 0.16rem /* 16/100 */;
                font-weight: bold;
                /*width: 70%;*/
                padding: 0.2rem /* 20/100 */ 0.09rem /* 9/100 */;
                padding:0.2rem 0.2rem;
                box-sizing: border-box;
                text-align: left;
                color: #fff;
            }
            .stock {
                width: 30%;
                display: flex;
                justify-content: center;
                flex-direction: column;
                span:nth-child(1) {
                    color: #fff;
                    font-size: 0.3rem /* 20/100 */;
                }
                span:nth-child(2) {
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }

    .discount {
        position:relative;
        display: flex;
        width:96%;
        margin:0.14rem auto;
        height: 109px;
        filter: drop-shadow(0 1.9px 3px rgba(0,0,0,.25));


        .left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 50%;
            padding-left:10%;
            color: #3e3a39;
            z-index:999;
            span:nth-child(1) {
                font-size: 0.14rem /* 16/100 */;
                margin: 0.02rem /* 5/100 */ 0;
                font-weight:600;
            }
            span:nth-child(2),
            span:nth-child(3) {
                font-size: 0.12rem /* 16/100 */;
                margin: 0.02rem /* 5/100 */ 0;
            }
        }
        .right {
            z-index:999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 40%;
            box-sizing: border-box;
            border-left: 1px dashed #fff;
            color: #fc8382;
            font-weight:600;
            span:nth-child(1) {
                font-size: 0.2rem /* 30/100 */;
                vertical-align: 1px;
            }
            span:nth-child(1) .yen {

                font-size:0.14rem;
            }
            span:nth-child(2) {
                font-size: 0.10rem /* 16/100 */;
                background: #fc8382;
                border-radius: 20px;
                padding: 3px 15px;
                color: #fff;
            }
        }
    }
    .discount::before {
        content: "";
        z-index: 0;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        margin:0 auto;
        background-size: 55% 100%,55% 100%;
        background-repeat: no-repeat;
        background-position: 0 50%,100% 50%;
        border-radius: 4px;
        background-image: radial-gradient(circle at center left,transparent 0,transparent 11px,#fededc 12px),radial-gradient(circle at center right,transparent 0,transparent 11px,#fededc 12px);
        background-size: calc(55% + 1px) 100%,calc(55% + 1px) 100%;
     }

    .titleStyle {
        // width: 100%;
        // padding: .1rem /* 10/100 */;
        // box-sizing: border-box;
        text-align: left;
        .title {
            width: 100%;
            font-size: 0.15rem /* 15/100 */;
            font-weight: bold;
            padding: 0.15rem /* 15/100 */;
            box-sizing: border-box;
            > span {
               padding: 0 /* 5/100 */;
            }
        }
        .contents {
            width: 100%;
            padding: 0.15rem /* 15/100 */;
            box-sizing: border-box;
            .tripCell {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                .left {
                    width: 15%;
                    padding-right: 0.12rem /* 12/100 */;
                    font-size: 0.13rem /* 13/100 */;
                    line-height: 0.2rem /* 20/100 */;
                    box-sizing: border-box;
                }
                .right {
                    position: relative;
                    width: 85%;
                    font-size: 0.15rem /* 115/100 */;
                    padding: 0 0.2rem /* 20/100 */;
                    > img {
                        display: inline-block;
                        width: 0.24rem /* 24/100 */;
                        height: 0.24rem /* 24/100 */;
                        position: absolute;
                        left: -0.12rem /* 12/100 */;
                        top: -0.02rem /* 2/100 */;
                        background: #fff;
                    }
                }
            }
        }
    }
    .explain,
    .careful,
    .remark {
        font-size: 0.14rem /* 14/100 */;
        .explainBox,
        .carefulBox,
        .remarkBox {
            > span {
                text-align: justify;
                line-height: 0.22rem /* 22/100 */;
                display: inline-block;
                width: 100%;
                word-wrap: break-word;
                white-space: normal;
            }
            img{
                max-width: 100%;
            }
        }
    }
    .comment {
        .commentBox {
            width: 100%;
            margin-bottom: 0.15rem /* 10/100 */;
            .top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                span:nth-child(1) {
                    font-size: 0.14rem /* 14/100 */;
                    color: #333333;
                    font-weight: bold;
                }
                span:nth-child(2) {
                    font-size: 0.13rem /* 13/100 */;
                    color: #999999;
                }
            }
            .details {
                font-size: 0.13rem /* 13/100 */;
                color: #333333;
                padding: 0.15rem /* 15/100 */ 0;
                line-height: 0.24rem /* 22/100 */;
                text-align: justify;
            }
            .reply{
                padding-left: .2rem /* 10/100 */;
                box-sizing: border-box;
                font-size: 0.13rem /* 13/100 */;
                >div:nth-child(1){
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                >div:nth-child(2){
                    text-align: justify;
                    line-height: 0.22rem;
                    display: inline-block;
                    width: 100%;
                    word-wrap: break-word;
                    white-space: normal;
                    padding: .1rem /* 10/100 */ 0;
                }
            }
        }
        .commentAll {
            font-size: 0.14rem /* 14/100 */;
            color: #999999;
            text-align: center;
        }
    }
    .recommend {
        background: #f9f9f9;
        .titles {
            position: relative;
            height: 0.54rem /* 54/100 */;
            display: flex;
            justify-content: center;
            align-items: center;
            div:nth-child(1) {
                width: 2rem /* 210/100 */;
                height: 0.01rem /* 1/100 */;
                background: #38d0c9;
                margin: auto;
            }
            div:nth-child(2) {
                font-size: 0.15rem /* 15/100 */;
                font-weight: bold;
                height: 0.22rem /* 21/100 */;
                width: 1rem /* 60/100 */;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #f9f9f9;
                position: absolute;
                left: 50%;
                margin-left: -0.5rem /* 50/100 */;
            }
        }
        .recommendBox {
            padding: 0.05rem /* 5/100 */ 0.15rem /* 15/100 */;
            .cell {
                width: 100%;
                height: 1.39rem /* 139/100 */;
                display: flex;
                padding: 0.12rem /* 12/100 */;
                margin-bottom: 0.15rem /* 15/100 */;
                box-sizing: border-box;
                border-radius: 0.05rem /* 5/100 */;
                color: #333333;
                background-color: #fff;
                box-shadow: 0px 0px 5px #e9e9e9;
                .left {
                    width: 1.15rem /* 115/100 */;
                    border-radius: 5px;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .center {
                    width: 2rem /* 150/100 */;
                    font-size: 0.13rem /* 15/100 */;
                    font-weight: bold;
                    text-align: justify;
                    line-height:1.2;
                    padding: 0 0.12rem /* 12/100 */;
                }
                .right {
                    padding-top: 0.03rem /* 3/100 */;
                    width: 2rem /* 50/100 */;
                    font-size: 0.15rem /* 15/100 */;
                    color: #e94225;
                    font-weight: bold;
                    display:block;
                }

            }
        }
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 120px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bottomBox {
        width: 100%;
        height: 0.84rem /* 84/100 */;
        .cell {
            height: 0.84rem /* 84/100 */;
            width: 100%;
            background-color: #fff;
            display: flex;
            padding: 0 0.12rem /* 12/100 */;
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 1;
            box-shadow: 0px 0px 5px #e9e9e9;
            .left {
                width: 20%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .right {
                width: 80%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }
    .choiceBox {
        padding: 0.12rem /* 12/100 */;
        .title {
            font-size: 0.15rem /* 15/100 */;
            text-align: left;
            font-weight: bold;
            padding: 6px 0;
        }
        .timeBox {
            display: flex;
            font-size: 0.12rem /* 15/100 */;
            padding: 12px 0;
            > div:nth-child(1) {
                width: 80%;
                display: flex;
                justify-content: space-between;
                > div {
                    width: 23%;
                    /*height: 0.6rem  50/100 */;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-direction: column;
                    padding: 0.06rem /* 12/100 */ 0;
                    box-sizing: border-box;
                    color: #333;
                    border-radius: 0.05rem /* 5/100 */;
                    border: 1px solid #38d0c9;
                }
                > div.active {
                    /*background-image: repeating-linear-gradient(
                        45deg,
                        #38d0c9 9%,
                        #fae1bf 12%
                    );*/
                    background-color:#38d0c9;
                    color: #fff;
                }
                > div.noseat {
                    background:url(../../../../../public/static/images/icon/noseat.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
            > div:nth-child(2) {
                width: 20%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }
        .setOutBox {
            font-size: 0.15rem /* 15/100 */;
            .setOutCell {
                width: 50%;
                padding: 0.12rem /* 12/100 */;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
            }
        }
        .travelBox {
            font-size: 0.15rem /* 15/100 */;
            .travelCell {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.1rem /* 10/100 */ 0;
                > div:nth-child(1) {
                    > span:nth-child(1) {
                        margin-right: 0.1rem /* 10/100 */;
                    }
                    > span:nth-child(2) {
                        color: #e94225;
                        font-weight:600;
                    }
                }
                > div:nth-child(2) {
                }
            }
            .remark {
                font-size: 0.13rem /* 13/100 */;
                color: #999999;
                text-align: left;
                padding: 0.05rem /* 5/100 */ 0;
                > span:nth-child(1) {
                    margin-right: 0.1rem /* 10/100 */;
                }
            }
            .stock {
                font-size: 0.12rem /* 12/100 */;
                text-align: left;
                padding: 0.05rem /* 5/100 */ 0;
                > span:nth-child(1) {
                    margin-right: 0.1rem /* 10/100 */;
                }
            }
            .but {
                padding: 0.12rem /* 12/100 */ 0;
            }
        }
    }
}
</style>
<style>
.van-stepper {
    /* border:1px solid #6ACDC8; */
    /* padding: .02rem 2/100; */
    /* box-sizing: border-box; */
}
#productDetails .bottomBox .cell .right .van-button{
    margin-left: .1rem /* 10/100 */;
}
#productDetails .bottomBox .cell .right .van-button:nth-child(2) {

    background-image: linear-gradient(to right, #67be64, #fae1bf);
}

.van-button--normal {
    padding: 0 25px;
    font-size: 13px;
    border-radius: 20px;
    font-weight: 600;
    border-radius: 25px;
}
    </style>