<template>
  <div class="home">
    <div class="box">
      <ul>
        <li 
         :class="{active: (isActive &&  currentIndex == index) || (MultiSelect && selectList.indexOf(list[index]) !=-1) }" 
        class="label" 
        v-for="(data,index) in list" 
        :key="index"
        @click="select(index)">{{data}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive,ref } from ‘@vue/reactivity‘
// @ is an alias to /src

export default {
  name: ‘Home‘,
  setup(){
    const list = reactive([‘xh‘,‘xm‘,‘dh‘,‘ypp‘])
    const isActive = ref(false) // 是否选中
    const MultiSelect = ref(false) //是否多选
    const currentIndex = ref(null) // 当前索引的对比值
    const selectList = reactive([]) //多选的判断
    const select = (index) => {
      if(MultiSelect.value){
        if(selectList.indexOf(list[index]) == -1){
          selectList.push(list[index])
          console.log(selectList)
        }else {
          console.log(selectList.indexOf(list[index]))
          selectList.splice(selectList.indexOf(list[index]),1)
        }

      }else {
        //单选
        // isActive.value = true
        if(currentIndex.value == index) isActive.value = ! isActive.value
        else{
          currentIndex.value = index
          isActive.value = true
        }
       
      }
    }
    return {
      list,
      isActive,
      MultiSelect,
      currentIndex,
      selectList,
      select
    }
  }
}
</script>
<style lang="stylus">
  .label {
    display inline-block
    border solid #ccc 1px
    border-radius .5rem
    padding 2rem 3rem
    margin-left 2rem
    list-style none
  }
  .active {
    background rgba(200,10,230,.3)
    color yellow
  }
</style>