<template>
  <div>
    <div class="state-box">
      <span
        ><bg-icon style="font-size: 12px; color: #909bb6" icon="#bg-ic-time"></bg-icon> 已经过：{{ props.time }}</span
      >
      <div class="state-show success" v-if="props.state">
        <bg-icon style="color: #429e8a" icon="#bg-ic-s-circle-check"></bg-icon> 执行成功
      </div>
      <div class="state-show fail" v-else>
        <bg-icon style="color: #d75138" icon="#bg-ic-s-circle-close"></bg-icon> 执行失败
      </div>
    </div>
    <div class="log-bg bg-scroll">
      <div class="log-box">
        <div v-for="(item, i) in stateData.codes" :key="i" class="codes-box">
          <span class="codes-num">{{ item.pos + 1 }}</span>
          <span class="codes-out" v-html="item.out"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();

const props = defineProps({
  codes: {
    type: Array,
    default: () => [],
  },
  state: {
    type: Boolean,
    default: true,
  },
  time: {
    type: String,
    default: "",
  },
});

const stateData = reactive({
  codes: [
    {
      pos: 0,
      out: "SSH password:",
    },
    {
      pos: 1,
      out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
    },
    {
      pos: 2,
      out: "the meaning of that path. See",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 0,
      out: "SSH password:",
    },
    {
      pos: 1,
      out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
    },
    {
      pos: 2,
      out: "the meaning of that path. See",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 0,
      out: "SSH password:",
    },
    {
      pos: 1,
      out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
    },
    {
      pos: 2,
      out: "the meaning of that path. See",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 0,
      out: "SSH password:",
    },
    {
      pos: 1,
      out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
    },
    {
      pos: 2,
      out: "the meaning of that path. See",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 0,
      out: "SSH password:",
    },
    {
      pos: 1,
      out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
    },
    {
      pos: 2,
      out: "the meaning of that path. See",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
    {
      pos: 0,
      out: "SSH password:",
    },
    {
      pos: 1,
      out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
    },
    {
      pos: 2,
      out: "the meaning of that path. See",
    },
    {
      pos: 3,
      out: "https://docs.ansible.com/ansible-",
    },
  ],
});
</script>

<style lang="scss" scoped>
.state-box {
  width: 100%;
  height: 36px;
  margin-top: -18px;
  margin-bottom: 12px;
  position: relative;
  font-size: 14px;
  color: #404a62;
  span {
    position: absolute;
    left: 0;
    top: 10px;
  }

  .state-show {
    width: 200px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    margin: 0 auto;
  }
  .success {
    background-color: #ecf5f4;
  }
  .fail {
    background-color: #fbeeeb;
  }
}

.log-bg {
  background-color: #f7f7f9;
  border-radius: 6px;
  padding: 20px;
  height: calc(100vh - 370px);
  overflow-x: hidden;
  .log-box {
    width: 100%;
    .codes-box {
      padding: 6px 0;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      font-size: 14px;
    }

    .codes-num {
      width: 60px;
      color: #8890a7;
      display: inline-block;
      height: inherit;
    }

    .codes-out {
      width: calc(100% - 70px);
      color: #242c43;
      display: inline-block;
      white-space: pre-wrap;
      word-wrap: break-word;
      height: inherit;
    }
  }
}
</style>
