<template>
  <div :class="hasSlot ? 'rule-box' : ''">
    <slot></slot>
    <template v-if="hasSlot">
      <span v-if="!value" class="rule-color">{{ placeholder }}</span>
    </template>
    <template v-else>
      <Input class="rule-box" :value="value" :placeholder="placeholder" readonly>
        <template #suffix>
          <Icon icon="ant-design:ellipsis-outlined" class="rule-more" size="24" />
        </template>
      </Input>
    </template>
    <Icon icon="ant-design:ellipsis-outlined" class="rule-more" size="24" v-if="hasSlot" />
  </div>
</template>

<script setup lang="ts">
  import { computed, useSlots } from 'vue';
  import Icon from '/@/components/Icon/index';
  import { Input } from 'ant-design-vue';

  defineProps({
    value: [String, Number],
    placeholder: String,
  });
  const hasSlot = computed(() => {
    return !!useSlots().default;
  });
</script>

<style lang="less" scoped>
  .rule-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 32px;
    border: 1px solid #d9d9d9;
    padding: 0 8px;
    border-radius: 4px;
    position: relative;

    .rule-color {
      color: #d0cfd0;
    }

    .rule-more {
      width: 32px;
      height: 30px;
      background: #f8f8f8;
      border-radius: 0 4px 4px 0;
      border-left: 1px solid #ddd;
      color: #c3c8cf;
      position: absolute;
      right: 0;
      display: block !important;
      line-height: 23px;
    }
  }
</style>
