<template>
    <div class="search">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="title">赠送</div>
            <div class="name">通过手机号码检索用户信息，<span>确认赠送后该加密作品将会被转移</span></div>
            <van-search
                ref="top"
                shape="round"
                v-model="phone"
                placeholder="请输入"
                show-action
                autofocus
                :left-icon="require('../../assets/svgs/icon-sosuo.svg')"
                @search="getSearch"
            >
                <template #action>
                    <div @click="getSearch">搜索</div>
                </template>
            </van-search>
        </van-sticky>
        <van-list class="list" :immediate-check="false" :finished="finished" finished-text="" @load="getData">
            <div
                v-if="info.length != 0"
                class="content"
                @click="$router.push('/givesubmit?id=' + this.$route.query.id + '&toUserId=' + info.id)"
            >
                <img class="img" :src="info.avatar" alt="" />
                <div class="init">
                    <div>
                        <div class="text1">{{ info.realName || '保密' }}</div>
                        <div class="text2">
                            手机号码 <span>{{ info.phone }}</span>
                        </div>
                    </div>
                    <div class="btn">赠送</div>
                </div>
            </div>
            <van-empty v-if="empty" description="没有任何藏品哦~" />
        </van-list>
    </div>
</template>

<script>
import product from '../../mixins/product';
import list from '../../mixins/list';
export default {
    name: 'Search',
    inject: ['bar'],
    mixins: [product, list],
    data() {
        return {
            info: [],
            phone: '',
            stiky: null,
            type: '',
            minterId: '',
            empty: false
        };
    },
    computed: {
        pageName() {
            return this.getLabelName(this.type, this.typeOptions);
        }
    },
    mounted() {},
    methods: {
        getSearch() {
            this.$http
                .post('/user/searchByPhone', {
                    phone: this.phone
                })
                .then(res => {
                    this.info = res;
                    if (this.info.length === 0) {
                        this.empty = true;
                    }
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.search {
    background-color: #0f0f0f;
    padding-bottom: 100px;
    .title {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
        padding-top: 5px;
        padding-left: 16px;
        background-color: #181818;
    }
    .name {
        font-size: 12px;
        font-weight: 400;
        color: @text3;
        line-height: 22px;
        padding-left: 16px;
        background-color: #181818;
    }
    span {
        color: #fdfb60;
    }
    .content {
        // padding: 0px 16px;
        display: flex;
        align-items: center;
        width: 343px;
        height: 102px;
        border-radius: 12px;
        .img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .init {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .text1 {
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                line-height: 24px;
            }
            .text2 {
                font-size: 14px;
                font-weight: 400;
                color: @text3;
                line-height: 24px;
            }
            span {
                color: #ffffff;
            }
            .btn {
                width: 70px;
                height: 26px;
                border-radius: 16px;
                border: 1px solid;
                // border-image: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1)) 1 1;
                line-height: 26px;
                font-size: 14px;
                color: #fdfb60;
                text-align: center;
            }
        }
    }
}
.top {
    background-color: #181818;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    .name {
        font-size: 20px;
        // font-weight: bold;
        color: @prim;
        line-height: 30px;
    }
}
/deep/.van-tabs {
    .van-tabs__nav {
        padding-left: 16px;
    }
}
.list {
    padding: 8px 8px 100px;
}
// /deep/.van-tab {
// flex-grow: 0;
// padding: 0 0 0 0;
// margin-right: 50px;

.tab {
    position: relative;
    padding-right: 14px;
    .van-icon {
        position: absolute;
        right: 0;

        &.van-icon-arrow-down {
            top: 8px;
        }

        &.van-icon-arrow-up {
            bottom: 8px;
        }
    }
}
/deep/.van-tab--active {
    .tab {
        .van-icon-arrow-up {
            color: #646566;
        }
    }
    &.asc {
        .tab {
            .van-icon-arrow-up {
                color: @prim;
            }
            .van-icon-arrow-down {
                color: #646566;
            }
        }
    }
}
/deep/.van-search {
    .van-field__left-icon {
        display: flex;
        align-items: center;
    }
    .van-icon {
        display: flex;
        align-items: center;
    }
}
</style>
