<template>
  <pb-layout navbar="inner" iconColor="#fff" class="share-point-wrap" leftIcon="leftIcon" color="#fff" title="分发积分"
    :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 :styles="{ backgroundColor: 'transparent', color: '#E7B493' }" placeholderStyle="color: #E7B493;"
          :clearable="false" :inputBorder="false" type="number" trim="all" suffixIcon="search" placeholder="请输入用户名" />
      </view>
      <view class="result" :style="{ height: resultHeight, overflow: 'auto' }">
        <view v-for="item in 10" 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;" src="/static/default_avatar.png" />
            <view class="nickname">哈哈哈</view>
          </view>
          <view class="input-point">
            <uni-easyinput :styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
              :placeholderStyle="placeholderStyle" :clearable="false" :inputBorder="false" type="number" trim="all"
              placeholder="请输入积分额度" />
          </view>
        </view>
      </view>
    </view>

  </pb-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import peach from '@/peach'

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

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


const state = ref({
  isShaking: false,
  agreeStatus: false,
})

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

function onProtocol(title) {

}
</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;
          }
        }
      }
    }

  }

}
</style>