<script setup lang="ts">
import type { CheckCardItem } from '../types'

defineProps({
  // 数据
  item: Object as PropType<CheckCardItem>,
  // 是否选中
  checked: Boolean,
  // 是否禁用
  disabled: Boolean,
  // 是否显示边框
  bordered: Boolean,
  // 是否需要选中箭头
  arrow: Boolean
})
</script>

<template>
  <div
    :class="['check-card-item', { 'is-bordered': bordered }, { 'is-checked': checked }, { 'is-disabled': disabled }]"
  >
    <slot :item="item" :checked="checked" :disabled="disabled"></slot>
    <div v-if="arrow" class="check-card-arrow"></div>
  </div>
</template>

<style scoped lang="scss">
.check-card-item {
  height: 100%;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 13px;
  padding: 0px 6px;
  cursor: pointer;
  border-radius: var(--el-border-radius-base);
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;

  &.is-bordered {
    border-color: var(--el-border-color);
  }
  &.is-checked {
    &.is-bordered {
      border-color: var(--el-color-primary);
    }
    .check-card-arrow {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: var(--el-color-primary);
      border-right-color: var(--el-color-primary);
      border-top-right-radius: var(--el-border-radius-base);
      box-sizing: border-box;
    }
  }

  &.is-disabled {
    background: var(--el-disabled-bg-color);
    opacity: 0.75;
    cursor: not-allowed;

    &.is-bordered.is-checked {
      border-color: var(--el-border-color-light);
    }

    &.is-checked > .check-card-arrow {
      border-top-color: var(--el-text-color-disabled);
      border-right-color: var(--el-text-color-disabled);
    }
  }

  &:hover:not(.is-disabled) {
    &.is-bordered {
      border-color: var(--el-color-primary);
    }
  }
}
</style>
