<style scoped>
</style>
<template>
    <span @dblclick="hover=!hover" style="display:inline-block">
        <span v-if="!origin">{{ translated }}</span>
        <span v-else>{{ value }}</span>
        <span v-if="hover" @click="toggleView(!origin)" style="cursor:pointer">
            <Icon type="md-redo" size=16></Icon>
        </span>
    </span>
</template>
<script>
import {
    tools
} from 'hq-tools';
export default {
    name: "DictTd",
    data() {
        return {
            hover: false,
            origin: false
        };
    },
    mounted: function () { },
    watch: {
        dicts: {
            handler: function (val, oldVal) { },
            deep: true
        }
    },
    computed: {
        translated: function () {
            if (this.split && this.value) {
                let list = this.value.split(this.split).map(item => {
                    if (
                        !this.dicts ||
                        !this.dicts[this.dict] ||
                        !this.dicts[this.dict][item]
                    ) {
                        return item;
                    }
                    return this.dicts[this.dict][item];
                })
                return tools.replaceAll(list.toString().substr(0, list.toString().length),',',this.split);
            } else {
                if (
                    !this.dicts ||
                    !this.dicts[this.dict] ||
                    !this.dicts[this.dict][this.value]
                ) {
                    return this.value;
                }
            }

            return this.dicts[this.dict][this.value];
        }
    },
    methods: {
        toggleView(origin) {
            this.origin = origin;
        },
    },
    props: ["value", "dict", "dicts", "toggle", "split"]
};
</script>
