<!--
 * @Author: Mm
 * @Date: 2025-05-09 11:35:42
 * @LastEditors: Mm
 * @LastEditTime: 2025-05-09 16:36:21
 * 不写bug的程序员不是一个好程序员!
-->
<template>
  <div class="w-full flex selectWrap">
    <div :class="activeName == '1' ? 'item active' : 'item'" @click="selectItem(1)">
      <el-icon size='16'><SetUp /></el-icon>
      <span>全部</span>
    </div>
    <div :class="activeName == '2' ? 'item active second' : 'item'" @click="selectItem(2)">
      <el-icon size='16'><DocumentDelete /></el-icon>
      <span>待处理</span>
    </div>
    <div :class="activeName == '3' ? 'item active' : 'item'" @click="selectItem(3)">
      <el-icon size='16'><VideoPause /></el-icon>
      <span>进行中</span>
    </div>
    <div :class="activeName == '4' ? 'item active finish' : 'item'" @click="selectItem(4)">
      <el-icon size='16'><DocumentChecked /></el-icon>
      <span>已完成</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

// 支持 v-model
const props = defineProps({
  modelValue: {
    type: [String, Number],
  },
})

const emit = defineEmits(['update:modelValue','change'])

const activeName = ref(props.modelValue)

// 当外部传入 modelValue 变化时，同步更新 activeName
watch(
  () => props.modelValue,
  (newVal) => {
    activeName.value = newVal
  }
)

function selectItem(name: string | number) {
  activeName.value = name
  emit('update:modelValue', name)
  emit('change', name) // 派发 change 事件
}
</script>


<style lang="scss" scoped>
.selectWrap{
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 10px;
  .item{
    padding: 10px 15px;
    margin-right:20px;
    cursor: pointer;
    display:flex;
    align-items: center;
    span{
      margin-left: 5px;
    }
  }
  .active{
    border-bottom: 2px solid #3b82f6;
    color: #3b82f6;
  }
  .second{
     border-bottom: 2px solid rgb(234,179,8);
      color: rgb(234,179,8);
  }
  .finish{
    border-bottom: 2px solid rgb(34,197,94);
      color: rgb(34,197,94);
    
  }
}
</style>
