<template>
  <view>
    <!-- <u-dropdown-item v-if="filterable">
      <u-input v-model="filterValue" placeholder="筛选"></u-input>
    </u-dropdown-item> -->
    <u-dropdown-item
      :title="label"
      v-model="status"
      @change="handleChange"
      :options="getOptions"
    >
      <view class="bg-white">
        <view class="px-34rpx" v-if="filterable">
          <u-input v-model="filterValue" placeholder="筛选"></u-input>
        </view>
        <scroll-view
          scroll-y="true"
          :style="{
            height: $u.addUnit(getOptions.length > 8 ? 930 : 'auto'),
          }"
        >
          <u-cell-group>
            <u-cell-item
              @click="handleSelect(item)"
              v-for="(item, i) in getOptions"
              :key="i"
              :title="item.label"
              :arrow="false"
            ></u-cell-item>
          </u-cell-group>
        </scroll-view>
      </view>
    </u-dropdown-item>
  </view>
</template>
<script>
import { omit } from 'lodash-es'
export default {
  props: {
    api: {
      type: Function,
      default: () => {},
    },
    label: {
      type: String,
      default: '',
    },
    value: {
      type: [Array, Object, String, Number],
    },
    params: {
      type: Object,
      default: () => ({}),
    },
    labelField: {
      type: String,
      default: 'label',
    },
    valueField: {
      type: String,
      default: 'value',
    },
    filterable: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    status: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('change', val)
        this.$emit('input', val)
      },
    },
    getOptions() {
      const { labelField, valueField } = this
      const arr = this.options.reduce((prev, next) => {
        if (next) {
          const value = next[valueField]
          prev.push({
            ...omit(next, [labelField, valueField]),
            label: next[labelField],
            value: value,
          })
        }
        return prev
      }, [])
      if (!this.filterValue) return arr
      return arr.filter((e) => e.label.includes(this.filterValue))
    },
  },
  data() {
    return {
      filterValue: '',
      options: [],
      emitData: null,
      isFirstLoad: true,
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    handleSelect(e) {
      this.status = e.value
      this.$emit('close-dropdown', this.status)
    },
    async fetch() {
      const api = this.api
      if (!api || !this.isFunction(api)) return
      this.options = []
      try {
        const data = await api(this.params)
        this.isFirstLoad = false
        if (Array.isArray(data)) {
          this.options = data
          this.emitChange()
          return
        }
        this.emitChange()
      } catch (error) {
        console.warn(error)
      }
    },
    emitChange() {
      this.$emit('options-change', this.getOptions)
    },
    handleChange(e) {
      const args = this.getOptions.filter((item) => item.value == e)
      this.emitData = args
    },
    isFunction(fn) {
      return typeof fn === 'function'
    },
  },
  watch: {
    params: {
      handler() {
        //
        !this.isFirstLoad && this.fetch()
      },
      deep: true,
    },
  },
}
</script>
