<template>
    <div class="input">
        <template>
            <el-tooltip placement="top" v-if="data[properties.name] && data[properties.name].length > 15" effect="light">
                <div slot="content" class="content-div">{{ data[properties.name] }}</div>
                <p class="text-p">
                    <el-input v-if="properties.styleInput" v-model="data[properties.name].length?data[properties.name].substr(0,12)+'...':data[properties.name]"  :disabled="true"/>
                    <span v-else="!properties.styleInput">{{data[properties.name]}}</span>
                </p>
            </el-tooltip>
            <p v-else class="text-p" >
                <el-input v-if="properties.styleInput" v-model="data[properties.name]"  :disabled="true"/>
                <span v-else="!properties.styleInput">{{data[properties.name]}}</span>
            </p>

        </template>
    </div>
</template>

<script>
import mixin from "./mixin";
/**
 *
 *
 * <item @getData="getData" @change="change" :model.sync="model"></item>
 *  parent.$refs.item.init(model);
 */
export default {
    name: "filtrateItemText",
    mixins: [mixin],
    data() {
        return {
            value: "",
            data: {},
            properties: {}
        };
    },

    created() {
        this.initProperties({
            name: 'name',
            id: 'id',
            styleInput:false
        });
    },
    methods: {
        async init(value) {
            this.value = value;
            this.data = await this.getData()||{};
        },
    }
};
</script>
<style scoped>
.text-p {
    width: 226px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.content-div {
    max-width: 226px;
    line-height: 1.5;
}
</style>
