<template>
  <m-filter
    :label="props.label"
    :items="props.items"
    :item-label="props.itemLabel"
    :item-value="props.itemValue"
    :multiple="props.multiple"
    :value="showValue"
    @change="handleChange"
    @init="handleInit"
  >
    <view class="content">
      <view class="content-cover"></view>
      <uni-easyinput v-model="showLabel" placeholder="请选择其它感兴趣的城市" :clearable="false"/>
    </view>
  </m-filter>
</template>

<script setup>
import MFilter from './mFilter'
import { ref, watch } from 'vue'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: { // 传入值
    type: [String, Number, Array, Object],
    default: ''
  },
  label: {
    type: String,
    default: '请选择'
  },
  items: {
    type: Array,
    default: () => []
  },
  itemLabel: {
    type: String,
    default: 'label'
  },
  itemValue: {
    type: String,
    default: 'value'
  },
  multiple: {
    type: Boolean,
    default: false
  }
})
// 回显使用id
const showValue = ref(props.modelValue)
const showLabel = ref(null)

// const isChange = ref(false)
watch(
  () => props.modelValue,
  (val) => {
    showValue.value = val
  },
  {
    immediate: true,
    deep: true
  }
)

const handleInit = (val) => {
  showLabel.value = val
  console.log('label', val)
}

const handleChange = (value, label, item) => {
  console.log(111)
  if (props.multiple) {
    if (!value.length) {
      showLabel.value = null
      emit('update:modelValue', null)
      return
    }
    showLabel.value = item.data.filter(e => value.includes(e[props.itemValue])).map(e => e[props.itemLabel])
    emit('update:modelValue', value)
    return
  }
  showLabel.value = label
  emit('update:modelValue', value)
}

</script>

<style lang="scss" scoped>
.content {
	position: relative;
	&-cover {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 3;
	}
}
</style>