<template>
  <div class="table-form build-modal">
     <Tabs type="card" v-model="activeIndex" @on-click="changeTab">
        <TabPane label="实时日志" name="0">
            <div class="form-search">
                <Form :model="logSetInfo" :label-width="120" ref="searchForm" :rules="rules">
					<Row>
						<i-col span="6">
							<FormItem label="日志包：" prop="loggerName"  v-validate:loggerName.required.@change="rules">
								<Select v-model="logSetInfo.loggerName" clearable>
									<Option v-for="item in loggerNames"
                                        :key="item"
                                        :value="item" :disabled="!logSetInfo.host">{{item}}
                                    </Option>
								</Select>
							</FormItem>
						</i-col>
						<i-col span="6">
							<FormItem label="日志级别：" prop="level" v-validate:level.required.@change="rules">
								<Select v-model="logSetInfo.level" clearable>
									<Option v-for="item in loggerLevels"
                                        :key="item"
                                        :value="item" :disabled="!logSetInfo.host">{{item}}
                                    </Option>
								</Select>
							</FormItem>
						</i-col>
                        <i-col span="4" offset="1">
							<div class="table-search-btns">
								<Button type="primary"  @click="setLoggerLevel">设置日志级别</Button>
							</div>
						</i-col>
						<i-col span="6">
							<FormItem label="刷新间隔：单位(ms)" >
								<Select v-model="logRefreshTime" @on-change="changeRefreshTimeHandler">
									<Option v-for="item in [1000,2000,5000]" :key="item" :value="item">{{item}}</Option>
								</Select>
							</FormItem>
						</i-col>
						
					</Row>
                </form>
            </div>
            <p>从最近的10000个字符开始读取</p>
             <div style="height:400px;width:100%;overflow-y: auto;margin-top:5px;border:1px solid #dcdbdb;padding:10px">
                <pre>{{logContent}}</pre>
            </div>
        </TabPane>
        <TabPane label="历史日志" name="1" class="i-table" >
             <log-history :obj="logSetInfo" v-if="logSetInfo.appName&&showHistory"></log-history>
        </TabPane>
    </Tabs>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import LogHistory from "./log-history.vue";

@Component({
    components:{LogHistory}
})
export default class BuildLog extends Vue {
    logSetInfo : any= {
        loggerName : "",
        level : "",
        host : "",
        port : "",
        appName : "",
        profile : "",
    }

    activeIndex : number = 0;

    logRefreshTime : number = 2000;

    loggerNames : Array<any> = ["com.h3c","root"];

    loggerLevels : Array<any> = ["TRACE","DEBUG","INFO","WARN","ERROR"];

    logInterval : any = null;

    serviceLogPosMap : any = {};

    logContent : any = "";

    rules : any = {};

    showHistory : boolean =false;
    changeRefreshTimeHandler(val){
        clearInterval(this.logInterval);
        this.logInterval = setInterval(()=>{
            if(this.serviceLogPosMap[this.logSetInfo.appName]){
                this.getLogContent( this.logSetInfo.appName, this.logSetInfo.profile);
            }
        },val)
    }

    getLogContent(appName,profile){
        let pos=0;
        if(this.serviceLogPosMap[appName]){
            pos=this.serviceLogPosMap[appName]
        }
        this.getApiData("get",this.$msPrefix.config + "/api/v1/log/" + appName + "/" + profile+"/"+pos,{},res=>{
           this.logContent += res.data.content;
           this.serviceLogPosMap[appName]=res.data.pos;
        })
    }

    setLoggerLevel(){
         (this.$refs["searchForm"] as any).validate((valid) => {
          if (valid) {
          	this.getApiData("post",this.$msPrefix.config + "/api/v1/log/",this.logSetInfo,res=>{
                this.$tools.message('success','设置成功')
            })
          } else {
            this.$tools.message('info',"请完善必填项!")
          }
        });
    }
    
     showLogDialogHandler(obj){
        this.logSetInfo.host=obj.ip;
        this.logSetInfo.port=obj.port;
        this.logSetInfo.appName=obj.componentKey.applicationName;
        this.logSetInfo.profile=obj.componentKey.profile;
        this.getLogContent(obj.componentKey.applicationName,obj.componentKey.profile);
        this.logInterval = setInterval(()=>{
            if(this.serviceLogPosMap[obj.componentKey.applicationName]){
                this.getLogContent(obj.componentKey.applicationName,obj.componentKey.profile);
            }
        },this.logRefreshTime)
    }

    changeTab(name){
        if(name=="1"){
            this.showHistory=!0;
        }
    }

    resetField(){
        (this.$refs.searchForm as any).resetFields();
    }
}
</script>

