<template>
    <!--自定义渲染模板-->
    <div>
        <template v-if = "configObj['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" :class="!columnValue?'min-width-tag':''">
                {{result}}
            </el-tag>
            <div v-else @click="runEvent" @dblclick="runEvent">
                {{result}}
            </div>
        </template>
    </div>
</template>

<script>
    import EventParentRender from "../../eventParentRender"; //事件渲染统一继承父类
    export default {
        name: "status-code-render", //渲染组件唯一标识（与配置组件中 renderKey 对应）
        extends: EventParentRender,
        data(){
            return {
                tag:true,
                result:"",
                type:"",
                diyStyle:{},
                /**
                 * 内置对象
                 *  用于预览
                 *  defaultObj 默认参数配置
                 *  defaultVal 默认列值
                 *
                 *  columnValue 当前列实际值
                 *  configObj 当前列实际配置（根据配置模版中 getConfigDatas（） 返回值 ）
                 */
            }
        },

        created() {
            this.initData(); //开发者自定义方法逻辑
        },
        watch:{
          value(){
              this.initData(); //应用渲染
          },
        },
        methods:{
            /**用于预览  **/
            preview(){
                this.defaultObj = {"pl_codeFormatType":"tag",
                    "other":{'code':'other',codeVal:'其他',showStyle:"info"}}; //默认配置
                this.defaultVal = "other"; //默认列值
                this.initDefaultFunc(); //加载默认初始化方法必填（内置方法）
            },


            initData(){
                let result = this.configObj[this.columnValue];
                let set = {};
                if(!result){
                    set = this.configObj["other"];
                    if(!set){
                        set = this.defaultObj["other"];
                    }
                    this.result = set["codeVal"];
                }else{
                    set = this.configObj[this.columnValue];
                    this.result = set["codeVal"];
                }
                if(set["showStyle"] == "white"){
                    this.tag = false;
                }else{
                    this.tag = true;
                    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';
                    }
                });
                this.existEvent && (this.diyStyle['cursor'] = 'pointer');

            }
        }
    }
</script>

<style scoped>
    .min-width-tag{
        width: 48px;
    }
</style>