<template>
  <div class="segment-selector">
    <label>{{ data.title }}</label>
    <ul>
      <li
        v-for="item in items"
        :class="{'is-active': modelValue === item.value}"
        :key="item.id"
        @click="handleSelect(item.value)"
      >{{ item.label }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SegmentedFilter',
  emits: ['update:modelValue', 'change'],
  props: {
    data: {
      default: () => {
        return {
          children: []
        }
      }
    },
    modelValue: {}
  },
  computed: {
    items () {
      return [
        {
          id: 0,
          label: '不限',
          value: ''
        },
        ...this.data.items
      ]
    }
  },
  methods: {
    /**
     * 处理选中
     *
     * @param value 触发对象
     */
    handleSelect (value) {
      if (value === this.modelValue) {
        return
      }
      this.$emit('update:modelValue', value)
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/variables";
.segment-selector {
  font-size: 14px;
  display: flex;

  label {
    width: 75px;
    font-size: 15px;
    flex-shrink: 0;
    line-height: 30px;
    color: var(--color-gray);
    text-align: right;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    line-height: 30px;
    gap: 5px;
    margin-bottom: 8px;
    li {
      height: 30px;
      padding: 0 10px;
      margin-bottom: 10px;
      cursor: pointer;
      background-color: var(--background-color);
      &:hover {
        color: var(--primary-color-dark);
      }
      &.is-active {
        background-color: var(--primary-color-light-deep);
      }
    }
  }
}
@media (max-width: $--mobile-max-width) {
  .segment-selector {
    font-size: 12px;
    label {
      width: 60px;
      font-size: 12px;
      line-height: 27px;
    }
    ul {
      li {
        padding: 0 7px;
        height: 27px;
        line-height: 27px;
      }
    }
  }
}
</style>
