<template>
  <div class="cust-input" :class="{ 'cust-input-placeholder': !value, 'cust-input--small': size === 'small' }">
    <span style="flex: 1;">{{ value || placeholder }}</span>
    <i class="el-icon-circle-close cust-input-placeholder" v-if="value && !readonly" @click.stop="$emit('change', '')"></i>
  </div>
</template>

<script>
export default {
  name: 'MySelectButton',
  components: {
  },
  props: {
    value: String,
    placeholder: {
      type: String,
      default: '请选择',
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
    }
  },
}
</script>

<style scoped>
  .cust-input {
    width: 200px;
    line-height: 20px;
    height: auto;
    padding: 8px 14px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #606266;
    font-size: 14px;
  }

  .cust-input--small {
    font-size: 13px;
    padding: 6px 14px;
  }

  .cust-input-placeholder {
    font-size: 14px;
    color: #C0C4CC;
  }

</style>