<template>
  <view class="labelColor itemBox" style="height: 45px;">
    <view class="item" v-for="(item) in filterList" :key="item[props.idValue]">
      <m-filter
        class="itemFilter"
        :items="item.array"
        :label="item.label"
        :multiple="item.multiple"
        :item-label="item.itemLabel"
        :item-value="item.itemValue"
        :popupStyle="{ 'padding-bottom': '80px' }"
        @change="($event, $name) => handleClick($event, $name, item)"
      >
        <view
          :class="(item.multiple && item.value?.length) || (!item.multiple && item.value) ? 'active' : ''"
          class="name"
        >
          <view class="over">
            {{ item.name ?? item.label }}
          </view>
          <template v-if="item.multiple && item.value?.length > 1">
            <uni-icons
              class="point"
              type="smallcircle-filled"
              color="#00B760"
              size="6"
            />
            {{item.value.length}}
          </template>
          <uni-icons
            type="down"
            color=""
            size="12"
          />
        </view>
      </m-filter>
    </view>
  </view>
</template>

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

const emit = defineEmits(['change'])
const props = defineProps({
  list: { type: Array, default: () => [] },
  idValue: { type: String, default: 'id' },
  labelValue: { type: String, default: 'label' },
  // selectIdValue: { type: String, default: 'id' },
  // selectLabelValue: { type: String, default: 'label' },
  // useApiData: { type: Boolean, default: true },
  lazy: { type: Boolean, default: false },
})

// const popup = ref()

// const handleOpen = (index) => {
//   popup.value[index].open('bottom')
// }
// const handleChangeItem = (i, item) => {
//   if (i === item.active) {
//     return
//   }
//   item.active = i
// }


const handleClick = (e, name, item) => {
  item.value = e
  item.name = name ?? item.label
  // const obj = e.detail.value?.length ? e.detail.value[e.detail.value.length-1] : {}
  // const obj0 = e.detail.value?.length ? e.detail.value[0] : {}
  // //
  // let val = obj.value
  // item.value = obj.value
  // item.text = obj.text || ''
  // if (typeof val === 'string' && val.includes('unlimited') && obj0) {
  //   val = Number.isInteger(obj0.id) ? Number(val.split('unlimited')[0]) : val.split('unlimited')[0]
  // }
  emit('change', item.key, e)
}

// const handleClear = (item, index) => {
//   item.value = e.multiple ? [] : null
//   item.text = null
//   emit('change', item.key, item.value)
// }

// 获取字典数据
const getData = (e) => {
  getDict(e.dictType, e.map ? {} : null, e.map ? e.dictType : 'dict').then(({ data }) => {
    e.array = data.data
    e.itemLabel = e.map?.text
    e.itemValue = e.map?.value
    e.value = e.multiple ? [] : null
  })
}

const setItemSelectData = () => {
  filterList.value.forEach(e => {
    getData(e)
  })
}

// clone list
const filterList = ref([])
watch(() => props.list, 
  (newVal) => {
    if (!newVal) {
      filterList.value = []
      return
    }
    filterList.value = newVal
    
    if (!props.lazy) {
      setItemSelectData()
    }
  },
  { immediate: true }
)

</script>

<style scoped lang="scss">
.labelColor { color: #5c5c5c; }
.itemBox {
  display: flex;
  justify-content: space-between;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 0;
    font-size: 14px;
    .itemFilter {
      width: 100%;
    }
    .name {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &.active {
        color: #00B760;
      }
      .over {
        overflow: hidden;
        white-space: nowrap;
      }
      .point {
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
