<template>
  <div class="mb-px rounded">
    <div class="px-4 bg-white mb-px text-sm text-text-secondary py-2 h-9 flex items-center" @click="clickItem">
      <div v-if="required" class="text-color-primary mr-0.5">*</div>
      <div class="title flex items-center">
        <slot name="prefix" />
        <div class="">{{ title }}</div>
      </div>
      <div class="ml-auto flex-shrink-0 flex items-center">
        <slot name="suffix" />
        <app-icon
          v-if="dot"
          type="png"
          :path="require('@/assets/icons/dot.png')"
          class-name="h-5 w-1"
        />
      </div>
    </div>
    <slot />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'CCell',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    dot: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickItem() {
      this.$emit('click')
    },
    checkIfEmpty(string: string) {
      if (typeof string === 'undefined') return false
      return string.replace(/(^\s*)|(\s*$)/g, '') !== ''
    }
  }
})
</script>

<style lang="less">

</style>
