<template>
    <div class="home">
        <van-sticky :offset-top="barHeight">
            <van-tabs v-model:active="sort" line-width="32" line-height="2" @click-tab="changeTab">
                <van-tab :title="item.label" :name="item.value" :key="index" v-for="(item, index) in selectOptions">
                </van-tab>
            </van-tabs>
            <!-- <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 class="list" v-model:loading="loading" :finished="finished" :finished-text="empty ? '' : '- 更多藏品敬请期待 -'" @load="getData">
            <template v-for="(item, index) in list" :key="index">
                <div class="exchange">
                    <div class="exchange_top">
                        <div class="exchange_top_con">
                            <van-image
                                width="90"
                                height="90"
                                radius="12"
                                :src="getImg(changeImgs(item.pic))"
                                fit="cover"
                            />
                            <div class="exchange_top_con_content">
                                <div class="exchange_top_con_content_assetName">{{ item.assetName }}</div>
                                <!-- <div class="exchange_top_con_content_stock">
                                    <div class="exchange_top_con_content_stock_one">库存</div>
                                    <div class="exchange_top_con_content_stock_two">100/300份</div>
                                </div> -->
                                <div class="exchange_top_con_content_price">
                                    ¥&nbsp;<span>{{ item.price || 0 }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="exchange_top_text1">{{ item.description }}</div>
                    </div>
                    <div class="product">
                        <div class="product_con">
                            <div class="product_con_one">成交时间</div>
                            <div class="product_con_two">{{ item.createdAt }}</div>
                        </div>
                        <div class="product_con">
                            <div class="product_con_one">订单编号</div>
                            <div class="product_con_two">{{ item.id }}</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/collection-record@3x.png')"
                class="empty_one"
            >
                <div class="empty_two">这里将展示你在传奇数藏的数字藏品流转记录</div>
            </van-empty>
        </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','barHeight'],
    data() {
        return {
            list: [],
            empty: false,
            url: '/asset/userHistory',
            httpType: 'get',
            isBuy: false,
            info: {},
            showAction: false,
            salable: 'whole',
            operation: '',
            selectOptions: [
                {
                    label: '全部',
                    value: 'whole'
                },
                // {
                //     label: '待付款',
                //     value: 'pendingPayment'
                // },
                {
                    label: '已购买',
                    value: 'paid'
                },
                // {
                //     label: '已出售',
                //     value: 'cancelled'
                // },
                {
                    label: '已赠送',
                    value: 'give'
                }
            ]
        };
    },
    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);
        },
        changeTab(e) {
            this.salable = e.name;
            this.getData(true);
        },
        beforeData() {
            if (this.salable === 'whole') {
                return;
            } else if (this.salable == 'paid') {
                return {
                    query: {
                        toUserId: this.$store.state.userInfo.id
                    }
                };
            } else if (this.salable == 'cancelled') {
                return {
                    query: {
                        fromUserId: this.$store.state.userInfo.id
                    }
                };
            } else if (this.salable == 'give') {
                return {
                    query: {
                        fromUserId: this.$store.state.userInfo.id
                    }
                };
            }
            // 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: #201B15;
    .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: 15px;
        box-sizing: border-box;
        background: #201B15;
        .exchange {
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            background: #2F2519;
            margin-bottom: 10px;
            .exchange_top {
                display: flex;
                justify-content: space-between;
                padding-bottom: 10px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                .exchange_top_con {
                    display: flex;
                    .exchange_top_con_content {
                        margin-left: 12px;
                        padding-top: 18px;
                        .exchange_top_con_content_assetName {
                            width: calc(50vw - 35px);
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #ffffff;
                            line-height: 20px;
                            margin-bottom: 8px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .exchange_top_con_content_stock {
                            display: flex;
                            font-size: 11px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            margin-bottom: 8px;
                            .exchange_top_con_content_stock_one {
                                width: 34px;
                                height: 16px;
                                background: #f9ddb3;
                                border-radius: 3px 0px 0px 3px;
                                color: #282d3a;
                                line-height: 16px;
                                text-align: center;
                            }
                            .exchange_top_con_content_stock_two {
                                height: 16px;
                                background: #323743;
                                border-radius: 0px 3px 3px 0px;
                                color: #f9ddb3;
                                line-height: 16px;
                                padding: 0 6px;
                                box-sizing: border-box;
                            }
                        }
                        .exchange_top_con_content_price {
                            font-size: 16px;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: #ffffff;
                            line-height: 24px;
                        }
                    }
                }
                .exchange_top_text1 {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 20px;
                    margin-top: 8px;
                    opacity: 0.3;
                }
            }
            .product {
                .product_con {
                    margin-top: 14px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    line-height: 20px;
                }
                .product_con_one {
                    color: #ffffff;
                    opacity: 0.3;
                }
                .product_con_two {
                    color: #ffffff;
                }
            }
            .text3 {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
                line-height: 17px;
            }
        }
    }
}
/deep/.van-list__finished-text{
    font-size: 12px;
}
/deep/ .van-tabs__wrap {
    height: 36px;
    .van-tabs__nav--line {
        padding: 0  34px !important;
        border-top: none;
        background: #201B15;
        justify-content: space-between;
    }
    .van-tab {
        flex: 0 !important;
        margin-right: 0px !important;
        padding: 0px !important;
    }
    .van-tabs__line {
        bottom: 0;
        background: #d8d8d8;
    }
    .van-tab--active {
        font-size: 17px;
        font-weight: 500;
        color: #ffffff !important;
    }
    .van-tab--line {
        font-size: 17px;
        color: rgba(255, 255, 255, 0.5);
    }
}
/deep/ .van-empty {
    padding-top: 83px;
}
.list{
    margin-bottom: 80px;
}
.empty_two {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.3;
}
// .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>
