<template>
  <view class="filter-select">
    <view class="filter-box" :class="{ 'filter__actived': showSelector }">
      <view class="filter-select border-default" :class="{ 'filter-select--disabled': disabled }">
        <view class="filter-select__input-box" @click="toggleSelector">
          <input
            v-model="searchText"
            :disabled="disabled"
			placeholder-class="input-placeholder"
            :placeholder="multiple ? '请选择（可多选）' : '请选择'"
            style="border:none;width:88%;padding-left: 10upx;"
          />
          <view v-if="shouldShowClear && clear" @click.stop="clearVal">
            <uni-icons type="clear" size="20" color="#c0c4cc" />
          </view>
          <uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" />
        </view>
        <!-- 遮罩 -->
        <view v-if="showSelector" class="filter-select--mask" @click="toggleSelector" />
        <!-- 下拉 -->
        <view v-if="showSelector" class="filter-select__selector" :style="offsetStyle">
          <scroll-view scroll-y style="height:200px" @scrolltolower="loadMoreData">
            <!-- 单选 -->
            <view
              v-if="!multiple"
              v-for="item in filterSelectData"
              :key="item.value"
              class="filter-select__selector-item"
              @click="change(item)"
            >
              <text>{{ item.text }}</text>
            </view>
            <!-- 多选 -->
            <checkbox-group v-else @change="checkBoxChange">
              <label
                v-for="item in filterSelectData"
                :key="item.value"
                class="filter-select__selector-item"
              >
                <checkbox
                  :value="item.value"
                  :checked="modelValue.includes(item.value)"
                />
                <text>{{ item.text }}</text>
              </label>
            </checkbox-group>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'data-select',
  emits: ['update:modelValue', 'change', 'clear', 'open', 'close'],
  props: {
    modelValue: {
      type: [String, Number, Array],
      default: () => []
    },
    apiobjs: {
      type: Function, // ✅ 修正
      required: true
    },
    multiple: { type: Boolean, default: false },
    clear: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
    placement: { type: String, default: 'bottom' }
  },
  data() {
    return {
      showSelector: false,
      searchText: '',
      filterSelectData: [],
      params: { page: 1, page_size: 10, search: '' },
      hasMore: true
    }
  },
  computed: {
    shouldShowClear() {
      return this.multiple
        ? this.modelValue.length > 0
        : !!this.modelValue
    },
    offsetStyle() {
      return this.placement === 'bottom'
        ? 'top:100%'
        : 'bottom:100%'
    }
  },
  watch: {
    searchText() {
      this.resetAndLoad()
    }
  },
  methods: {
    async getData() {
      if (!this.hasMore) return
      const res = await this.apiobjs(this.params)
      const list = res?.results || []
      if (list.length < 10) this.hasMore = false
      this.filterSelectData.push(
        ...list.map(i => ({ text: i.name, value: i.id }))
      )
    },
    resetAndLoad() {
      this.params.page = 1
      this.hasMore = true
      this.filterSelectData = []
      this.params.search = this.searchText
      this.getData()
    },
    loadMoreData() {
      if (!this.hasMore) return
      this.params.page++
      this.getData()
    },
    change(item) {
      this.emit(item.value)
      this.searchText = item.text
      this.showSelector = false
    },
    checkBoxChange(e) {
      const values = e.detail.value
      this.emit(values)
    },
    clearVal() {
      this.searchText = ''
      this.emit(this.multiple ? [] : '')
      this.$emit('clear')
    },
    emit(val) {
      this.$emit('update:modelValue', val)
      this.$emit('change', val)
    },
    toggleSelector() {
      if (this.disabled) return
      this.showSelector = !this.showSelector
	  if(this.showSelector && this.filterSelectData.length === 0) {
		this.resetAndLoad()
    }
	this.$emit(this.showSelector ? 'open' : 'close')
  	},
  }
}
</script>

<style lang="scss">
	$uni-base-color: #6a6a6a !default;
	$uni-main-color: #333 !default;
	$uni-secondary-color: #909399 !default;
	$uni-border-3: #e5e5e5;
    $uni-primary: #2979ff !default;
	$uni-success: #4cd964 !default;
	$uni-warning: #f0ad4e !default;
	$uni-error: #dd524d !default;
	$uni-info: #909399 !default;

	.filter-select {
		display: flex;
		align-items: center;
		width: 100%;
		flex: 1;
		box-sizing: border-box;
	}

	.filter-box {
		background-color: #fff;
		width: 100%;
		flex: 1;
	}

	.filter__actived {
		width: 100%;
		flex: 1;
	}

  .border-bottom {
    border-bottom: solid 1px $uni-border-3;
  }

  .border-default {
    border: 1px solid $uni-border-3;
  }

	.filter-select {
		font-size: 14px;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0;
		position: relative;
		flex-direction: row;
		align-items: center;
		width: 100%;
		flex: 1;
		min-height: 35px;

		&--disabled {
			background-color: #f5f7fa;
			cursor: not-allowed;
		}

		&--wrap {
			height: auto;
			min-height: 35px;
		}
	}

	.filter-select__label {
		font-size: 16px;
		height: 35px;
		padding-right: 10px;
		color: $uni-secondary-color;
	}

	.filter-select__input-box {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;

		.padding-top-bottom {
		  padding-top: 5px;
		  padding-bottom: 5px;
		}

		.slot-content {
		  width: 100%;
		  display: flex;
		  flex-direction: row;
				flex-wrap: wrap;
		}
	}

	.filter-select__input {
		flex: 1;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
	}

	.filter-select__input-plac {
		font-size: 14px;
		color: $uni-secondary-color;
	}

	.filter-select__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 3;
		padding: 4px 0;
	}

	.filter-select__selector-scroll {
		/* #ifndef APP-NVUE */
		height: 200px;
		box-sizing: border-box;
		/* #endif */
	}

	/* #ifdef H5 */
	@media (min-width: 768px) {
		.filter-select__selector-scroll {
			max-height: 600px;
		}
	}

	/* #endif */

	.filter-select__selector-empty,
	.filter-select__selector-item {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		flex-direction: row;
		align-items: center;
		line-height: 35px;
		font-size: 14px;
		padding: 0px 10px;
	}



	.filter-select__selector-item-check {
		margin-left: auto;
	}

	.filter-select__selector-empty:last-child,
	.filter-select__selector-item:last-child {
		/* #ifndef APP-NVUE */
		border-bottom: none;
		/* #endif */
	}

	.filter-select__selector__disabled {
		opacity: 0.4;
		cursor: default;
	}

	/* picker 弹出层通用的指示小三角 */
	.uni-popper__arrow_bottom,
	.uni-popper__arrow_bottom::after,
	.uni-popper__arrow_top,
	.uni-popper__arrow_top::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow_bottom {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow_bottom::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.uni-popper__arrow_top {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		bottom: -6px;
		left: 10%;
		margin-right: 3px;
		border-bottom-width: 0;
		border-top-color: #EBEEF5;
	}

	.uni-popper__arrow_top::after {
		content: " ";
		bottom: 1px;
		margin-left: -6px;
		border-bottom-width: 0;
		border-top-color: #fff;
	}


	.input-placeholder {
		color: $uni-base-color;
		font-size: 12px;
		margin: 1px 0;
	}

	.filter-select--mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 2;
	}

  .align-left {
    text-align: left;
  }

  .align-center {
    text-align: center;
  }

  .align-right {
    text-align: right;
  }

</style>
