<script setup lang="ts" >
import { ref, watch } from 'vue'
const props = defineProps({
  CheckedList: Array,
  Title: String
})
const CheckedList = ref(props.CheckedList)
watch(
  () => props.CheckedList,
  (current) => {
    CheckedList.value = current
  }
)

const emit = defineEmits(['handleCloseRadio'])

const handleClose = (tag: any) => {
  CheckedList.value?.splice(CheckedList.value.indexOf(tag), 1)
  emit('handleCloseRadio', tag)
}
</script>

<template>
  <div>
    <el-card class="Rules_Card">
      <div class="Card_Title">{{ props.Title }}</div>
      <div class="right_flex">
        <el-tag
          class="tag"
          v-for="(tag, index) in CheckedList"
          :key="index"
          closable
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.tag {
  border-radius: 3px;
  margin-bottom: 4px;
  color: var(--color-neutral-1);
  height: 32px;
  width: fit-content;
  font-weight: 400;
  font-size: 14px;
  background-color: var(--tag-bg-color) !important;
  border-color: var(--tag-bg-color);
}
.tag:last-child {
  margin-bottom: 0;
}
:deep(.el-card__body) {
  padding: 8px !important;
  max-height: 400px;
  overflow-y: scroll;
  background-color: var(--color-system-card-bg);
}
:deep(.el-tag .el-tag__close svg) {
  width: 16px !important;
}
.right_flex {
  display: flex;
  flex-direction: column;
}
.Rules_Card {
  margin: 8px;
}
.Card_Title {
  color: var(--color-neutral-1);
  font-size: 14px;
  font-weight: 600;
  margin: 9px 0 11px 0;
}
</style>