<template>
  <div
    class="set_select_item cursor-pointer"
    :class="{
      set_select_item_active: selected,
      ' cursor-not-allowed': disabled,
    }"
    @click="() => !disabled && $emit('click')"
  >
    <div v-show="selected">
      <div class="items-center flex">
        <Icon
          size="14"
          iconName="icona-bianzu2"
          style="margin-right: 7px"
        ></Icon>
        <span
          class="label_check label_selected"
          :class="{ 'js-selected_disable': disabled }"
          >{{ label }}
        </span>
      </div>
    </div>
    <div v-show="!selected">
      <span class="label_check">{{ label }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import Icon from "@/components/Icon/index.vue";
defineProps<{ selected: boolean; label: string; disabled: boolean }>();

defineEmits(["click"]);
</script>

<style scoped>
.set_select_item {
  width: 107px;
  height: 35px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #d9d9d9;

  line-height: 35px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353535;
}
.set_select_item_active {
  background: #f1f6ff;
  border: 1px solid var(--sy-blue);
}

.icon_selected {
  vertical-align: middle;
  color: #15cbba;
  font-size: 17px;
}

.icon_check {
  vertical-align: middle;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #d1d1d1;
  border-radius: 50%;
  cursor: pointer;
}

.label_check {
  vertical-align: middle;
  display: inline-block;
  font-size: 12px;
}

.label_selected {
  color: var(--sy-blue);
}

.js-selected_disable {
  color: #acaab7;
}
</style>
