import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
import { ElTag } from 'element-plus'
import classes from './index.module.less'

export default defineComponent({
  name: 'tagItem',
  emits: ['searchTag'],
  props: {
    title: {
      type: String,
      default: ''
    },
    isChiose: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: { isCheck: false }
    },
    isSmall: {
      type: Boolean,
      default: false
    }
  },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      isCheck: props.item.isCheck,
      isSmall: props.isSmall
    })
    const shioseTag = (key: string) => {
      conent.emit('searchTag', key)
    }
    watch(
      () => props.item,
      item => {
        state.isCheck = item.isCheck
      },
      {
        deep: true
      }
    )
    const checkDrak = () => {
      if (props.isChiose) {
        state.isCheck = true
      }
    }
    return () => (
      <>
        {/* effect={state.isCheck ? 'dark' : 'light'} */}
        <div
          onClick={() => shioseTag(state.title)}
          class={[classes.tag, state.isSmall ? classes.small : '']}
        >
          {state.title}
        </div>
      </>
    )
  }
})