<template>
    <div>
        <template v-if = "configData['pl_codeFormatType'] == 'diy'">
            <div @click="runEvent" @dblclick="runEvent" :style="diyStyle">
                {{result}}
            </div>
        </template>
        <template v-else>
            <el-tag v-if="tag" :type="type" @click="runEvent" @dblclick="runEvent">
                {{result}}
            </el-tag>
            <div v-else @click="runEvent" @dblclick="runEvent">
                {{result}}
            </div>
        </template>
    </div>
</template>

<script>
    import ColumnFormatParentRender from "./columnFormatParentRender";
    export default {
        name: "code-formatter-render",
        extends: ColumnFormatParentRender,
        data(){
            return {
                tag:true,
                result:"",
                type:"",
                diyStyle:{},
            }
        },
        created() {
            this.initData();
        },
        watch:{
          value(){
              this.initData();
          }
        },
        methods:{
            initData(){
                let result = this.configData[this.value];
                let set = {};
                if(!result){
                    set = this.configData["other"];
                    this.result = set["codeVal"];
                }else{
                    set = this.configData[this.value];
                    this.result = set["codeVal"];
                }
                if(set["showStyle"] == "white"){
                    this.tag = false;
                }else{
                    this.type = set["showStyle"];
                }
                Object.keys(set).forEach(key => {
                    this.diyStyle[key] = set[key];
                    if(key == 'font'){
                        this.diyStyle['font-size'] = (set[key] || '14') + 'px';
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>