<template>
  <v-navigation-drawer
    v-model="drawer"
    fixed
    temporary
    right
    width='700'
    style="z-index: var(--zIndex-dialog);"
  >
    <v-banner
      color="white"
      height="69"
      style="z-index: 3; font-size: 20px; font-weight: bolder; color: #1976D2"
      class="d-flex">
      {{ data?.name }}
    </v-banner>
    <div class="px-5" v-if="drawer">
      <v-timeline dense clipped>
        <v-timeline-item
          fill-dot
          :color="data?.runResult === '1' ? 'teal' : 'danger'"
          large
        >
          <template v-slot:icon>
            <v-icon color="white">
              {{ data?.runResult === '1' ? 'mdi-checkbox-marked-circle' : 'mdi-close-circle' }}
            </v-icon>
          </template>
          <v-chip
            class="ma-2"
            label
            text-color="white"
            color="#009688"
          >
            {{ data?.runTime }}
          </v-chip>
        </v-timeline-item>
        <template v-if="data && data.msg && data.msg.length">
          <v-timeline-item
            v-for="(item, index) in data.msg"
            :key="`${item.content}_${index}`"
            :color="item.level === 'WARN' ? 'warning' : item.level.toLowerCase()"
            small
          >
            <v-row justify="space-between">
              <v-col cols="7" style="word-wrap: break-word;">
                {{ item.content }}
              </v-col>
              <v-col
                class="text-right"
                cols="5"
              >
                {{ item.recordTime }}
              </v-col>
            </v-row>
          </v-timeline-item>
        </template>
        <template v-else>
          <v-timeline-item
            class="mb-4"
            color="grey"
            icon-color="grey lighten-2"
            small
          >
            暂无日志
          </v-timeline-item>
        </template>
      </v-timeline>
    </div>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'log-page',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      drawer: this.value
    }
  },
  watch: {
    drawer (val) {
      this.$emit('input', val)
    },
    value (val) {
      this.drawer = val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
