<template>
    <div :class="['edit-contaniner',{'f-c':textCenter?true:false}]">
        <template v-if="!showEdit">
            <a-tooltip :placement="textCenter?'top':'topLeft'">
                <template slot="title">
                    双击可编辑
                </template>
                <div @dblclick="textClick" :style="{'font-size':size+'px','font-weight':weight}">
                    {{data?data:'请输入'+str}}
                </div>
            </a-tooltip>
        </template>
        <div class="flex-align edit-box" v-if="showEdit">
            <span class="m-r8" style="flex:1;min-width: 300px;">
                <a-input :value="data?data:''" :placeholder="'请输入'+str" @change="change" />
            </span>
            <div>
                <span class="m-r8"><a @click="oSave">保存</a></span>
                <span class="m-r8"><a @click="oCancle">取消</a></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            textCenter: {
                type: Boolean,
                default: true
            },
            value: {
                type: String,
                default: ''
            },
            str: {
                type: String,
                default: ''
            },
            size: {
                type: String,
                default: '14'
            },
            weight: {
                type: String,
                default: 'normal'
            }
        },
        data() {
            return {
                data: this.value,
                showEdit: false,
                newStr: ''
            }
        },
        methods: {
            textClick() {
                if (this.$store.state.textIsEdit) {
                    this.$message.error('您当前有正在编辑的内容，请完成编辑！')
                    return;
                }
                this.showEdit = true;
                this.newStr = this.data;
                this.$store.commit('changeTextIsEdit', true)
            },
            change(e) {
                console.log(e.target.value)
                this.newStr = e.target.value;
            },
            oSave() {
                this.data = this.newStr;
                this.$emit('input', this.newStr)
                this.$emit('callBack', this.newStr)
                this.oCancle()
            },
            oCancle() {
                this.showEdit = false;
                this.newStr = '';
                this.$store.commit('changeTextIsEdit', false)
            }
        }
    }
</script>

<style scoped lang="less">
    .edit-contaniner {
        width: 100%;
        flex: 1;
    }

    .f-c {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .edit-box {
        width: 100%;
        /* background-color: pink; */
    }
</style>