<template>
    <div class="search">
        <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="top">
                        <div class="text1">{{ item.description }}</div>
                        <div class="text2">{{ item.createdAt }}</div>
                    </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 van-ellipsis">{{ item.assetName }}</div>
                            <div class="text2">
                                <span>来源：{{ item.fromUser }}</span> <span>去向 ：{{ item.toUser }}</span>
                            </div>
                        </div>
                    </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'
        };
    },
    methods: {
        beforeData() {
            return {
                projectId: this.$store.state.projectId
            };
        }
    }
};
</script>

<style lang="less" scoped>
.exchange {
    padding: 14px 16px 15px;
    .text1 {
        font-size: 14px;
        color: @text0;
        line-height: 20px;
    }
    .text2 {
        font-size: 12px;
        color: #969799;
        line-height: 17px;
        .flex();

        span + span {
            margin-left: 20px;
        }
    }

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

    .top {
        .flex();
        justify-content: space-between;
    }
    .product {
        .flex();
        margin-top: 5px;
        .flex1 {
            overflow: hidden;
            margin-left: 6px;
        }
    }
}
</style>
