import { BitrixVue } from 'ui.vue';
import './style.css'
BitrixVue.component('vue-field-string', {
    props: {
        field: {
            type: Object,
            required: true,
            default: {
                VALUE: '-',
                TITLE: 'no value'
            }
        }
    },
    mounted() {
    },
    computed: {
        fieldValue: (state) => state.field?.VALUE,
        localize: (state) => BitrixVue.getFilteredPhrases("FIELD_"),
        title: (state) => state.localize.TITLE
            ?.replace('#TITLE#', state.field.TITLE)
            ?? state.field.TITLE
    },
    template: `
        <span class="value" :title="title">
            <template v-if="field.MULTIPLE=='Y'">
                <span v-if="valOne"
                    v-for="(valOne, i) in fieldValue"
                    :key="'vue-field-string-'+i"
                    :title="(title || field.DESCRIPTION[i])"
                    :alt="(field.ALT || field.DESCRIPTION[i])"
                    v-html="valOne"></span>
            </template>
            <span v-else v-html="fieldValue"></span>
        </span>`
});
