<template>
    <pb-layout
        navbar="inner"
        iconColor="#fff"
        class="share-point-wrap"
        leftIcon="leftIcon"
        color="#fff"
        title="分发积分"
        right="历史积分"
        :bgStyle="bgStyle"
    >
        <view class="title ss-m-t-80">
            <view class="main">分发积分</view>
            <view class="sub ss-flex ss-row-center ss-m-t-55"
                ><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
                    style="color: #f3d3bf"
                    class="cicon-safe"
                ></text
            ></view>
        </view>

        <view class="user-search">
            <view class="search">
                <uni-easyinput
                    v-model="state.inputData"
                    :styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
                    placeholderStyle="color: #E7B493;"
                    @input="inputUserFunc"
                    :clearable="false"
                    :inputBorder="false"
                    trim="all"
                    suffixIcon="search"
                    placeholder="请输入用户名/手机号"
                />
            </view>
            <view class="result" :style="{ height: resultHeight, overflow: 'auto' }">
                <view v-for="item in state.userList" class="user ss-flex ss-row-between ss-col-center">
                    <view class="user-info ss-flex ss-col-center ss-gap-20">
                        <image
                            style="width: 48rpx; height: 48rpx; border-radius: 50%"
                            :src="item.avatar ? item.avatar : '/static/default_avatar.png'"
                        />
                        <view class="nickname">{{ item.nickname }}</view>
                    </view>
                    <view class="input-point">
                        <uni-easyinput
                            :styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
                            :placeholderStyle="placeholderStyle"
                            v-model="item.point"
                            :clearable="false"
                            :inputBorder="false"
                            @input="inputPointFunc(item)"
                            type="number"
                            trim="all"
                            placeholder="请输入积分额度"
                        />
                    </view>
                </view>
            </view>
        </view>

        <view class="ss-p-x-30 bottom">
            <button class="ss-reset-button share-btn" @tap="confirmShare">确定</button>
        </view>
    </pb-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import PointApi from '@/peach/api/pay/point'
import UserUtil from '@/peach/api/member/user'
import peach from '@/peach'

const placeholderStyle = ref('color: #E7B493')

const resultHeight = computed(() => {
    return `calc(100vh - 728rpx)`
})

const state = ref({
    inputData: '',
    userList: [],
    isShaking: false,
    agreeStatus: false,
    userParams: {
        mobile: '',
        nickname: '',
        pageNo: 1,
        pageSize: 10,
    },
    pointParams: {
        memberId: '',
        point: '',
    },
})

const bgStyle = {
    backgroundImage: '/static/point.png',
    imageType: 'local',
    backgroundColor: '#fff',
    description: '',
    height: '100%',
}

let timer
function inputUserFunc() {
    clearTimeout(timer)
    timer = setTimeout(() => {
        getUserList()
    }, 1000)
}

async function confirmShare() {
    let user = state.value.userList.find((item) => item.point)

    if (!user) {
        peach.$helper.toast('请输入要赠送的积分')
        return
    }

    state.value.pointParams.memberId = user.id
    state.value.pointParams.point = user.point

    await PointApi.sendPoint(state.value.pointParams)

    state.value.inputData = ''
    state.value.userList = []
    state.value.pointParams = {
        memberId: '',
        point: '',
    }
}

function inputPointFunc(data) {
    state.value.userList.forEach((item) => {
        console.log(data.id !== item.id)
        if (data.id !== item.id) {
            item.point = ''
        }
    })

    // state.value.pointParams.memberId = data.id
    // state.value.pointParams.point = data.point
}

async function getUserList() {
    // 清空 userParams 数据
    state.value.userParams = {
        mobile: '',
        nickname: '',
        pageNo: 1,
        pageSize: 10,
    }
    // 判断 inputData 的输入类型
    // 如果 string 是纯数字
    if (/^\d+$/.test(state.value.inputData)) {
        state.value.userParams.mobile = state.value.inputData
    } else {
        state.value.userParams.nickname = state.value.inputData
    }

    let { data } = await UserUtil.getUserList(state.value.userParams)
    data.list.forEach((item) => {
        item.point = ''
    })
    state.value.userList = data.list
}
</script>

<style lang="scss" scoped>
.share-point-wrap {
    .title {
        .main {
            font-size: 80rpx;
            color: rgba(232, 181, 150, 1);
            letter-spacing: 20px;
            position: relative;
            left: 10px;
            text-align: center;
        }

        .sub {
            font-size: 32rpx;
            color: #f3d3bf;
            letter-spacing: 4px;
        }
    }

    .user-search {
        margin: 50rpx 40rpx 0;

        .search {
            border: 1px solid #e7b493;
            border-radius: 30px;
        }

        :deep(.uniui-search) {
            color: #e7b493 !important;
            padding-right: 10px;
        }

        :deep(.uni-easyinput__content-input) {
            padding-left: 15px !important;
        }

        .result {
            .user {
                margin-top: 20px;
                border: 1px solid #e7b493;
                border-radius: 30px;
                padding: 0 40rpx;

                .user-info {
                    .nickname {
                        font-size: 26rpx;
                        color: #e7b493;
                    }
                }

                .input-point {
                    :deep(.uni-easyinput__content-input) {
                        text-align: right;
                    }
                }
            }
        }
    }

    .bottom {
        position: absolute;
        bottom: 20px;
        width: calc(100% - 60rpx);

        .share-btn {
            height: 82rpx;
            line-height: normal;
            background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
            border-radius: 28rpx;
            font-size: 26rpx;
            font-weight: 500;
        }
    }
}
</style>
