<template>
    <div class="sale-box" v-if="totalElements > 0">
        <div class="sale-info">
            <div class="text1">当前寄售最低价格</div>
            <div class="text2">
                <van-icon class-prefix="font_family" name="icon-icon_jiage" />
                <span>{{ showInfo.price }}</span>
            </div>
        </div>
        <div class="sale-info">
            <div class="text1">当前寄售</div>
            <div class="text2">{{ totalElements }}份</div>
        </div>
    </div>
    <van-action-sheet teleport="#app" ref="action" v-model:show="show" :title="`当前寄售(${totalElements}份)`">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
            <div @click="goDetail(item)" class="product-info" v-for="(item, index) in list" :key="index">
                <div class="top">
                    <div class="user">
                        <van-image width="24" height="24" radius="24" :src="item.ownerAvatar" fit="cover" />
                        <span>{{ item.owner }}</span>
                        <span class="status out" v-if="item.inPaying">支付中</span>
                        <span class="status prim" v-else>寄售</span>
                    </div>
                    <div class="price">¥{{ item.price }}</div>
                </div>
                <div class="bottom">
                    <div class="name">{{ item.name }}</div>
                    <div class="num" v-if="getNum(item)">#{{ getNum(item) }}</div>
                    <div class="buy" v-if="!item.soldOut">
                        <span>去购买</span>

                        <img src="../../assets/icon-jiantou2.png" alt="" />
                    </div>
                </div>
            </div>
        </van-list>
    </van-action-sheet>
</template>

<script>
import list from '../../mixins/list';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        blindBoxItems: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            url: '/collection/all',
            list: [],
            totalElements: 0,
            show: false
        };
    },
    mixins: [list],
    computed: {
        showInfo() {
            if (!this.empty && !this.loading) {
                return {
                    ...this.list[0]
                };
            } else {
                return {
                    price: 0
                };
            }
        },
        search() {
            if (this.info.prefixName) {
                return this.info.prefixName;
            }
            if (this.info.type === 'BLIND_BOX') {
                let name = this.blindBoxItems.length > 0 ? this.blindBoxItems[0].name.split('#')[0] : '';
                name = name.replace(/：/, '·');
                name = name.replace(/:/, '·');
                return name.split('·')[0];
            }
            return this.info.name;
        }
    },
    methods: {
        goDetail(info) {
            if (!info.soldOut) {
                this.$router.push({
                    path: '/' + this.$route.params.companyId + '/productDetail/' + info.id
                });
            }
        },
        beforeData() {
            return {
                query: {
                    source: 'TRANSFER',
                    salable: true
                },
                search: this.search,
                sort: 'price,asc'
            };
        },
        init() {
            this.show = true;
        },
        getNum(info) {
            if (info.number) {
                return info.number;
            } else if (info.name) {
                let number = info.name.split('#')[1];
                return number;
            } else {
                return '';
            }
        },
        getData(isFirst = false, scrollTop = 0) {
            if (isFirst) {
                this.page = 0;
                this.list = [];
                this.$root.$el.scrollTop = scrollTop;
            }

            this.loading = true;
            this.finished = false;
            this.empty = false;
            let data = { page: this.page, size: 20, sort: 'createdAt,desc' };
            if (this.beforeData) {
                data = {
                    ...data,
                    ...this.beforeData()
                };
            }

            if (this.httpType === 'get') {
                return this.$http.get(this.url, data, { body: 'json' }).then(res => {
                    if (res.first) {
                        this.list = [];
                    }
                    this.list = [...this.list, ...res.content];
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!this.finished) {
                        this.page = this.page + 1;
                    }
                    this.totalElements = Number(res.totalElements);
                    return Promise.resolve(Number(res.totalElements));
                });
            } else {
                return this.$http.post(this.url, data, { body: 'json' }).then(res => {
                    if (res.first) {
                        this.list = [];
                    }
                    this.list = [...this.list, ...res.content];
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!this.finished) {
                        this.page = this.page + 1;
                    }
                    this.totalElements = Number(res.totalElements);
                    return Promise.resolve(Number(res.totalElements));
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
@text0: #fff;
@prim: #43ce00;
.sale-box {
    color: @text0;

    .flex();
    justify-content: space-between;
    padding: 12px 16px 10px;
    background: #1c1c1c;
    border-radius: 12px;
    margin: 12px 0 0;
    .sale-info {
        .flex-col();
        .text1 {
            font-size: 12px;
            color: @text0;
            line-height: 24px;
        }

        .text2 {
            font-size: 20px;
            font-weight: bold;
            color: var(--prim);
            line-height: 28px;
            .flex();
            align-items: flex-end;
            .font_family {
                margin-bottom: 7px;
                margin-right: 1px;
            }
            img {
                width: 8px;
                height: 8px;
                margin-bottom: 7px;
                margin-right: 1px;
            }
        }

        &:nth-child(2) {
            align-items: flex-end;
        }
    }
}

/deep/.van-overlay {
    width: 100vw;
    height: 100vh;
}

.product-info {
    background: #f5f7fa;
    border-radius: 12px;
    margin: 12px 12px;
    padding: 12px;
    display: block;

    .top {
        .flex();
        justify-content: space-between;

        .user {
            .flex();
            span {
                font-size: 12px;
                color: #939599;
                line-height: 24px;
                margin-left: 6px;
            }

            .status {
                display: inline-block;
                min-width: 44px;
                height: 20px;
                border-radius: 4px;
                border: 1px solid #c8c9cc;
                text-align: center;
                line-height: 20px;
                margin-left: 10px;
                // &.prim {
                //     color: @prim;
                //     border-color: @prim;
                // }
                &.out {
                    background-color: #c8c9cc;
                    color: #fff;
                }
            }
        }

        .price {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
        }
    }

    .bottom {
        .flex();

        font-size: 14px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        margin-top: 8px;

        .name {
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .num {
            flex-grow: 1;
        }

        .buy {
            font-size: 12px;
            .flex();
            img {
                width: 18px;
                height: 18px;
                margin-left: 1px;
            }
        }
    }
}
</style>
