<template>
    <div class="page">
        <div class="page-top">
            <div class="title">
                <div class="text1">选择头像</div>
                <div class="text2">展示的藏品需为展示/正在寄售的状态</div>
            </div>

            <div class="sub">
                <div class="text1">符合条件</div>
                <div class="text2">{{ totalElements }}个</div>
            </div>
        </div>

        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <van-empty v-if="empty" description="你还没有藏品哦～" :image="require('@assets/kong_black.png')" />
            <div class="list">
                <div class="box" v-for="(item, index) in list" :key="index" @click="choose(item)">
                    <div class="box-img">
                        <van-image
                            :src="getImg(changeImgs(item.pic))"
                            :width="80"
                            :height="80"
                            fit="coevr"
                            radius="8"
                        />
                    </div>
                </div>
            </div>
        </van-list>

        <div class="btns">
            <van-button color="#939599" @click="$router.back()" plain round>取消</van-button>
        </div>
    </div>
</template>

<script>
import list from '../../mixins/list';
import product from '../../mixins/product';
export default {
    data() {
        return {
            info: {},
            url: '/collection/all',
            list: [],
            chooseIds: [],
            maxCollection: 20
        };
    },
    mixins: [list, product],
    computed: {
        chooseList() {
            let list = [...this.list];
            let chooseIds = [...this.chooseIds];
            return chooseIds
                .map(item => {
                    return (
                        list.find(child => {
                            return child.id === item;
                        }) || item
                    );
                })
                .filter(item => {
                    return !!item.pic;
                })
                .map(item => {
                    return {
                        ...item,
                        pic: this.getImg(this.changeImgs(item.pic))
                    };
                });
        }
    },
    mounted() {
        if (this.$route.query.ids) {
            this.chooseIds = this.$route.query.ids.split(',');
        }
        if (this.$route.query.maxCollection) {
            this.maxCollection = Number(this.$route.query.maxCollection);
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    ownerId: this.$store.state.userInfo.id
                },
                size: 99
            };
        },
        sure() {
            if (this.chooseIds.length > 0) {
                this.emitter.emit('setAssets', this.chooseList);
                this.$router.back();
            } else {
                this.$toast('请选择藏品');
            }
        },
        choose(info) {
            this.emitter.emit('setPic', this.getImg(this.changeImgs(info.pic)));
            this.$router.back();
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    background-color: #1c1c1c;
}

.page-top {
    background-color: #222426;
    padding: 10px 16px 12px;
    .flex();
    align-items: flex-end;
    .title {
        flex-grow: 1;
        .text1 {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            font-size: 12px;
            color: @text3;
            line-height: 22px;
        }
    }

    .sub {
        .flex();
        .text1 {
            font-size: 12px;
            color: @text3;
            line-height: 22px;
        }

        .text2 {
            font-size: 12px;
            color: #ffffff;
            line-height: 17px;
            background: #f5f7fa22;
            border-radius: 10px;
            padding: 0 18px;
            margin-left: 3px;
        }
    }
}

.list {
    .flex();
    flex-wrap: wrap;
    padding-bottom: 80px;
    .box {
        padding: 10px 16px;
        width: 33%;
        box-sizing: border-box;
        position: relative;

        .choose-img {
            width: 24px;
            height: 24px;
            position: absolute;
            right: 0px;
            top: 0px;
            z-index: 2;
        }

        .box-img {
            position: relative;
            width: 80px;
            height: 80px;
            margin: auto;
        }

        &.active {
            .box-img {
                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 1;
                    background-color: rgba(0, 0, 0, 0.3);
                }
            }
        }

        .num {
            font-size: 12px;
            font-weight: bold;
            color: #ffffff;
            line-height: 17px;
            position: absolute;
            left: 5px;
            top: 0px;
            z-index: 2;
        }
    }
}

.btns {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    .flex();
    padding: 9px 16px;
    background-color: #222426;
    z-index: 20;
    .bottom(9px);
    .van-button {
        flex-grow: 1;
        box-sizing: border-box;
    }
    .van-button + .van-button {
        margin-left: 20px;
    }
}
</style>
