<template>
  <view class="picker-wrap">
    <view class="promoter-picker" @click="onOpen">
      <view v-if="selected" class="promoter-selected">
        <image v-if="selected.avatar" :src="selected.avatar" class="avatar" mode="aspectFill" />
        <view v-else class="avatar placeholder">{{ (selected.nick_name || '?').charAt(0) }}</view>
        <view class="meta">
          <text class="name">{{ selected.nick_name || '-' }}</text>
          <text class="sub">{{ selected.phone || '' }}</text>
        </view>
      </view>
      <text v-else class="placeholder-text">{{ placeholder }}</text>
      <u-icon v-if="!disabled" name="arrow-right" color="#c0c4cc" size="28"></u-icon>
    </view>
    <text v-if="selected && clearable" class="clear-btn" @click.stop="onClear">清空</text>

    <drawer-page-container v-model="showPopup" title="选择邀请人推广员">
      <view class="search-wrap">
        <u-input
          v-model="searchKeyword"
          placeholder="搜索姓名、手机号"
          :clearable="true"
          border="surround"
          @change="onSearch"
        />
      </view>
      <scroll-view scroll-y class="sheet-scroll">
        <view v-if="loading" class="empty">加载中...</view>
        <view v-else-if="!options.length" class="empty">无匹配推广员</view>
        <view
          v-for="item in options"
          :key="item.id"
          class="option-item"
          @click="onPick(item)"
        >
          <image v-if="item.avatar" :src="item.avatar" class="avatar" mode="aspectFill" />
          <view v-else class="avatar placeholder">{{ (item.nick_name || '?').charAt(0) }}</view>
          <view class="meta">
            <text class="name">{{ item.nick_name || '-' }}</text>
            <text v-if="item.phone" class="phone">{{ item.phone }}</text>
          </view>
          <u-icon v-if="value === item.id" name="checkmark" color="#6acdbb" size="32"></u-icon>
        </view>
      </scroll-view>
    </drawer-page-container>
  </view>
</template>

<script>
import DrawerPageContainer from '@/subPackages/sub_salesperson/components/DrawerPageContainer.vue'

export default {
  name: 'SalespersonPicker',
  components: { DrawerPageContainer },
  props: {
    value: { type: Number, default: 0 },
    disabled: { type: Boolean, default: false },
    clearable: { type: Boolean, default: true },
    placeholder: { type: String, default: '请选择邀请人推广员（可选）' },
    excludeId: { type: Number, default: 0 },
    storeId: { type: Number, default: 0 },
    fetchOptions: { type: Function, required: true },
    initialSelected: { type: Object, default: null },
  },
  data() {
    return {
      showPopup: false,
      searchKeyword: '',
      loading: false,
      options: [],
      selected: null,
      searchTimer: null,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (!val) {
          this.selected = null
          return
        }
        if (this.initialSelected && Number(this.initialSelected.id) === Number(val)) {
          this.selected = this.initialSelected
        }
      },
    },
    initialSelected: {
      immediate: true,
      handler(item) {
        if (item && Number(item.id) === Number(this.value)) {
          this.selected = item
        }
      },
    },
  },
  methods: {
    onOpen() {
      if (this.disabled) return
      this.showPopup = true
      this.loadOptions('')
    },
    onSearch() {
      if (this.searchTimer) clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => this.loadOptions(this.searchKeyword), 300)
    },
    async loadOptions(keyword) {
      this.loading = true
      try {
        const wrap = await this.fetchOptions({
          keyword: keyword || '',
          exclude_id: this.excludeId,
          store_id: this.storeId || undefined,
        })
        this.options = (wrap && wrap.ok && wrap.data) ? wrap.data : []
      } finally {
        this.loading = false
      }
    },
    onPick(item) {
      this.selected = item
      this.$emit('input', Number(item.id))
      this.$emit('change', item)
      this.showPopup = false
    },
    onClear() {
      this.selected = null
      this.$emit('input', 0)
      this.$emit('change', null)
    },
  },
}
</script>

<style lang="scss" scoped>
.picker-wrap { position: relative; }
.promoter-picker {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 16rpx; padding: 24rpx;
}
.promoter-selected { display: flex; align-items: center; flex: 1; min-width: 0; }
.avatar { width: 72rpx; height: 72rpx; border-radius: 50%; margin-right: 20rpx; flex-shrink: 0; }
.avatar.placeholder {
  background: #e8f8f5; color: #6acdbb; display: flex; align-items: center; justify-content: center;
  font-size: 32rpx; font-weight: 600;
}
.meta { flex: 1; min-width: 0; }
.name { display: block; font-size: 28rpx; font-weight: 600; color: #333; }
.sub, .phone { font-size: 24rpx; color: #999; }
.placeholder-text { font-size: 28rpx; color: #999; flex: 1; }
.clear-btn { position: absolute; right: 24rpx; top: -36rpx; font-size: 24rpx; color: #999; }
.search-wrap { padding: 0 24rpx 16rpx; }
.sheet-scroll { max-height: 60vh; }
.empty { text-align: center; color: #999; padding: 60rpx 0; font-size: 26rpx; }
.option-item {
  display: flex; align-items: center; padding: 24rpx; border-bottom: 1rpx solid #f0f0f0;
}
</style>
