<template>
  <section class="kf-pub-copy" :style="{height: props.height }">
    <span class="kf-pub-copy-label" v-if="label !== '' ? true : false">
      {{label}}
    </span>
    <div class="kf-pub-copy-main" :style="{ width: width,height: props.height}">
      <input class="kf-pub-copy-main-text" ref="inputRef" :placeholder="placeholder" @change="setValue" v-if="!autoWrap" :type="type"
        :readonly="readonly" :value="value" />
      <textarea class="kf-pub-copy-main-text" v-else :readonly="readonly" :value="value"></textarea>
      <i :class="[icon !== '' ? icon : '']" @mousedown="copyText"></i>
      <slot></slot>
    </div>
  </section>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";

const inputRef = ref(null);

const props = defineProps({
  value: {
    default: () => "",
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  icon: {
    type: String,
    default: () => "",
  },
  type: {
    type: String,
    default: () => "text",
  },
  changeType: {
    type: String,
    default: () => "",
  },
  label: {
    type: String,
    default: () => "",
  },
  width: {
    type: String,
    default: () => "43%",
  },
  height: {
    type: String,
    default: () => "28px",
  },
  autoWrap: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: Kf.t('PleaseFillIn'),
  },
});

const emits = defineEmits(["update:value", "change"]);
const setValue = (e) => {
  // console.log(typeof e.target.value, e.target.value, 'input change value')
  emits("update:value", e.target.value);
  emits("change", e.target.value,props, props.value, e.target.value);
};
const copyText = async () => {
  if (navigator.clipboard) {
    await navigator.clipboard.writeText(props.value);
    ElMessage.success(Kf.t('CopySuccessful'));
  } else {
    inputRef.value.select();
    document.execCommand("copy");
    ElMessage.success(Kf.t('CopySuccessful'));
  }
};
</script>

<style lang="scss" scoped>
.kf-pub-copy {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;

  .kf-pub-copy-label {
    color: #aaa;
    font-weight: 500;
    letter-spacing: 1.5px;
  }

  .kf-pub-copy-main {
    min-height: 32px;
    // padding: 0 5px;
    // border: 1px solid #2c2c2c;
    // border-radius: 3px;
    line-height: 32px;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .kf-pub-copy-main-text {
      width: 100%;
      height: 100%;
      padding: 0 5px;
      border-radius: 3px;
      border: 1px solid #2c2c2c;
      outline: none;
      background-color: #000;
      color: #eee;
      resize: none;
      font-size: 13px;
    }
    .kf-pub-copy-main-text:focus{
      transition: all 0.2s ease-in-out;
      border: 1px solid rgba(41, 120, 236,0.6);
    }

    i {
      font-size: 20px;
      padding-left: 5px;
      cursor: pointer;
    }
  }

  .kf-pub-copy-main:hover {
    color: #fff;
  }
}
</style>
