<template>
  <view :class="`radio_body ${props?.display ? 'displayStyle' : ''}`" :style="props?.radioStyle">
    <view
      v-for="(i, index) in getEnums()"
      :key="`item_${index}`"
      :class="`item item_${props?.size} ${
        selectEd(i?.value, props?.valueModel) || selectEd(i?.value, selectValue) ? 'active' : ''
      }`"
      :style="
        selectEd(i?.value, props?.valueModel) || selectEd(i?.value, selectValue)
          ? props?.selectStyle
          : ''
      "
      @click="onClick(i)"
    >
      {{ i?.text }}
    </view>
  </view>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
interface EnumItem {
  text?: string
  value?: string
}
const props = defineProps([
  'valueModel',
  'Enums',
  'size',
  'display',
  'radioStyle',
  'selectStyle',
  'valueLabel'
])
const selectValue = ref<any>([])
const selectValueLabel = ref<any>([])

const selectEd = (val?: string, list?: any[]) => {
  if (list?.includes(val)) {
    return true
  } else {
    return false
  }
}

const getEnums = () => {
  let list: EnumItem[] = Object.entries(props?.Enums as Record<string, EnumItem>).map(
    ([key, value]) => ({
      text: value.text,
      value: value.value
    })
  )
  return list
}
const emit = defineEmits(['update:valueModel', 'onChange'])
const onClick = (e: any) => {
  if (props?.display) {
    return false
  }
  if (selectValue.value?.includes(e?.value)) {
    //删除已经存在的
    const newList = selectValue.value.filter((i: string) => i !== e?.value)
    const newValLabelList = selectValueLabel.value.filter(
      (i: { value?: string }) => i?.value !== e?.value
    )
    selectValue.value = newList
    selectValueLabel.value = newValLabelList
  } else {
    //添加新的
    selectValue.value = [...selectValue.value, ...[e?.value]]
    selectValueLabel.value = [...selectValueLabel.value, ...[e]]
  }
  emit('update:valueModel', selectValue.value)
  emit('onChange', props?.valueLabel ? selectValueLabel.value : selectValue.value)
}

watch(
  () => props?.valueModel,
  () => {
    if (props?.valueModel) {
      selectValue.value = props?.valueModel
      handleFilter()
    }
  }
)

const handleFilter = () => {
  selectValueLabel.value = Object.values(props?.Enums).filter(i => {
    let item = i as { value?: string }
    return props?.valueModel?.includes(item?.value)
  })
  console.log('selectValueLabel.value', selectValueLabel.value)
}

onMounted(() => {
  if (props?.valueModel) {
    selectValue.value = props?.valueModel
    handleFilter()
  }
})
</script>
<style lang="scss" scoped>
.radio_body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10rpx 0;

  .item {
    min-width: 120rpx;
    padding: 0 10rpx;
    text-align: center;
    font-size: 26rpx;
    height: 60rpx;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f4;
    border-radius: 6rpx;
    margin-right: 15rpx;
    margin-bottom: 15rpx;
    // &:last-child {
    //   margin: 0;
    // }
  }

  .item_sm {
  }

  .item_md {
  }

  .item_lg {
  }

  .active {
    color: #333;
    background-color: #ffd415;
  }
}

.displayStyle {
  opacity: 0.7;
}
</style>
