<template>
    <div class="ridio-info d-flex f-w-w">
        <!-- <div class="ridio-item f-12" @click="change('')" :class="{ checked: !activeName }">全部（{{ total }}）</div> -->
        <template v-for="item in list" :key="item.value">
            <div class="ridio-item f-s-12 f-w-5" @click="change(item[keyValue])" :class="{ checked: (item[keyValue] || '') === activeName }">
                <template v-if="isNum">{{ item[keyLabel] }}（{{ item[keyCount] }}）</template>
                <template v-else>{{ item[keyLabel] }}</template>
            </div>
        </template>
    </div>
</template>
<script setup name="searchTabs" lang="ts">
import { propTypes } from '@/utils/propTypes';
const emit = defineEmits(['update:modelValue', 'change']);
const activeName = ref('');
const props = defineProps({
  modelValue: propTypes.string.def(''),
  list: propTypes.any.def([]),
  isNum: propTypes.bool.def(true),
  keyLabel: propTypes.string.def('label'),
  keyCount: propTypes.string.def('count'),
  keyValue: propTypes.string.def('value')
});
const change = (event: any) => {
  console.log(event);

  activeName.value = event;

  emit('update:modelValue', activeName.value);
  emit('change', activeName.value);
};
watch(
  () => props.modelValue,
  async (val) => {
    if (val) {
      activeName.value = val as string;
    }
  },
  { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.ridio-info {
  margin-left: -10px;
  .ridio-item {
    margin: 5px;
    padding: 8px 10px;
    line-height: 1.2;
    border-radius: 15px;
    user-select: none;
    background-color: #f1f1f2;
    cursor: pointer;

    &.checked {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
    }
  }
}
</style>
