<template>
    <div class="home">
        <van-sticky :offset-top="46">
            <div class="transaction_record">
                <div class="transaction_record_one">交易记录</div>
                <div class="transaction_record_two"  @click="changeSort">
                    <div class="transaction_record_two_con">{{ salable === '' ? '全部状态' : salable === 'purchase' ? '买入' : salable === 'sellOut' ? '卖出' : '赠送'}}</div>
                    <img
                        :src="require('@assets/icon_shaixuan_sanjiao@3x.png')"
                        alt=""
                        class="transaction_record_two_img"
                    />
                </div>
            </div>
            <van-action-sheet
            v-model:show="showAction"
            @select="selectAction"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
        />
        </van-sticky>
        <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="exchange_top">
                        <div class="text1">{{ item.description }}</div>
                        <div :class="isLogin && item.toUserId == $store.state.userInfo.id ? 'priceone' : 'pricetwo'">
                            {{ isLogin && item.toUserId == $store.state.userInfo.id ? '-' : '+' }}{{ item.price || 0 }}
                        </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">{{ item.assetName }}</div>
                            <div class="text2">
                                <span>{{ item.createdAt }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="text3">
                        <span>来源：{{ item.fromUser }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>去向 ：{{ item.toUser }}</span>
                    </div>
                </div>
            </template>
            <van-empty v-if="empty" description="暂无交易历史哦~" :image="require('@assets/storage_room_icon_01.png')" />
        </van-list>
    </div>
    <!-- <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>
    </div> -->
</template>

<script>
import list from '../../mixins/list';
import product from '../../mixins/product';
export default {
    name: 'Search',
    mixins: [list, product],
    inject: ['bar'],
    data() {
        return {
            list: [],
            empty: false,
            url: '/asset/userHistory',
            httpType: 'get',
            isBuy: false,
            info: {},
            showAction: false,
            salable: '',
            operation: ''
        };
    },
    computed: {
        actions() {
            let list = [{ name: '全部状态' }, { name: '买入' }, { name: '卖出' }, { name: '赠送' }];
            if (this.salable === '') {
                list[0].color = this.$colors.prim;
            }
            if (this.salable === 'purchase') {
                list[1].color = this.$colors.prim;
            }
            if (this.salable === 'sellOut') {
                list[2].color = this.$colors.prim;
            }
            if (this.salable === 'give') {
                list[3].color = this.$colors.prim;
            }
            return list;
        }
    },
    mounted() {
        this.$http.get('/asset/breakdown').then(res => {
            this.info = res;
        });
        this.changeBuy();
    },
    methods: {
        changeSort() {
            this.showAction = true;
        },
        selectAction(action) {
             if (action.name == '全部状态') {
                this.salable = '';
            }
            if (action.name == '买入') {
                this.salable = 'purchase';
                this.operation = '买入'
            }
            if (action.name == '卖出') {
                this.salable = 'sellOut';
                this.operation = '卖出'
            }
            if (action.name == '赠送') {
                this.salable = 'give';
                this.operation = '赠送'
            }
            this.getData(true);
        },
        changeBuy() {
            this.getData(true);
        },
        beforeData() {
            if(this.salable === ''){
                return {
                    // query: {
                    //     toUserId: this.$store.state.userInfo.id  
                    // }
                };
            }else if(this.salable == 'purchase'){
                return {
                    query: {
                        toUserId: this.$store.state.userInfo.id,
                        operation: this.operation
                    }
                };
            }else if(this.salable == 'sellOut'){
                return {
                    query: {
                        fromUserId: this.$store.state.userInfo.id,
                        operation: this.operation
                    }
                };
            }else if(this.salable == 'give'){
                return {
                    query: {
                        // fromUserId: this.$store.state.userInfo.id,
                        operation: this.operation
                    }
                };
            }
            // 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>
.home {
    background: #15152d;
    .transaction_record {
        height: 56px;
        padding: 12px 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        background: #15152d;
        .transaction_record_one {
            padding-top: 2px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 24px;
        }
        .transaction_record_two {
            width: 100px; 
            height: 32px;
            background: #29293f;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            padding: 6px 4px 6px 16px;
            box-sizing: border-box;
            line-height: 20px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            .transaction_record_two_con{
                width: 52px;
                text-align: center;
            }
            .transaction_record_two_img {
                width: 20px;
                height: 20px;
            }
        }
    }
    /deep/ .van-list {
        width: 100%;
        padding: 0px 16px;
        box-sizing: border-box;
        .exchange {
            width: 100%;
            padding: 8px 0px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(95, 100, 111, 0.2);
            .exchange_top {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
                .priceone {
                    font-size: 16px;
                    font-weight: 500;
                }
                .pricetwo {
                    font-size: 16px;
                    font-weight: 500;
                    color: #ffcb2f;
                }
            }
            .product {
                margin-top: 2px;
                margin-bottom: 6px;
                display: flex;
                .flex1 {
                    margin-left: 6px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #939599;
                    .text2 {
                        width: 292px;
                        line-height: 17px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .text3 {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
                line-height: 17px;
            }
        }
    }
}
// .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>
