<template>
    <div class="search">
        <van-sticky>
            <div class="tabs">
                <div class="tab-item" :class="{ active: !isBuy }" @click="changeBuy(false)">价值证明</div>
                <div class="tab-item" :class="{ active: isBuy }" @click="changeBuy(true)">支付记录</div>
            </div>
        </van-sticky>
        <div class="bg" v-if="!isBuy">
            <van-image width="100%" :src="require('../../assets/img11.png')" fit="scale-down" />
            <div class="total-price">
                <div class="text1">{{ isBuy ? '累计购入' : '累计售出' }}(元)</div>
                <div class="text2">{{ isBuy ? info.buy : info.sale }}</div>
            </div>
        </div>
        <div class="tab-title" v-if="!isBuy">{{ isBuy ? '购买' : '出售' }}记录</div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <template v-for="(item, index) in list" :key="index">
                <div class="exchange">
                    <div class="text1">{{ item.description }}</div>
                    <div class="price">
                        {{ isLogin && item.toUserId == $store.state.userInfo.id ? '-' : '+' }}{{ item.price || 0 }}
                    </div>
                    <div class="product">
                        <van-image width="32" height="32" radius="4" :src="getImg(changeImgs(item.pic))" fit="cover" />

                        <div class="flex1">
                            <div class="text2">{{ item.assetName }}</div>
                            <div class="text2">
                                <span>{{ item.createdAt }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="text3">
                        <span>来源：{{ item.fromUser }}</span> <span>去向 ：{{ item.toUser }}</span>
                    </div>
                </div>
            </template>

            <van-empty v-if="empty" description="暂无交易历史哦~" :image="require('@assets/kong_png_wusousuo.png')" />
        </van-list>
    </div>
</template>

<script>
import list from '../../mixins/list';
import product from '../../mixins/product';
export default {
    name: 'Search',
    mixins: [list, product],
    data() {
        return {
            list: [],
            empty: false,
            url: '/asset/userHistory',
            httpType: 'get',
            isBuy: false,
            info: {}
        };
    },
    mounted() {
        this.$http.get('/asset/breakdown').then(res => {
            this.info = res;
        });
    },
    methods: {
        changeBuy(isBuy) {
            this.isBuy = isBuy;
            this.getData(true);
        },
        beforeData() {
            if (this.isBuy) {
                return {
                    query: {
                        toUserId: this.$store.state.userInfo.id
                    }
                };
            } else {
                return {
                    query: {
                        fromUserId: this.$store.state.userInfo.id
                    }
                };
            }
        }
    }
};
</script>

<style lang="less" scoped>
.exchange {
    padding: 14px 16px 15px;
    position: relative;
    .text1 {
        font-size: 14px;
        color: @text0;
        line-height: 20px;
    }

    .van-ellipsis {
        margin-bottom: 2px;
    }
    border-top: 1px solid #f2f4f5;

    .top {
        .flex();
        justify-content: space-between;
        overflow: hidden;
    }
    .text2 {
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        font-size: 12px;
        color: #969799;
        line-height: 17px;
    }
    .product {
        .van-image {
            flex-shrink: 0;
        }
        .flex();
        overflow: hidden;
        margin-top: 5px;
        .flex1 {
            min-width: 0;
            overflow: hidden;
            margin: 0 16px 0 5px;
        }
    }

    .price {
        font-size: 16px;
        font-weight: bold;
        color: #d3b374;
        line-height: 24px;
        position: absolute;
        right: 16px;
        top: 10px;
    }
}
.tabs {
    .flex();
    .tab-item {
        line-height: 50px;
        flex-grow: 1;
        background: #d3b374;
        font-size: 14px;
        color: #f5f7fa;
        text-align: center;
        position: relative;

        &.active {
            color: #fff;
            font-weight: bold;
            &::after {
                content: '';
                width: 16px;
                height: 2px;
                background: #ffffff;
                border-radius: 2px;
                position: absolute;
                left: 50%;
                bottom: 8px;
                transform: translateX(-50%);
            }
        }
    }
}
.tab-title {
    padding: 0 16px 12px;
    font-size: 14px;
    color: #939599;
    line-height: 24px;
}
.bg {
    background-color: #d3b374;
    padding-top: 10px;
    .van-image {
        display: block;
    }
    position: relative;
    .total-price {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        .text1 {
            font-size: 12px;
            color: #ffffff;
            line-height: 17px;
            text-align: center;
        }
        .text2 {
            font-size: 32px;
            font-family: OSP-DIN, OSP;
            color: #ffffff;
            line-height: 32px;
            margin-top: 5px;
            text-align: center;
        }
    }
}

.text3 {
    font-size: 12px;
    color: #939599;
    line-height: 17px;
    margin-top: 6px;
    span + span {
        margin-left: 20px;
    }
}
</style>
