<template>
    <div class="choose">
        <van-sticky>
            <div class="top">
                <div class="title">选择兑换藏品</div>
                <div class="sub">
                    <div v-if="needChoose">
                        请选择<span class="prim">{{ needChoose }}款{{ search }}藏品</span>进行铸造
                    </div>
                    <div v-else>
                        请选择<span class="prim">{{ search }}藏品</span>进行铸造
                    </div>
                    <div class="sub-right">
                        符合条件藏品 <span class="total">{{ list.length }}个</span>
                    </div>
                </div>
            </div>
        </van-sticky>
        <van-pull-refresh
            success-text="刷新成功"
            success-duration="500"
            class="discover"
            v-model="refreshing"
            @refresh="onRefresh"
        >
            <van-empty v-if="empty" description="没有符合兑换的藏品哦~" :image="require('@assets/kong.png')" />

            <div class="list">
                <div
                    class="product"
                    :class="{ active: chooseIds.includes(item.id) }"
                    v-for="item in list"
                    :key="item.id"
                    @click="choose(item.id)"
                >
                    <img
                        class="icon"
                        :src="
                            chooseIds.includes(item.id)
                                ? require('../../assets/icon_gouxuan_pre.png')
                                : require('../../assets/icon_gouxuan_huise.png')
                        "
                        alt=""
                    />
                    <div class="product-content">
                        <van-image
                            width="60"
                            height="60"
                            radius="6"
                            :src="getImg(changeImgs(item.pic, 600))"
                            fit="contain"
                        />
                        <div class="product-info">
                            <div class="text1 van-ellipsis">{{ item.name }}</div>
                            <div class="flex1"></div>
                            <div class="text2" v-if="item.category">{{ item.category }}</div>
                            <div class="text2" v-if="item.number">编号：{{ item.number }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-pull-refresh>

        <div class="tips" v-if="showTips">当前可兑换藏品不足</div>

        <div class="action-btn">
            <!-- <van-button round color="@text3" plain>取消</van-button> -->
            <van-button type="primary" round @click="goHome" v-if="empty || showTips">去购买</van-button>
            <van-button type="primary" @click="submit" v-else :disabled="!canNext" round>确认</van-button>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import product from '../../mixins/product';
export default {
    mixins: [product],
    data() {
        return {
            empty: false,
            list: [],
            chooseIds: [],
            needChoose: 3,
            search: '',
            activityId: 0,
            info: {},
            refreshing: false
        };
    },
    computed: {
        ...mapState(['companyId']),
        canNext() {
            return this.needChoose === 0 || this.chooseIds.length === this.needChoose;
        },
        showTips() {
            return this.list.length < this.needChoose && !this.empty;
        }
    },
    mounted() {
        if (this.$route.query.name) {
            this.search = this.$route.query.name;
        }
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true
        });

        if (this.$route.query.activityId) {
            this.activityId = this.$route.query.activityId;
            this.$http.get('/mintActivity/get/' + this.$route.query.activityId).then(res => {
                this.needChoose = res.num;
                this.search = res.collectionName;
                this.info = res;
                this.getList();
            });
        } else {
            this.getList();
        }
    },
    methods: {
        getList(refresh, done) {
            this.$http
                .get('/asset/assetsForMint', {
                    page: 0,
                    size: 9999,
                    mintActivityId: this.activityId,
                    refresh,
                    companyId: this.companyId
                })
                .then(res => {
                    this.list = res.content;
                    this.empty = res.empty;
                    done && done();
                })
                .then(() => {
                    this.$toast.clear();
                    done && done();
                });
        },
        choose(id) {
            let chooseIds = [...this.chooseIds];
            if (chooseIds.includes(id)) {
                let index = chooseIds.indexOf(id);
                chooseIds.splice(index, 1);
            } else if (this.chooseIds.length < this.needChoose || this.needChoose === 0) {
                chooseIds.push(id);
            } else if (this.chooseIds.length == this.needChoose) {
                this.$toast(`只能选择${this.needChoose}个藏品`);
            }

            this.chooseIds = chooseIds;
        },
        submitSuc() {
            this.$dialog
                .alert({
                    title: '兑换成功',
                    message: '兑换的藏品将在1～3个工作日内空投到您的藏品室中,敬请期待哦～'
                })
                .then(() => {
                    this.$router.replace('/' + this.$route.params.companyId + '/home');
                });
        },
        goHome() {
            this.$router.push('/' + this.$route.params.companyId + '/home');
        },
        checkTips() {
            if (this.info.consume) {
                return this.$dialog.confirm({
                    title: '提示',
                    message: `兑换后选择的藏品将被销毁，确认将选择的藏品进行兑换吗？`,
                    allowHtml: true
                });
            } else {
                return Promise.resolve();
            }
        },
        submit() {
            this.checkTips().then(() => {
                this.$router.push({
                    path: '/' + this.$route.params.companyId + '/activitySubmit',
                    query: {
                        assets: this.chooseIds.join(','),
                        activityId: this.activityId
                    }
                });
            });
        },
        onRefresh() {
            this.refreshing = true;
            this.getList(true, () => {
                this.refreshing = false;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.choose {
    position: relative;
    background-color: @bg3;
    padding-bottom: 100px;
}

.top {
    padding: 10px 16px;
    background-color: @bg;
    .title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
    }

    .sub {
        font-size: 12px;
        color: @text3;
        line-height: 22px;
        .flex();
        justify-content: space-between;
        flex-wrap: wrap;

        .sub-right {
            flex-shrink: 0;
        }

        .prim {
            color: #ff4f50;
        }

        .total {
            display: inline-block;
            min-width: 60px;
            height: 20px;
            background: @bg3;
            border-radius: 10px;
            text-align: center;
            font-size: 12px;
            color: @text3;
            line-height: 17px;
            margin-top: 4px;
        }
    }
}

.product {
    margin: 10px 10px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    .flex();
    .icon {
        width: 24px;
        height: 24px;
    }
    .product-content {
        margin-left: 10px;
        flex-grow: 1;
        overflow: hidden;
        .flex();
        align-items: stretch;
        .van-image {
            flex-shrink: 0;
        }
        .product-info {
            .flex-col();
            margin-left: 12px;
            overflow: hidden;

            .text1 {
                font-size: 12px;
                color: #000000;
                line-height: 24px;
            }

            .text2 {
                font-size: 12px;
                color: @text3;
                line-height: 17px;
            }
        }
    }
}

.action-btn {
    position: fixed;
    z-index: 20;
    background: #fff;
    padding: 9px 48px;
    .flex();
    left: 0;
    right: 0;
    bottom: 0;
    .bottom(9px);

    /deep/.van-button {
        flex-grow: 1;
        // &.van-button--disabled {
        //     background: #303133;
        //     color: @text3;
        //     opacity: 1;
        // }
    }
    .van-button + .van-button {
        margin-left: 20px;
    }
}
.tips {
    text-align: center;
    color: #ff4f50;
    font-size: 12px;
    padding: 10px;
}
</style>
