<template>
    <div class="right-wrap">
        <!-- <img src="@/assets/image/banner4.png" alt="banner" class="banner"> -->
        <div class="hot-list-wrap">
                    <el-empty :image-size="200" v-if="bannerList.length < 1"></el-empty>
                    <!-- arrow="never" indicator-position="none" -->
                    <el-carousel indicator-position="none" height="250px" :interval="5000" v-if="bannerList.length > 0">
                        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                            <router-link :to="item.remark">
                                <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
                            </router-link>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- <div class="entry-list-container">
                    <div class="tab-header" style="border-bottom:none">
                        <span class="tab-title">秒杀活动</span>
                    </div>
                    <div class="special-goods-list">
                        <div class="special-goods-item" v-for="(item,index) in specialGoodsList" :key="index">
                            <img width="100%" :src="item.url" alt="">
                            <div class="ctrl-box">
                                <div class="label">
                                    <span>{{ item.name }}</span>
                                </div>
                                <div class="instantPrice">
                                    <span>秒杀价：</span><span style="color: red;font-weight: bold;">{{ item.instantPrice }}</span>
                                </div>
                                <div class="price line-through">
                                    <span>原价：</span><span>{{ item.price }}</span>
                                </div>
                                <div class="statusButton" :class="item.status == 0 ? '' : 'disabled'" @click="specialGoods(item)">
                                    <span>{{ item.status == 0 ? '立即秒杀' : item.status == 1 ? '已无货' : '已结束' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
        <!-- <div class="notice-board">
            <div class="notice-header">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                    class="icon-speaker">
                    <path
                        d="M15.0166 3.83658C14.7843 3.69157 14.5186 3.60859 14.2451 3.59556C13.9715 3.58254 13.6992 3.63991 13.4542 3.76218L6.69579 7.11018H3.95979C3.07299 7.11018 2.35059 7.83138 2.35059 8.71938V15.0758C2.35059 15.9626 3.07179 16.685 3.95979 16.685H6.69819L13.4638 19.9742C13.6882 20.0834 13.9282 20.1374 14.1682 20.1374C14.4646 20.1374 14.7598 20.0546 15.0202 19.8914C15.493 19.595 15.775 19.0862 15.775 18.5282V5.20338C15.7774 4.64298 15.493 4.13178 15.0166 3.83658ZM7.96179 13.961C7.96179 14.5454 7.48779 15.0182 6.90459 15.0182C6.32139 15.0182 5.84739 14.5442 5.84739 13.961V9.91698C5.84739 9.33258 6.32139 8.85978 6.90459 8.85978C7.48779 8.85978 7.96179 9.33378 7.96179 9.91698V13.961ZM17.5966 7.54938C17.239 7.54938 16.891 7.36818 16.6918 7.04058C16.3882 6.54138 16.5478 5.89098 17.047 5.58738L19.2202 4.26738C19.7194 3.96378 20.3698 4.12338 20.6734 4.62138C20.977 5.12058 20.8174 5.77098 20.3182 6.07458L18.145 7.39458C17.9801 7.49614 17.7902 7.54974 17.5966 7.54938ZM20.9062 12.9182H18.4306C17.8462 12.9182 17.3734 12.4442 17.3734 11.861C17.3734 11.2766 17.8474 10.8038 18.4306 10.8038H20.9062C21.4906 10.8038 21.9634 11.2778 21.9634 11.861C21.9646 12.4442 21.4906 12.9182 20.9062 12.9182ZM19.7686 19.6814C19.585 19.6814 19.399 19.6334 19.2286 19.5326L17.0554 18.2402C16.5538 17.9414 16.3882 17.2922 16.687 16.7906C16.9858 16.289 17.635 16.1246 18.1366 16.4222L20.3098 17.7146C20.8114 18.0134 20.977 18.6626 20.6782 19.1642C20.5844 19.3219 20.4513 19.4524 20.2918 19.5431C20.1323 19.6338 19.952 19.6814 19.7686 19.6814Z"
                        fill="#FF8E12"></path>
                    <path
                        d="M15.7774 14.735V5.20338C15.7774 4.64298 15.493 4.13178 15.0166 3.83658C14.7843 3.69157 14.5186 3.60859 14.2451 3.59556C13.9715 3.58254 13.6992 3.6399 13.4542 3.76218L6.69579 7.11018H3.95979C3.07299 7.11018 2.35059 7.83138 2.35059 8.71938V15.0758C2.35059 15.9626 3.07179 16.685 3.95979 16.685H6.69819L10.8574 18.707C12.859 17.885 14.5654 16.4942 15.7774 14.735ZM7.96179 13.961C7.96179 14.5454 7.48779 15.0182 6.90459 15.0182C6.32139 15.0182 5.84739 14.5442 5.84739 13.961V9.91698C5.84739 9.33258 6.32139 8.85978 6.90459 8.85978C7.48779 8.85978 7.96179 9.33378 7.96179 9.91698V13.961ZM17.305 5.43258L17.047 5.58858C16.5478 5.89218 16.3894 6.54258 16.6918 7.04178C16.7861 7.19727 16.9189 7.32579 17.0774 7.41492C17.2359 7.50406 17.4147 7.55078 17.5966 7.55058C17.6266 7.55058 17.6554 7.54698 17.6854 7.54458C17.6276 6.82989 17.5002 6.12253 17.305 5.43258Z"
                        fill="#FCA315"></path>
                    <path
                        d="M14.6962 4.5229C14.6962 4.2361 14.6818 3.9517 14.6602 3.6697C14.2666 3.5425 13.8358 3.5701 13.4542 3.7597L6.69579 7.10889H3.95979C3.07299 7.10889 2.35059 7.8301 2.35059 8.7181V15.0745C2.35059 15.2353 2.37459 15.3901 2.41899 15.5365C2.81259 15.5785 3.21219 15.6025 3.61659 15.6025C9.73658 15.6025 14.6962 10.6417 14.6962 4.5229ZM5.84739 9.91569C5.84739 9.33129 6.32138 8.8585 6.90458 8.8585C7.48778 8.8585 7.96178 9.33249 7.96178 9.91569V13.9597C7.96178 14.5441 7.48778 15.0169 6.90458 15.0169C6.32138 15.0169 5.84739 14.5429 5.84739 13.9597V9.91569Z"
                        fill="#FCB138"></path>
                    <path
                        d="M5.84739 10.4804V9.91635C5.84739 9.33195 6.32139 8.85915 6.90459 8.85915C7.06462 8.85906 7.22258 8.89544 7.36646 8.96551C7.51034 9.03558 7.63637 9.1375 7.73498 9.26355C9.15338 8.13075 10.2886 6.65955 11.0146 4.96875L6.69579 7.10955H3.95979C3.07299 7.10955 2.35059 7.83075 2.35059 8.71875V11.576C3.56913 11.4083 4.75104 11.038 5.84739 10.4804Z"
                        fill="#FFC65E"></path>
                </svg>
                <span class="title">兑换须知</span>
            </div>
            <div class="notice-content" v-html="noticeContent">

            </div>
        </div> -->
        <div class="myTabs" style="background: #fff;">
            <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="积分兑换" name="goodsNotice">
                    <div class="tab-list" style="margin-top: 10px;">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in options"
                            :key="item.dictValue" @click="choseProductAttributeType(item)">
                            {{ item.dictLabel }}
                        </div>
                    </div>
                    <div class="tab-list" style="margin-top: 10px;">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in pointsRangeList"
                            :key="item.dictValue" @click="chosePointsRange(item)">
                            {{ item.dictLabel }}
                        </div>
                    </div>
                    <!-- <div class="tab-list" style="margin-top: 10px;">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in deliveryTypeList"
                            :key="item.type" @click="choseDeliveryType(item)">
                            {{ item.name }}
                        </div>
                    </div> -->
                    <div class="tab-list" style="margin-top: 10px;">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in orderByClauseList"
                            :key="item.orderByClause" @click="changeOrderByClause(item)">
                            <!-- <i :class="item.icon"></i> -->
                            {{ item.name }}
                        </div>
                        <el-input clearable style="width: 200px;margin-left: 50px;" size="small" v-model="goodsName"
                        placeholder="物品名称" @blur="goodsName=$event.target.value.trim()"></el-input>
                    <el-button size="small" style="margin-left: 30px;" type="primary" @click="handleFilter">查询</el-button>
                    </div>
                    <div class="list-container">
                        <el-empty v-if="goodsList.length == 0" :image-size="200"></el-empty>
                        <div v-else class="prize-list">
                            <div v-for="(item, index) in goodsList" :key="index" class="prize-card prize-item">
                                <div class="img-container">
                                    <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="item.imgUrls.length==0?[item.imgUrl]:item.imgUrls"
                                        class="prize-img"></el-image>
                                    <img v-if="item.isNewSku==1" src="../../assets/image/newGoods.png" class="newGoods"></img>
                                </div>
                                <div class="content">
                                    <h3 :title="item.name" class="title">{{ item.name }}</h3>
                                    <!-- <h3 style="color: #1e80ff;" :title="item.name" class="title" @click="handleClickGood(item.skuId)">{{ item.name }}</h3> -->
                                    <p class="desc"><span v-if="item.deliveryTypeName">{{ item.deliveryTypeName }}</span></p>
                                    <p class="redeem-info">
                                        <span title="积分" class="price">
                                            <svg t="1681785345732" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="1220" width="200" height="200">
                                                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="1221">
                                                </path>
                                                <path
                                                    d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z"
                                                    fill="#FF7744" p-id="1222"></path>
                                                <path
                                                    d="M512 34.133333c176.878933 0 331.298133 96.085333 413.934933 238.933334-82.6368 142.848-237.056 238.933333-413.934933 238.933333S180.701867 415.914667 98.065067 273.066667C180.667733 130.2528 335.121067 34.133333 512 34.133333z"
                                                    fill="#FFAA44" p-id="1223"></path>
                                                <path
                                                    d="M496.605867 305.3568a17.066667 17.066667 0 0 1 30.788266 0L576.853333 408.917333a17.066667 17.066667 0 0 0 13.175467 9.557334l113.800533 15.018666a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018667a17.066667 17.066667 0 0 0-5.051733 15.496533l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090667l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090667l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496533l-83.217066-79.018667a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018666a17.066667 17.066667 0 0 0 13.175466-9.557334l49.425067-103.560533z"
                                                    fill="#FFFFFF" p-id="1224"></path>
                                            </svg>
                                            {{ item.price }}
                                        </span>
                                        <span class="count">{{ item.stock }} 库存</span>
                                    </p>
                                </div>
                                <div class="btn-container">
                                    <button v-if="item.stock == 0" @click="handleClickExchange(item.skuId)"
                                        class="ui-btn gray medium btn">
                                        敬请期待
                                    </button>
                                    <button v-else @click="handleClickExchange(item.skuId)"
                                        class="ui-btn primary medium btn">
                                       立即兑换
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="礼品兑换" name="giftNotice">
                    <div class="tab-list">
                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in choseList" :key="item.index"
                            @click="choseType(item)">
                            {{ item.title }}
                        </div>
                    </div>
                    <el-empty v-if="giftList.length == 0" :image-size="200"></el-empty>
                    <div v-else class="list-container">
                        <div class="prize-list">
                            <div v-for="(item, index) in giftList" :key="index" class="prize-card prize-item">
                                <div class="img-container">
                                    <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="item.imgUrls.length==0?[item.imgUrl]:item.imgUrls"
                                        class="prize-img"></el-image>
                                    <img v-if="item.isNewSku==1" src="../../assets/image/newGoods.png" class="newGoods"></img>
                                </div>
                                <div class="content">
                                    <h3 :title="item.name" class="title">{{ item.name }}</h3>
                                    <!-- <h3 style="color: #1e80ff;" :title="item.name" class="title" @click="handleClickGood(item.skuId)">{{ item.name }}</h3> -->
                                    <p class="desc"><span v-if="item.deliveryTypeName">{{ item.deliveryTypeName }}</span></p>
                                    <p class="redeem-info">
                                        <span title="福利券" class="price">
                                            <svg t="1681880735031" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="1483" width="200" height="200">
                                                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="1484">
                                                </path>
                                                <path
                                                    d="M35.328 429.841067a136.533333 136.533333 0 0 1 96.5632-167.2192L725.333333 103.594667a136.533333 136.533333 0 0 1 167.253334 96.5632L957.815467 443.733333H39.0144l-3.720533-13.892266z"
                                                    fill="#FFAA44" p-id="1485"></path>
                                                <path
                                                    d="M34.133333 443.733333a136.533333 136.533333 0 0 1 136.533334-136.533333h682.666666a136.533333 136.533333 0 0 1 136.533334 136.533333v11.946667c0 15.598933-10.786133 28.808533-24.814934 35.5328a136.533333 136.533333 0 0 0 0 246.3744c14.0288 6.724267 24.814933 19.933867 24.814934 35.498667V785.066667a136.533333 136.533333 0 0 1-136.533334 136.533333H170.666667a136.533333 136.533333 0 0 1-136.533334-136.533333v-11.946667c0-15.598933 10.786133-28.808533 24.814934-35.5328a136.533333 136.533333 0 0 0 0-246.3744c-14.0288-6.724267-24.814933-19.933867-24.814934-35.498667V443.733333z"
                                                    fill="#FF7744" p-id="1486"></path>
                                                <path
                                                    d="M375.466667 426.666667a51.2 51.2 0 0 1 51.2 51.2v273.066666a51.2 51.2 0 0 1-102.4 0v-273.066666a51.2 51.2 0 0 1 51.2-51.2z"
                                                    fill="#FFFFFF" p-id="1487"></path>
                                            </svg>
                                            兑换券
                                        </span>
                                        <span class="count">{{ item.stock }}库存</span>
                                    </p>
                                </div>
                                <div class="btn-container">
                                    <button v-if="item.stock == 0" @click="handleClickExchange(item.skuId)"
                                        class="ui-btn medium default btn">
                                        敬请期待
                                    </button>
                                    <button v-else @click="handleClickExchange(item.skuId)"
                                        class="ui-btn primary medium default btn">
                                       立即兑换
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>


                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="物品详情" :visible.sync="dialogVisible" width="40%">
            <div v-html="skuDesc"></div>
        </el-dialog>

    </div>
</template>
<script>
import { integralInfo,integralList, festivalList, notice, welfareType, dictList } from "@/api/allApi";
import { getTab } from '@/utils/auth'
import { debounce } from '@/utils/index'
export default {
    data() {
        return {
            specialGoodsList:[
        {
                    id:1,
                    path:'/home/pointsMall/redeem?id=20&name=goodsNotice&type=8',
                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
                    name:'全球家居',
                    instantPrice:2999,
                    price:6000,
                    status:0,
                },
                {
                    id:2,
                    path:'/home/pointsMall/redeem?id=19&name=goodsNotice&type=8',
                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
                    name:'全球母婴',
                    instantPrice:2999,
                    price:6000,
                    status:1,
                },
                {
                    id:3,
                    path:'/home/pointsMall/redeem?id=18&name=goodsNotice&type=8',
                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
                    name:'全球保健品',
                    instantPrice:2999,
                    price:6000,
                    status:2,
                },
                {
                    id:4,
                    path:'/home/pointsMall/redeem?id=18&name=goodsNotice&type=8',
                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
                    name:'全球电器',
                    instantPrice:2999,
                    price:6000,
                    status:3,
                },
        ],
            dialogVisible: false,
            skuDesc:'',
            bannerList: [],
            page: 1,
            pages: 1,
            // tab 列表
            options: [],
            pointsRangeList:[],
            goodsName: '',
            productAttribute: '',//商品类型
            pointsRange: '',//积分区间
            orderByClause: '',//价格,销量升降
            deliveryType: '',
            deliveryTypeList: [
            {
                    type: '',
                    checked: true,
                    name: '默认'
                },
                {
                    type: 0,
                    checked: false,
                    name: '销量'
                },
                {
                    type: 1,
                    checked: false,
                    name: '价格'
                },
                // {
                //     type: '',
                //     checked: true,
                //     name: '默认'
                // },
                // {
                //     type: 0,
                //     checked: false,
                //     name: '办公室领取'
                // },
                // {
                //     type: 1,
                //     checked: false,
                //     name: '快递'
                // },
                // {
                //     type: 2,
                //     checked: false,
                //     name: '卷码兑换'
                // },
                // {
                //     type: 3,
                //     checked: false,
                //     name: '线下组织'
                // },
            ],
            orderByClauseList: [
                {
                    icon: '',
                    checked: true,
                    orderByClause: '',
                    name:'默认'
                },
                {
                    icon: 'el-icon-bottom',
                    checked: false,
                    orderByClause: 'saleAsc',
                    name:'销量由低到高'
                },
                {
                    icon: 'el-icon-top',
                    checked: false,
                    orderByClause: 'saleDesc',
                    name:'销量由高到低'
                },
                {
                    icon: 'el-icon-bottom',
                    checked: false,
                    orderByClause: 'priceAsc',
                    name:'价格由低到高'
                },
                {
                    icon: 'el-icon-top',
                    checked: false,
                    orderByClause: 'priceDesc',
                    name:'价格由高到低'
                },
            ],
            choseList: [],
            curChosed: '',
            activeName: 'goodsNotice',
            noticeContent: '',
            goodsList: [],
            giftList: [],
        };
    },
    created() {
        this.getBannerList();
        const Tab = getTab();
        if (Tab == 'gift') {
            this.activeName = 'giftNotice';
        };
        this.getIntegralTypes();
        this.getPointsRangeList();
        this.getWelfareList();
        this.getFirstList();
        this.getNotice(this.activeName);
    },
    methods: {
        specialGoods(val){
            if(val.status == 0){
                this.$router.push({
                    path: val.path,
                })
            }
        },
        getDataInfo(id){
            integralInfo({skuId:id}).then(response => {
                    this.data = response.data.data;
                }).catch(() => {})
        },
        getBannerList(){
            dictList({dictType:'index_lbt'}).then(response=>{
                this.bannerList = response.data.data; 
            })
        },
        handleClickGood(id) {
            integralInfo({skuId:id}).then(response => {
                    this.skuDesc = response.data.data.skuDesc;
                    if(this.skuDesc){
                        this.dialogVisible = true;
                    }
                }).catch(() => {})
            
        },
        handleFilter() {
            this.page = 1;
            this.getFirstList();
        },
        changeOrderByClause(item) {
            this.orderByClauseList.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.orderByClause = item.orderByClause;
            this.page = 1;
            this.getFirstList();
        },
        getIntegralTypes() {
            dictList({ dictType: 'mall_sku_attribute' }).then(response => {
                console.log(response.data.data);
                const dataList = response.data.data;
                const data = {
                    dictValue: '',
                    dictLabel: '全部'
                }
                dataList.unshift(data);
                if (dataList.length > 0) {
                    dataList.forEach((item, index) => {
                        if (index == 0) {
                            item.checked = true;
                        } else {
                            item.checked = false;
                        }

                    });
                    this.options = dataList;
                }
            })
        },
        getPointsRangeList() {
            dictList({ dictType: 'points_range' }).then(response => {
                const dataList = response.data.data;
                const data = {
                    dictValue: '',
                    dictLabel: '全部'
                }
                dataList.unshift(data);
                if (dataList.length > 0) {
                    dataList.forEach((item, index) => {
                        if (index == 0) {
                            item.checked = true;
                        } else {
                            item.checked = false;
                        }

                    });
                    this.pointsRangeList = dataList;
                }
            })
        },
        getWelfareList() {
            welfareType().then(response => {
                console.log(response.data.data);
                const dataList = response.data.data;
                if (dataList.length > 0) {
                    dataList.forEach((item, index) => {
                        if (index == 0) {
                            item.checked = true;
                        } else {
                            item.checked = false;
                        }

                    });
                    this.choseList = dataList;
                    this.curChosed = dataList[0].actId;
                    festivalList({ actId: this.curChosed }).then(response => {
                        console.log(response.data.data);
                        let list = response.data.data;
                        list.forEach((element,index) => {
                            let imgUrls = []
                            if(element.imgs){
                                for (let i in element.imgs) {
                                    imgUrls.push(element.imgs[i].url)
                                }
                            } 
                            list[index].imgUrls = imgUrls;
                        });
                        console.log(list);
                        this.giftList = list;
                    })
                }
            })
        },
        choseDeliveryType(item) {
            this.deliveryTypeList.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.deliveryType = item.type;
            this.page = 1;
            this.getFirstList();
        },
        choseProductAttributeType(item) {
            this.options.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.productAttribute = item.dictValue;
            this.page = 1;
            this.getFirstList();
        },
        chosePointsRange(item) {
            this.pointsRangeList.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.pointsRange = item.dictValue;
            this.page = 1;
            this.getFirstList();
        },
        choseType(item) {
            this.choseList.forEach((element) => {
                element.checked = false;
            });
            item.checked = true;
            this.curChosed = item.actId;
            this.getSecondList();
        },
        getNotice(val) {
            notice({ noticeType: val }).then(response => {
                console.log(response.data.data);
                this.noticeContent = response.data.data.content
            })
        },
        getFirstList() {
            let params = {
                limit: 16,
                page: this.page,
                name: this.goodsName,
                productAttribute: this.productAttribute,
                pointsRange:this.pointsRange,
                saleBySort: this.orderByClause,
                // deliveryType: this.deliveryType
            }

            integralList(params).then(response => {
                let list = response.data.data.list;
                list.forEach((element,index) => {
                    let imgUrls = []
                    if(element.imgs){
                        for (let i in element.imgs) {
                            imgUrls.push(element.imgs[i].url)
                        }
                    } 
                    list[index].imgUrls = imgUrls;
                });
                console.log(list);
                if (this.page == 1) {
                    this.goodsList = list;
                    this.page = response.data.data.pageNum;
                    this.pages = response.data.data.pages;
                } else {
                    this.goodsList = [
                        ...this.goodsList,
                        ...list
                    ]
                }
                ++this.page
            })
        },
        getSecondList() {
            festivalList({ actId: this.curChosed }).then(response => {
                console.log(response.data.data);
                let list = response.data.data;
                list.forEach((element,index) => {
                    let imgUrls = []
                    if(element.imgs){
                        for (let i in element.imgs) {
                            imgUrls.push(element.imgs[i].url)
                        }
                    } 
                    list[index].imgUrls = imgUrls;
                });
                console.log(list);
                this.giftList = list;
            })
        },
        handleClick(tab, event) {
            this.page = 1;
            console.log(tab.name, event);
            if (tab.name == 'goodsNotice') {
                this.getFirstList();
            } else {
                this.getSecondList();
            }
            this.getNotice(tab.name);
        },
        handleClickExchange(id) {
            this.$router.push({
                path: '/home/pointsMall/redeem',
                query: {
                    id: id,
                    name: this.activeName,
                    type:this.curChosed,
                }
            });
        },
        // 保存滚动值，这是兼容的写法
        handleScroll() {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            console.log("距顶部---" + scrollTop + "可视区高度---" + windowHeight + "滚动条总高度---" + scrollHeight);
            if (scrollHeight - (scrollTop + windowHeight) < 500) {
                if (this.page > this.pages) {
                    return
                } else {
                    this.getFirstList();
                }
            }
        },
    },
    mounted() {
        window.addEventListener('scroll', debounce(this.handleScroll,100));
    },
    destroyed() {
        console.log('lalalal')
        // 离开该页面需要移除这个监听的事件，不然会报错
        window.removeEventListener('scroll', this.handleScroll)
    }
};
</script>
<style scoped>
.hot-list-wrap{
    margin-bottom: 10px;
}
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background-color: #007fff; */
    color: #fff;
    border-radius: 2px;
    border: none;
    padding: 0.5rem 1.3rem;
    outline: none;
    transition: background-color .3s, color .3s;
    cursor: pointer;
}

.list-container .prize-item:nth-child(4n) {
    margin-right: 0;
}

.list-container {
    border-radius: 2px;
    background-color: transparent;
}

.list-container .prize-list {
    padding: 20px 0;
    background: #fff;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
}

.list-container .prize-item {
    width: calc(25% - 15px);
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
}

.prize-card {
    background: #fff;
    border: 1px solid #e4e6eb;
    box-sizing: border-box;
    border-radius: 2px;
}

.prize-card .img-container {
    position: relative;
    height: 159px;
    background: #f7f8fa;
    border-radius: 2px 2px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prize-card .img-container .prize-img {
    /* width: 100%;
    height: 100%; */
    max-height: 120px;
    max-width: 120px;
}
.prize-card .img-container .newGoods{
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 0px;
    left: 0px;
}
.prize-card .content {
    padding: 0 16px;
}

.prize-card .content .desc,
.prize-card .content .title {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prize-card .content .title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-top: 12px;
    color: #1d2129;
    margin-bottom: 0;
}

.prize-card .content .desc {
    margin: 10px 0;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    width: 100%;
}

.prize-card .content .desc span {
    color: #ff7d00;
    background: #fff7e8;
    padding: 2px 4px;
}

.prize-card .content .redeem-info {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    align-items: center;
}

.prize-card .content .price {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #ff8462;
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
}

.prize-card .content .price .icon {
    height: 16px;
    width: 16px;
    position: relative;
    margin-right: 4px;
}

.prize-card .content .count {
    font-size: 12px;
    line-height: 20px;
    margin-left: 12px;
    color: #8a919f;
}

.prize-card .btn {
    border-radius: 16px;
}

.medium {
    padding: 5px 16px;
}

.primary {
    background-image: linear-gradient(to right, #f5b543,#faa029);
}
.gray{
    background-color: gray;
    opacity: 0.5;
}

.ui-btn {
    box-sizing: border-box;
    font-size: 14px;
    line-height: 22px;
    padding: 5px 16px;
    color: #fff;
    border: none;
    white-space: nowrap;
}

.prize-card .btn-container {
    border-top: 1px solid #e4e6eb;
    text-align: right;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-wrap {
    width: 100%;
}

.banner {
    width: 100%;
    /* height: 120px; */
    background-color: #2c82fe;
    border-radius: 4px;
    margin-bottom: 16px;
    display: block;
}

.notice-board {
    padding: 1rem 1.667rem;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 4px;
}

.notice-board .notice-header {
    display: flex;
    align-items: center;
}

.notice-board .notice-header .title {
    margin-left: 1rem;
    font-size: 1rem;
    line-height: 2rem;
    font-weight: 500;
    color: #252933;
}

.notice-board .notice-content {
    /* margin-top: 0.2rem;
    margin-left: 2.5rem; */
    font-size: 0.4rem;
    /* line-height: 1.3rem; */
    /* white-space: pre-line; */
    color: #515767;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    position: relative;
    align-items: baseline;
}

.tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8rem;
    background-color: #fff;
    border-radius: 1rem;
    font-size: 12px;
    line-height: 1.8rem;
    color: #8a9aa9;
    padding: 0 0.83rem;
    margin-right: 1rem;
    position: relative;
    cursor: pointer;
}

.checked {
    background-color: #1e80ff;
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.entry-list-container{
    background-color: #fff;
    border-radius: 4px;
}
.entry-list-container .tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e5e6eb;
    overflow: hidden;
}

.tab-header .tab-title {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
}
.special-goods-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.special-goods-list .special-goods-item{
    position: relative;
    /* padding: 0 6px; */
    width: 230px;
    height: 169px;
    min-width: 0;
}
.special-goods-item .ctrl-box .label{
    position: absolute;
    left: 20px;
    top: 30px;
    line-height: 30px;
    height: 30px;
    width: 100px;
    /* text-align: center; */
    font-size: 16px;
    z-index: 1;
    color: black;
    /* background-color: #fff;
    border: 1px solid #fff; */
    /* border-radius: 6px; */
    font-weight: 800;
    
}
.special-goods-item .ctrl-box .instantPrice{
    position: absolute;
    left: 20px;
    top: 60px;
    line-height: 30px;
    height: 30px;
    width: 50%;
    /* text-align: center; */
    font-size: 16px;
    z-index: 1;
    color: black;
    /* background-color: #fff;
    border: 1px solid #fff;
    border-radius: 6px; */
    font-weight: 300;
}
.special-goods-item .ctrl-box .price{
    position: absolute;
    left: 20px;
    top: 90px;
    line-height: 30px;
    height: 30px;
    width: 100px;
    /* text-align: center; */
    font-size: 16px;
    z-index: 1;
    color: black;
    /* background-color: rgba(0, 0, 0, .2);
    border: 1px solid #fff;
    border-radius: 6px; */
    font-weight: bold;
}
.special-goods-item .ctrl-box .statusButton{
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 120px;
    line-height: 30px;
    height: 30px;
    width: 100px;
    text-align: center;
    font-size: 16px;
    z-index: 1;
    color: #fff;
    background-color: red;
    border: 1px solid red;
    border-radius: 6px;
    font-weight: 300;
}
.special-goods-item .ctrl-box .disabled{
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid #fff;
}
.line-through {
    text-decoration: line-through
}
</style>