<template>
  <view class="page">
    <!-- 手机号输入区 -->
    <view class="input-row">
      <input
        v-model="phone"
        class="phone-input"
        type="number"
        placeholder="请输入正确的手机号"
        maxlength="11"
        @input="onPhoneInput"
      />
      <button class="next-btn" :disabled="!phoneValid" @click="goNext">下一步</button>
    </view>
    <view class="hint-row">
      <text class="hint-icon">ⓘ</text>
      <text class="hint-text">您正在尝试将视频分享至其他人</text>
    </view>

    <!-- 最近分享 -->
    <view class="section-title">最近分享</view>
    <view class="recent-list">
      <view
        v-for="item in recentList"
        :key="item.userId"
        class="recent-item"
        @click="selectRecent(item)"
      >
        <text class="recent-phone">{{ item.privity }}</text>
        <view class="arrow">›</view>
      </view>
      <view v-if="recentList.length==0" class="empty-tip">暂无最近分享记录</view>
    </view>
  </view>
</template>

<script>
import {findAgriUser, getRecentShareUser} from "@/api/system/assets/userAgri";
import store from "@/store";

export default {
  data() {
    return {
      phone: '',
      // 最近分享记录（实际对接API）
      recentList: []
    }
  },
  computed: {
    phoneValid() {
      return /^1\d{10}$/.test(this.phone)
    }
  },
  onShow() {
    this.getRecentList()
  },
  methods: {
    onPhoneInput(e) {
      this.phone = e.detail.value
    },
    selectRecent(item) {
      this.phone = item.phone
      this.goNext()
    },
    goNext() {
      if (!this.phoneValid) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      uni.navigateTo({
        url: `/pages/home/invite/selectDevice/index?phone=${this.phone}`
      })
    },
    getRecentList() {
      this.recentList = [];
      getRecentShareUser().then(res => {
        if (res.code === 200) {
          res.data.map(item => {
            this.recentList.push({
              id: item.userId,
              phone: item.phonenumber,
              privity: item.phonenumber.slice(0, 3) + '****' + item.phonenumber.slice(7, 11)
            })
          });
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: radial-gradient(circle at top, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
}

.page {
  padding: 30rpx;
  min-height: 100vh;
}

/* 输入行 */
.input-row {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  border: 2rpx solid #3d7ff5;

  .phone-input {
    flex: 1;
    height: 90rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
    background: transparent;
  }

  .next-btn {
    width: 180rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #3d7ff5;
    color: #fff;
    font-size: 28rpx;
    border-radius: 0;
    border: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
}

/* 提示 */
.hint-row {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  padding-left: 4rpx;

  .hint-icon {
    color: #aaa;
    font-size: 26rpx;
    margin-right: 8rpx;
  }

  .hint-text {
    font-size: 24rpx;
    color: #aaa;
  }
}

/* 最近分享 */
.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin: 36rpx 0 16rpx;
}

.recent-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;

  .recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 28rpx;
    border-bottom: 1rpx solid #f2f2f2;

    &:last-child { border-bottom: none; }

    .recent-phone {
      font-size: 28rpx;
      color: #333;
    }

    .arrow {
      color: #ccc;
      font-size: 36rpx;
    }
  }
}

.empty-tip {
  text-align: center;
  color: #bbb;
  font-size: 26rpx;
  padding: 60rpx 0;
}
</style>
