<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="500"
        class="search"
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
    >
        <van-sticky>
            <div class="tabs">
                <div class="tab-item" :class="{ active: status == 'sale' }" @click="changeBuy('sale')">价值证明</div>
                <div class="tab-item" :class="{ active: status == 'buy' }" @click="changeBuy('buy')">支付记录</div>
                <div class="tab-item" :class="{ active: status == 'destory' }" @click="changeBuy('destory')">
                    销毁记录
                </div>
            </div>
        </van-sticky>
        <div class="bg" v-if="status !== 'buy'">
            <van-image width="100%" :src="require('../../assets/img11.png')" fit="scale-down" />
            <div class="total-price">
                <div class="text1">{{ title }}</div>
                <div class="text2">{{ total }}</div>
            </div>
        </div>
        <div class="tab-title">{{ getLabelName(status, statusOptions) }}记录</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" v-if="status === 'destory'">
                    <div class="text1">获得积分</div>
                    <div class="price">+{{ item.record }}</div>
                    <div class="product">
                        <van-image width="32" height="32" radius="4" :src="item.pic" fit="cover" />

                        <div class="flex1">
                            <div class="text2">{{ item.name }}</div>
                            <div class="text2">
                                <span>{{ item.createdAt }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="exchange" v-else>
                    <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_black.png')" />
        </van-list>
    </van-pull-refresh>
</template>

<script>
import { mapState } from 'vuex';
import list from '../../mixins/list';
import product from '../../mixins/product';
export default {
    name: 'Search',
    mixins: [list, product],
    data() {
        return {
            list: [],
            empty: false,
            isBuy: false,
            info: {},
            status: 'sale',
            statusOptions: [
                {
                    label: '出售',
                    value: 'sale'
                },
                {
                    label: '购买',
                    value: 'buy'
                },
                {
                    label: '销毁',
                    value: 'destory'
                }
            ]
        };
    },
    computed: {
        ...mapState(['companyId']),
        url() {
            if (this.status === 'destory') {
                return '/destroyRecord/my';
            } else {
                return '/asset/userHistory';
            }
        },
        httpType() {
            if (this.status === 'destory') {
                return 'post';
            } else {
                return 'get';
            }
        },
        total() {
            if (this.status === 'sale') {
                return this.info.sale;
            } else if (this.status === 'buy') {
                return this.info.buy;
            } else {
                return this.$store.state.userInfo.destroyPoint;
            }
        },
        title() {
            if (this.status === 'destory') {
                return '总积分';
            } else {
                return `累计${this.getLabelName(this.status, this.statusOptions)}(元)`;
            }
        }
    },
    mounted() {
        this.getMoeny();
    },
    methods: {
        getMoeny() {
            this.$http.get('/asset/breakdown').then(res => {
                this.info = res;
            });
        },
        changeBuy(status) {
            this.status = status;
            this.getData(true);
        },
        beforeData() {
            if (this.status == 'buy') {
                return {
                    query: {
                        toUserId: this.$store.state.userInfo.id,
                        companyId: this.companyId
                    }
                };
            } else if (this.status == 'sale') {
                return {
                    query: {
                        fromUserId: this.$store.state.userInfo.id,
                        companyId: this.companyId
                        // operation: '转让,转赠'
                    }
                };
            } else if (this.status == 'destory') {
                return {
                    query: {
                        fromUserId: this.$store.state.userInfo.id,
                        operation: '销毁',
                        companyId: this.companyId
                    }
                };
            }
        },
        onRefresh() {
            this.getMoeny();
            this.getData(true).then(() => {
                this.isLoading = false;
            });
        }
    }
};
</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: 12px 16px 12px;
    font-size: 14px;
    color: @text3;
    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: @text3;
    line-height: 17px;
    margin-top: 6px;
    span + span {
        margin-left: 20px;
    }
}
</style>
