<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]" :mask="mask" :with-icon="field.copy" outlined)
        .flex.items-center(v-if="field.copy && data[field.label]")
          .copy.icon-copy.cursor-pointer(@click="() => copyValue(data[field.label])")
    base-input(v-if="field.type === 'date'" :mask="mask" type="date" v-model="data[field.label]" outlined)
    base-radio-buttons-group(v-if="field.type === 'radio'" v-model="data[field.label]" :items="field.items" size="xs" :column-gap="14"  direction-column)
</template>

<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
export default {
  name: "BaseDetailInput",
  components: { BaseInput, BaseRadioButtonsGroup },
  props: {
    value: String,
    field: Object,
    data: Object,
    mask: String,
  },
  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>
