<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 using" v-if="props.state == 0">
        <bg-icon style="color: #2b4695" icon="#bg-ic-s-circle-restart"></bg-icon> 执行中
      </div>
      <div class="state-show success" v-if="props.state == 1">
        <bg-icon style="color: #429e8a" icon="#bg-ic-s-circle-check"></bg-icon> 执行成功
      </div>
      <div class="state-show fail" v-if="props.state == 2">
        <bg-icon style="color: #d75138" icon="#bg-ic-s-circle-close"></bg-icon> 执行失败
      </div>
    </div>
    <div class="log-bg bg-scroll" :style="{ height: props.height }">
      <div class="log-box">
        <div v-for="(item, i) in props.codes" :key="i" class="codes-box">
          <span class="codes-num">{{ i + 1 }}</span>
          <span class="codes-out" v-text="item"></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";
import axios from "@/request/http.js";

const router = useRouter();
const route = useRoute();

const props = defineProps({
  codes: {
    type: Array,
    default: () => [],
  },
  state: {
    type: Number,
    default: 1,
  },
  time: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
});
</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;
  }
  .using {
    background-color: #edf0ff;
  }
}

.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>
