<template>
    <!-- <TopNavigation/> -->
    <div class="content">
        <van-sticky ref="top" :offset-top="barHeight">
            <div class="content_title">赠送</div>
            <div class="content_tip">通过手机号码检索用户信息，确认赠送后该加密作品将会转移</div>
            <!-- <van-search v-model="phone" placeholder="请输入用户手机号" @search="getSearch" /> -->
            <van-search
                ref="top"
                v-model="phone"
                placeholder="请输入用户手机号"
                show-action
                autofocus
                @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
                class="search_message"
                v-if="info.length != 0"
                @click="
                    $router.push(
                        '/givesubmit?id=' + this.$route.query.id + '&toUserId=' + info.id + '&phone=' + this.phone
                    )
                "
            >
                <div class="search_message_left">
                    <van-image
                        width="40px"
                        height="40px"
                        radius="65"
                        :src="getImg(info.avatar)"
                        fit="cover"
                        style="margin-right: 10px"
                    />
                    <div>
                        <div class="search_message_left_title">{{ info.realName || '保密' }}</div>
                        <div class="search_message_left_phone">手机号码&nbsp;{{ info.phone }}</div>
                    </div>
                </div>
                <div class="search_message_right">赠送</div>
                <!-- <linear-com class="search_message_right">赠送</linear-com> -->
            </div>
            <van-empty v-if="empty" :image="require(`@assets/empty-collection.png`)" :image-size="`89`">
                <div class="h44_tip_one">没有找到符合的用户</div>
                <div class="h44_tip">请核对手机号或区块链地址</div>
            </van-empty>
            <!-- <van-empty
                :image="require('@assets/kong_png_yongyoude  (1).png')"
                v-if="empty"
                description="没有任何藏品哦~"
            /> -->
        </van-list>
    </div>
</template>

<script>
import product from '../../mixins/product';
import list from '../../mixins/list';
// import LinearCom from '../../components/LinearCom.vue';
// import TopNavigation from "../../components/TopNavigation.vue"
export default {
    // components: { LinearCom },
    name: 'Search',
    inject: ['barHeight'],
    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.$router.push('/givesubmit')
            this.$http
                .post('/user/searchByPhone', {
                    phone: this.phone
                })
                .then(res => {
                    if (res.id === this.$store.state.userInfo.id) {
                        this.$toast('不能赠送给自己');
                        this.phone = '';
                    } else {
                        this.info = res;
                        if (this.info.length === 0) {
                            this.empty = true;
                        }
                    }
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-field__control {
    margin-top: 2px;
    color: #ffffff;
    font-size: 14px;
}
/deep/.van-list__finished-text{
    font-size: 12px;
}
/deep/ .van-search {
    padding: 0;
    // background: #2F2519;
    border-radius: 4px;
    width: 100%;
    height: 38px;
    .van-search__content {
        width: 100%;
        height: 38px;
        padding-left: 16px;
        background: #2F2519;
        // padding: 8px 0px 0px 16px;
        box-sizing: border-box;
        line-height: 38px;
    }
    .van-field__left-icon {
        width: 24px;
        height: 24px;
        margin-top: 3px;
        // margin-right: 10px;
    }
    .van-search__action {
        width: 60px;
        // height: 32px;
        border-radius: 4px;
        border: 1px solid #f2d5b2;;
        box-sizing: border-box;
        margin-left: 16px;
        padding: 0;
        background: #0a0a1b;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #f2d5b2;;
        text-align: center;
        line-height: 32px;
    }
}
.content {
    width: 100%;
    height: 100%;
    position: absolute;
    // margin-top: 44px;
    background: #201B15;
    padding: 12px 15px;
    box-sizing: border-box;
    .content_title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
        margin-bottom: 8px;
    }
    .content_tip {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        margin-bottom: 20px;
        opacity: 0.5;
    }
    .content_search {
        display: flex;
        justify-content: space-between;
        /deep/ .van-search__content {
            background: #29293f;
            // border-radius: 4px;
        }
    }
    .search_message {
        width: 100%;
        height: 58px;
        background: #2F2519;
        border-radius: 4px;
        margin-top: 12px;
        padding: 9px 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .search_message_left {
            display: flex;
            .search_message_left_img {
                width: 40px;
                height: 40px;
                border-radius: 65px;
                margin-right: 10px;
            }
            .search_message_left_title {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 20px;
                margin-bottom: 2px;
            }
            .search_message_left_phone {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                opacity: 0.3;
                line-height: 16px;
            }
        }
        .search_message_right {
            margin-top: 5px;
            width: 72px;
            height: 30px;
            background: #f9ddb3;
            border-radius: 4px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 400;
            color: #725837;
            text-align: center;
            line-height: 30px;
        }
    }
    .h44_tip_one {
        margin-top: 20px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
        text-align: center;
        margin-bottom: 8px;
    }
    .h44_tip{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
        opacity: 0.3;
    }
}
</style>
