<template>
  <div class="oo-page">
    <div class="oo-server" :loading="loading">
      <Drawer
        :closable="true"
        :width="width"
        :mask="false"
        :styles="{backgroundColor:'black'}"
        v-model="showResultPanel"
      >
        <div class="result-panel">
          <p>
            <span>执行结果</span>
            <a title="结果窗口宽度" @click="width=45">45%</a>
            <a @click="width=60">60%</a>
            <a @click="width=80">80%</a>
            <a @click="width=100">100%</a>
          </p>
          <Divider />
          <pre class="result-panel-pre">{{tailStdout}}</pre>
        </div>
      </Drawer>
        </div>
    <Row class="buttonDiv">
      <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
    </Row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit, Prop } from "vue-property-decorator";

@Component
export default class DeployResult extends Vue {
  private tailStdout : any ;
  private width: any = 45;
  private showResultPanel: boolean = false;
  
  showDetail(data){
    if(data.job.status && data.job.status == '102'){
      this.tailStdout = "OO平台已取消该任务，系统解析结束...";
    }else{
      if(data.result==''|| data.result == null || data.result == undefined){  
        this.tailStdout = "结果正在解析中...";
      }else{
        this.tailStdout = data.result;
      }  
    } 
    this.showResultPanel = true;
  }
  mounted() {
     this.$emit('fill', this);
  }

  @Emit("closeModal") close() {}
  cancel() {
    this.close();
  }
}
</script>
<style>
.result-panel-bottom {
  max-height: 200px;
  overflow: auto;
  background-color: black;
  color: white;
  margin-bottom: 10px;
}

.result-panel-pre {
  max-height: 100%;
  overflow: auto;
  background-color: black;
  color: white;
  margin-bottom: 10px;
}
.result-panel > p > span,
.result-panel > p > a {
  margin-right: 20px;
  color: white;
}
.ivu-drawer-mask,
.ivu-drawer-wrap {
  z-index: 2000;
}
</style>
