<template>
    <div>
        <el-dialog :visible.sync="visible" class="dialog-templateInfo" @close="$emit('update:show', false)" :close-on-click-modal="false">
             <div class="message-box">
                <div class="message-box-header">
                    <div class="message-box-title">
                        <span>{{configName}}</span>
                    </div>
                    <i class="icon icon-close" @click="handleClose"></i>
                </div>
                 <div class="message-box-content">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="配置内容" name="1" style="height:330px">
                            <el-scrollbar>
                                <p v-html="configContent" style="height:330px"></p>
                            </el-scrollbar>
                        </el-tab-pane>
                        <el-tab-pane label="参数列表" name="2" class="paramsList">
                                <p class="paramsListHead">
                                    <span>参数ID</span>
                                    <span>参数名称</span>
                                    <span>参数类型</span>
                                    <span>参数说明</span>
                                 </p>
                                <ul class="paramsListBody">
                                    <el-scrollbar>
                                        <el-form>
                                             <li v-for="(item,index) in configparameterlist" :key="index">
                                                <span>{{item.parameterID}}</span>
                                                <span><el-input :value="item.parameterName" disabled></el-input></span>
                                                <span><el-input :value="item.parameterType" disabled></el-input></span>
                                                <span><el-input :value="item.parameterDesc" disabled></el-input></span>
                                            </li>
                                        </el-form>
                                    </el-scrollbar>
                                </ul>
                        </el-tab-pane>
                         <el-tab-pane label="配置图片" name="3" style="height:330px">

                        </el-tab-pane>
                    </el-tabs>
                 </div>
             </div>
        </el-dialog>
    </div>
</template>
<script>
import deviceconfigurat from '../../services/deviceconfiguration.service'
    let deviceconfiguration = new deviceconfigurat()
    export default {
        name: "deviceurationInfo",
        data() {
            return {
                visible: this.show,
                activeName: '1',
                configName:"",
                configparameterlist:[],
                configContent:""
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false
            }
        },
        methods:{
            handleClose(){
                this.$emit('update:show', false)
            },
            handleSure(){
                this.$emit('update:show', false)
            },
            init(id){
                this.activeName='1';
                this.configName=id.configName;
                deviceconfiguration.getConfigFileInfo(id.configCode,1).then((res)=>{
                    if(res.code===0){
                        res=res.data;
                        this.configparameterlist = res.configparameterlist;
                        this.configContent=res.configContent;
                         //去除标识符
                        var re = /\@\@[a-zA-Z]{1}\d+\_\d{1,2}/g;
                        var text = "<span style='margin-bottom: -20px;display: inline-block;visibility: hidden;'>$&</span>";
                        this.configContent = this.configContent.replace(re, text);
                         //换行
                        let reg=new RegExp("\n","g");
                        this.configContent=this.configContent.trim().replace(reg,"</br>");
                        //加高亮
                        var res = /\$\$(.*?)\$\$/g;
                        var texts = "<span style='background:#ffee58'>$&</span>";
                        this.configContent = this.configContent.trim().replace(res, texts);
                    }else {
                        _toast(res.msg)
                    }
                }).catch((err=>{
                    console.log(err)
                }))
            }
        },
        watch: {
            show () {
                this.visible = this.show;
            }
        },
    }
</script>

<style style  lang="scss" scoped>
.dialog-templateInfo{
    .paramsList{
        .paramsListHead{
            padding-bottom: 10px;
        }
        .paramsListHead,li{
            display: flex;
            padding-bottom:10px;
            width:705px;
            span{
                display: inline-block;
                padding-left:10px;
                &:first-child{
                    padding-left: 0px;
                    flex:1;
                }
                &:nth-child(2){
                    width:140px;
                    .el-input{
                        width:110px;
                        text-align: center
                    }
                }
                &:nth-child(3){
                    width:170px;
                    .el-input{
                        width:140px;
                        text-align: center
                    }
                }
                &:last-child{
                    width:220px;
                    .el-input{
                        width:190px;
                        text-align: center
                    }
                }
            }
        }
    }
    .paramsListBody{
        height: 300px;
    }
}

</style>