<template>
    <div class="prizePopMaskDiv" v-if="show">
        <basicPop :pop="pop" @closeClick="closeClick">
            <!-- <%--    弹窗--%> -->
            <div :style="styleData.listDiv" class="listDiv">
                <div :style="styleData.container" class="my-friend-container" v-if="auctionRecordList.length > 0">
                    <div class="tabs">
                        <div :class="activeTab == 1 ? 'tab active' : 'tab'" @click="activeTab = 1">我参与</div>
                        <div :class="activeTab == 2 ? 'tab active' : 'tab'" @click="activeTab = 2">竞拍成功</div>
                    </div>
                    <div v-show="activeTab == 1">
                        <div class="item" v-for="(item, index) in auctionRecordList" :key="index">
                            <div>拍品名称: {{ item.prizeName }}</div>
                            <div>竞拍积分: {{ item.auctionScore }}</div>
                            <div>竞拍状态: {{ item.auctionStatus == 1 ? '竞拍失败' : item.auctionStatus == 2 ? '竞拍成功' : '竞拍中' }}
                            </div>
                            <div>竞拍时间: {{ item.createTime | filterDate }}</div>
                        </div>
                    </div>
                    <div v-show="activeTab == 2">
                        <div class="item"
                            v-for="(item, index) in auctionRecordList.filter(item => { return item.auctionStatus == 2 })"
                            :key="index">
                            <div>拍品名称: {{ item.prizeName }}</div>
                            <div>竞拍积分: {{ item.auctionScore }}</div>
                            <div>领取状态: {{ item.claimPrizeStatus == 1 ? '已领取' : '未领取' }}</div>
                            <div>竞拍时间: {{ item.createTime | filterDate }}</div>
                        </div>
                    </div>
                </div>
                <div v-else class="noFriends" :style="styleData.noFriends">暂无竞拍记录哦</div>
                <div class="closeDiv" :style="styleData.closeDiv" @click="closeDialog()"></div>
            </div>
        </basicPop>
    </div>
</template>

<script>
import basicPop from './hdzxtbasicPop.vue';
import store from "../../../store/store";
import apis1 from '../../../util/apis1.js';
let { getAuctionUserInfo } = apis1;

export default {
    components: {
        basicPop
    },
    props: [],
    data() {
        return {
            activeTab: 1,
            auctionRecordList: [],
            show: true,
            pop: {
                title: '我的竞拍记录',
                titlepop: ''
            }
        };
    },
    computed: {
        title() {
            return '我的竞拍记录';
        }
    },

    created() {
        document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
        this.pop.titlepop = this.styleData.titlepop
            ? this.styleData.titlepop
            : { backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)' };
        this.pop.leftLineDiv = this.styleData.leftLineDiv;
        this.pop.rightLineDiv = this.styleData.rightLineDiv;

        this.initData();
    },
    methods: {
        closeClick() {
            document.querySelector('body').removeAttribute('style');
            this.submit();
        },
        initData() {
            getAuctionUserInfo(0, data => {
                this.auctionRecordList = data.data;
            })
        },

        closeDialog() {
            document.querySelector('body').removeAttribute('style');
            this.submit();
        }
    }
};
</script>

<style lang="scss" scoped="scoped">
.closeDiv {
    width: 1rem;
    height: 1rem;
    margin: auto;
    margin-top: 0.7rem;
}

.noFriends {
    // font-size: 0.4rem;
    // color: #339b9a;
    // text-align: center;
    // line-height: 5rem;
    height: 100%;
    font-size: 0.24rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8c8c8c;
}

.listDiv {
    position: relative;
    z-index: 300;
    margin-top: 0.32rem;
    height: 9.14rem;
    overflow-y: scroll;

    .tabs {
        display: flex;
        justify-content: space-around;

        .tab {
            font-size: .4rem;

            &.active {
                color: blue;
            }
        }
    }

    .item {
        font-size: .3rem;
        padding: .2rem;
        background: white;
        margin: .2rem;
        border-radius: .2rem;
    }
}


::-webkit-scrollbar {
    display: none;
}
</style>
