<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的应用 / 部署的应用 / 应用详情 /
      <span>应用调试</span>
    </p>
    <div class="search_list">
      <div class="list_header">
        <span></span>
        <span>{{ $route.query.content == 1 ? "命令行" : "容器日志" }}</span>
        <el-select v-model="pod" placeholder="请选择">
          <el-option
            v-for="item in pod_arr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span v-if="$route.query.content == 0">位于</span>
        <el-select
          v-model="pod_group"
          placeholder="请选择"
          v-if="$route.query.content == 0"
        >
          <el-option
            v-for="item in pod_group_arr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span v-if="$route.query.content == 1">在请问请问1212</span>
        <div v-if="$route.query.content == 0" style="float:right;">
            <el-tooltip class="item" effect="dark" content="显示时间戳" placement="top">
                <div class="time" @click="change_contl(0)" :style="control_arr[0]?{backgroundImage:'url('+require('../../../assets/imgs/rqrz_btn_time_sel.png')+')'}:''"></div>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="自动刷新（每10s）" placement="top">
                <div class="restart" @click="change_contl(1)" :style="control_arr[1]?{backgroundImage:'url('+require('../../../assets/imgs/rqrz_btn_refresh_sel.png')+')'}:''"></div>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="显示以前的日志" placement="top">
                <div class="recode" @click="change_contl(2)" :style="control_arr[2]?{backgroundImage:'url('+require('../../../assets/imgs/rqrz_btn_look_sel.png')+')'}:''"></div>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="下载" placement="top">
                <div class="download" @click="download"></div>
            </el-tooltip>
        </div>
      </div>
      <el-scrollbar class="record_contain" v-if="$route.query.content == 0">
        <p
          v-for="(item, index) in data_arr"
          :key="index + 89000"
          v-html="(control_arr[0]?'1111':'')+item"
        ></p>
      </el-scrollbar>
      <div id="xterm_contain" v-if="$route.query.content == 1"></div>
      <p class="code" v-if="$route.query.content == 0">
        <span>日志范围从 4/22/20 3:05 AM 到 4/22/20 3:05 AM UTC</span>
        <img
          :src="item"
          alt=""
          v-for="(item, index) in image_arr"
          :key="index + 12000"
        />
      </p>
      <div class="back" @click="$router.back(-1)">返回</div>
    </div>
    <apass-dialog
      ref="actiondialog"
      title="下载日志文件"
      sunbmitText="保存"
      :submitDisable="download_flag"
      @submit="save_file"
    >
      <template slot="content">
        <div>
          <div style="margin:20px 0;line-height:30px;">
            <p>请等待下载完成</p>
            <p>已下载： {{process}}</p>
          </div>
          <el-progress :percentage="process" :format="format"></el-progress>
        </div>
      </template>
    </apass-dialog>
  </div>
</template>

<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from 'xterm-addon-fit';
import apassDialog from '@/components/apass-dialog'
export default {
  props: [],
  components: {
    apassDialog
  },
  data() {
    return {
      pod: "",
      image_arr: [],
      control_arr:[0,0,0],
      pod_arr: [
        {
          value: 1,
          label: "jakdsj",
        },
        {
          value: 2,
          label: "容器1",
        },
        {
          value: 3,
          label: "容器2",
        },
      ],
      pod_group: "",
      process:0,
      pod_group_arr: [
        {
          value: 1,
          label: "jakdsj",
        },
        {
          value: 2,
          label: "容器1",
        },
        {
          value: 3,
          label: "容器2",
        },
      ],
      temp_time:'',
      download_flag:true,
      data_arr: [
        "1231231233",
        "jhabshjdabshdbasjdhb",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsdiquhdiw",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
        "iquhdiwqbdjkbaskjdbajsd",
      ],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    if (this.$route.query.content == 1) {
      var _this = this
      var term = new Terminal();
      const fitAddon = new FitAddon();
      term.loadAddon(fitAddon);
      term.open(document.getElementById("xterm_contain"));
      fitAddon.fit();
      var temp = ''

      function runFakeTerminal() {
        if (term._initialized) {
          return;
        }

        term._initialized = true;

        term.prompt = () => {
          term.write("\r\n$ ");
        };
        prompt(term,false);

        term.onKey((e) => {
          const printable =
            !e.domEvent.altKey &&
            !e.domEvent.altGraphKey &&
            !e.domEvent.ctrlKey &&
            !e.domEvent.metaKey;

          if (e.domEvent.keyCode === 13) {
              //enter
            prompt(term);
          } else if (e.domEvent.keyCode === 8) {
            // Do not delete the prompt
            if (term._core.buffer.x > 2) {
              term.write("\b \b");
            }
          } else if (printable) {
            term.write(e.key);
          }
        });
      }

      function prompt(term,val=true) {
        // term.write("\r\n$ ");
        if(val){
            term.write("\r\n");
            term.write(_this.getdata())
        }
        term.write("\r\n$ ");
      }
      runFakeTerminal();
    }
  },
  methods: {
      getdata(){
          return '54555555'
      },
      change_contl(n){
          if(this.control_arr[n]){
              this.$set(this.control_arr,n,0)
          }else{
              this.$set(this.control_arr,n,1)
          }

          if(n==1){
            if(this.control_arr[n]==1){
              this.temp_time=setInterval(()=>{
                this.data_arr = []
                this.data_arr.push(this.getrecode(!this.control_arr[2]==1))
              },1000)
            }else{
              if(this.temp_time){
                clearInterval(this.temp_time)
              }
            }
          }

          if(n==2){
            this.data_arr = []
            if(this.control_arr[n]==1){
              this.data_arr.push(this.getrecode(false))
            }else{
              this.data_arr.push(this.getrecode())
            }
          }
      },
      getrecode(n=true){
        if(n){
          return '124123432423432324'
        }else{
          return '555555555555555'
        }
      },
      download(){
        var temp = setInterval(()=>{
          this.process=this.process+1
            if(this.process>=99){
              clearInterval(temp)
              this.process = 100
              this.download_flag = false
            }
          },10)
        this.$refs.actiondialog.show();
      },
      format(n){
        return ''
      },
      save_file(){
        console.log('1111');
      }

      
  },
};
</script>

<style>
.search_list .el-scrollbar__wrap {
  overflow-x: hidden;
}
.search_list .el-scrollbar {
  border-radius: 0px;
}
#xterm_contain ::-webkit-scrollbar {
width: 0px; /*对垂直流动条有效*/
height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
#xterm_contain ::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rosybrown;
border-radius: 3px;
}


/*定义滑块颜色、内阴影及圆角*/
#xterm_contain ::-webkit-scrollbar-thumb{
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}

/*定义两端按钮的样式*/
#xterm_contain ::-webkit-scrollbar-button {
background-color:cyan;
}

/*定义右下角汇合处的样式*/
#xterm_contain ::-webkit-scrollbar-corner {
background:khaki;
}
</style>
<style scoped>

.detail_contain {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 25px);
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.search_list {
  width: 100%;
  height: calc(100% - 45px);
  margin-top: 20px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
}
.list_header {
  height: 80px;
  padding: 20px;
}
.list_header span:nth-of-type(1) {
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
  vertical-align: -2px;
}
.list_header span:nth-of-type(2) {
  font-size: 16px;
  font-weight: 600;
  margin-right: 50px;
}
.list_header span:nth-of-type(3) {
  margin-left: 10px;
  margin-right: 10px;
}
.record_contain {
  width: 100%;
  height: calc(100% - 200px);
  background-color: #1d1e20;
  padding: 30px;
  padding-right: 0;
}
.record_contain p {
  font-size: 14px;
  color: #e3e5ef;
}
#xterm_contain{
    height: calc(100% - 200px);
}
.code {
  margin-left: 32px;
  margin-top: 15px;
}
.code span {
  color: #1a2236;
}
.code img {
  float: right;
}
.back {
  width: 124px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #0f2683;
  border-radius: 8px;
  font-size: 16px;
  margin-left: 32px;
  color: #f8f9fd;
  cursor: pointer;
  margin-top: 15px;
}
.time,.restart,.recode,.download{
    width: 18px;
    height: 18px;
    background-size: contain;
    margin-top: 10px;
    margin-right: 40px;
    float: left;
    cursor: pointer;
}
.time{
    background-image: url('../../../assets/imgs/rqrz_btn_time.png');
}
.time:hover{
    background-image: url('../../../assets/imgs/rqrz_btn_time_sel.png');
}
.restart{
    background-image: url('../../../assets/imgs/rqrz_btn_refresh.png');
}
.restart:hover{
    background-image: url('../../../assets/imgs/rqrz_btn_refresh_sel.png');
}
.recode{
    background-image: url('../../../assets/imgs/rqrz_btn_look.png');
}
.recode:hover{
    background-image: url('../../../assets/imgs/rqrz_btn_look_sel.png');
}
.download{
    background-image: url('../../../assets/imgs/rqrz_btn_download.png');
}
</style>
