<template lang="pug">
  .flex.flex-col.w-full(class="gap-y-1.5")
    span.title-section.font-semibold.text-xs(v-if="field.title" ) {{field.title}}
    .flex.items-center(v-if="field.type === 'text' || field.type === 'textarea'" class="gap-x-2.5")
      span.w-4.icon(v-if="field.icon" :class="field.icon")
      base-input(v-model="data[field.label]" :with-icon="field.copy")
        .copy.icon-copy.cursor-pointer(
          v-if="field.copy && data[field.label]",
          @click="() => copyValue(data[field.label])"
        )
    base-input-date(v-if="field.type === 'date'" v-model="data[field.label]")
</template>

<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {
  name: "BaseDetailInput",
  components: { BaseInput, BaseInputDate },
  props: {
    value: String,
    field: Object,
    data: Object,
  },
  data() {
    return {
      isNoData: true,
    };
  },
  methods: {
    copyValue(text) {
      navigator.clipboard.writeText(text);
    },
  },
};
</script>

<style lang="sass" scoped>
.icon
  color: var(--icon-light-blue)
.copy
  color: var(--btn-blue-color)
  opacity: 0.6
</style>
