<template>
  <view class="labelColor itemBox" style="height: 45px;">
    <view class="item" v-for="(item) in filterList" :key="item[props.idValue]">
      <m-filter
        :items="item.array"
        :label="item.label"
        :value="item.value"
        :multiple="item.multiple"
        :item-label="item.itemLabel"
        :item-value="item.itemValue"
		    :style="{ 'width': labelWidth }"
        :popupStyle="{ 'padding-bottom': paddingBottom + 'px' }"
        @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'
import { formatName } from '@/utils/getText'

const emit = defineEmits(['change'])
const props = defineProps({
  list: { type: Array, default: () => [] },
  idValue: { type: String, default: 'id' },
  labelValue: { type: String, default: 'label' },
  lazy: { type: Boolean, default: false },
  paddingBottom: { type: [Number, String], default: 80 },
  labelWidth: { type: String, default: '100%' }
})


const handleClick = (e, name, item) => {
  item.value = e
  item.name = name ?? item.label
  emit('change', item.key, e)
}

// 获取字典数据
const getData = (e) => {
  if (e?.dictType) {
    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
    })
  }
  if (e?.api) {
    e.api().then(({ data }) => {
      e.array = data.map(k => {
        const label = e.isRichText ? k[e.dataLabel].replace(/<\/?p[^>]*>/gi, '') : e.isFormatText ? formatName(k[e.dataLabel]) : k[e.dataLabel]
        return { label, value: k[e.dataValue] }
      })
    })
  }
}

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;
    .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>
