<template>
    <span>
        <template v-for="(item,idx) in textList">
            <a style="display: inline-block;width: 100%;" @click="handleClick(item)" v-if="link">{{item.text}}</a>
            <span style="display: inline-block;width: 100%;" @click="handleClick(item)" v-else>{{item.text}}</span>
        </template>

    </span>
</template>
<script>
export default {
    name: 'SplitTd',
    data() {
        return {

        }
    },
    computed: {
        currentDict() {
            if (this.dicts && this.this.dict) {
                return this.dicts[this.dict];
            }
        },
        textList() {
            let list = this.value.split(this.split);
            if (this.currentDict) {
                return list.map(item => {
                    item = {
                        id: item,
                        text: this.currentDict[item] ? this.currentDict[item] : item
                    }
                    return item;
                })
            } else {
                return list.map(item => {
                    item = {
                        id: item,
                        text: item
                    }
                    return item;
                })
            }
        }
    },
    mounted: function () {

    },
    methods: {
        handleClick(string) {
            this.$emit('onclick', string);
        }
    },
    props: {
        value: {
            type: String,
            default: () => {
                return '';
            }
        },
        split: {
            type: String,
            default: () => {
                return '';
            }
        },
        dict: {
            type: String,
            default: () => {
                return '';
            }
        },
        dicts: {
            type: Object,
            default: () => {
                return {};
            }
        },
        link: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    }
}
</script>
<style scoped>
</style>