<template>
  <div class="card-01-wrapper">
    <van-row>
      <van-col :span="$slots.right ? 20 : 24" @click="emits('select')">
        <div class="card-01-header">
          <van-icon v-if="props.icon && isString(props.icon)" :name="props.icon" color="#1989fa"
                    size="1.3rem" style="margin-right: 5px;"/>
          <van-tag v-else-if="props.icon && props.icon.type === 'tag'"
                   :color="props.icon.color" style="margin-right: 5px;height: 1rem;white-space: nowrap;"
                   text-color="#fff">{{ props.icon.value }}
          </van-tag>
          <span>{{ props.title }}</span>
        </div>
        <div v-if="props.description" class="card-01-description">
          <van-text-ellipsis v-if="props.ellipsisDescription" :content="props.description"/>
          <span v-else v-html="props.description"></span>
        </div>
      </van-col>
      <van-col v-if="$slots.right" span="4" style="display: flex;justify-content: center;align-items: center;">
        <slot name="right"></slot>
      </van-col>
    </van-row>
  </div>
</template>
<script setup>
import {defineEmits, defineProps} from 'vue';
import {isString} from '@/utils/validate';

const emits = defineEmits(['select']);

const props = defineProps({
  icon: {
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  description: {
    type: String,
    default: ''
  },
  ellipsisDescription: {
    type: Boolean,
    default: false
  }
})

</script>
<style lang="scss" scoped>
.card-01-wrapper {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;

  .card-01-header {
    display: flex;
    flex-direction: row;
    align-items: center;

    span {
      font-size: 1rem;
      color: #303133;
      font-weight: bold;
    }

  }

  .card-01-description {
    font-size: 0.9rem;
    color: #A8ABB2;
    margin-top: 10px;
  }

  &:last-child {
    margin-bottom: 20px;
  }
}
</style>
