<template>
  <view class="picker-wrap">
    <view class="depart-picker" @click="onOpen">
      <text :class="selected ? 'value-text' : 'placeholder-text'">{{ displayLabel }}</text>
      <u-icon name="arrow-right" color="#c0c4cc" size="28"></u-icon>
    </view>

    <drawer-page-container v-model="showPopup" title="选择科室">
      <view class="search-wrap">
        <u-search
          v-model="keyword"
          placeholder="搜索科室名称"
          :show-action="false"
          shape="round"
          bg-color="#f5f5f5"
        />
      </view>
      <scroll-view scroll-y class="sheet-scroll">
        <view v-if="loading" class="empty">加载中...</view>
        <view v-else-if="!filteredOptions.length" class="empty">{{ keyword ? '无匹配科室' : '暂无科室' }}</view>
        <view
          v-for="item in filteredOptions"
          :key="item.id"
          class="option-item"
          @click="onPick(item)"
        >
          <text class="name">{{ item.name }}</text>
          <u-icon v-if="Number(value) === Number(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: 'DepartPicker',
  components: { DrawerPageContainer },
  props: {
    value: { type: [Number, String], default: null },
    options: { type: Array, default: () => [] },
    loading: { type: Boolean, default: false },
    placeholder: { type: String, default: '请选择科室' },
  },
  data() {
    return {
      showPopup: false,
      keyword: '',
    }
  },
  computed: {
    selected() {
      return this.options.find((o) => Number(o.id) === Number(this.value)) || null
    },
    displayLabel() {
      return this.selected ? this.selected.name : this.placeholder
    },
    filteredOptions() {
      const kw = (this.keyword || '').trim().toLowerCase()
      if (!kw) return this.options
      return this.options.filter((o) => String(o.name || '').toLowerCase().includes(kw))
    },
  },
  methods: {
    onOpen() {
      this.keyword = ''
      this.showPopup = true
    },
    onPick(item) {
      this.$emit('input', item.id)
      this.$emit('change', item)
      this.showPopup = false
    },
  },
}
</script>

<style scoped>
.picker-wrap { width: 100%; }
.depart-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 88rpx;
  padding: 8rpx 0;
  box-sizing: border-box;
}
.value-text { font-size: 28rpx; color: #1d2129; flex: 1; }
.placeholder-text { font-size: 28rpx; color: #c0c4cc; flex: 1; }
.search-wrap { padding: 16rpx 24rpx 8rpx; flex-shrink: 0; }
.sheet-scroll { max-height: 60vh; padding-bottom: 24rpx; }
.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.name { font-size: 28rpx; color: #1d2129; }
.empty { text-align: center; color: #86909c; padding: 80rpx 0; font-size: 28rpx; }
</style>
