<template>
    <!-- <TopNavigation/> -->
    <div class="content">
        <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
            <div class="content_title">赠送</div>
            <div class="content_tip">通过手机号码检索用户信息，确认赠送后该加密作品将会被转移</div>
            <van-search
                ref="top"
                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 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
                :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: ['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.$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{
    color: #FFFFFF;
}
/deep/ .van-search{
    padding: 0;
    background: #0A0A1B;
    width: 100%;
    height: 32px;
    .van-search__content{
        width: 100%;
        height: 32px;
        padding-left: 16px;
        // padding: 8px 0px 0px 16px;
        box-sizing: border-box;
        background: #29293F;
        border-radius: 4px;
    }
    .van-icon__image{
        margin-top: 4px;
        // margin-right: 10px;
    }
    .van-search__action{
        width: 60px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #28B6FF;
        box-sizing: border-box;
        margin-left: 16px;
        padding: 0;
        background: #0A0A1B;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #28B6FF;
        text-align: center;
        line-height: 32px;
    }
}
    .content{
        width: 100%;
        height: 100%;
        position: absolute;
        // margin-top: 44px;
        background: #0A0A1B;
        padding: 16px;
        box-sizing: border-box;
        .content_title{
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 6px;
        }
        .content_tip{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            margin-bottom: 20px;
        }
        .content_search{
            display: flex;
            justify-content: space-between;
            /deep/ .van-search__content{
                background: #29293F;
                // border-radius: 4px;
            }
        }
        .search_message{
            width: 100%;
            height: 72px;
            background: #29293F;
            border-radius: 8px;
            margin-top: 20px;
            padding: 16px 10px;
            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-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 24px;
                }
                .search_message_left_phone{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #939599;
                    line-height: 17px;
                }
            }
            .search_message_right{
                margin-top: 8px;
                width: 68px;
                height: 24px;
                background: #28B6FF;
                border-radius: 4px;
                font-size: 12px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                line-height: 24px;
            }
        }
    }
</style>
