<template>
  <div class="processing tc container">
    <div class="status-image"></div>
    <Progress class="progress" :stroke-width="10" stroke-color="#0a9" hide-info :percent="progress" status="active" />
    <div class="info flex-between">
      <div class="message" :title="lastLogInfo">{{ lastLogInfo }}</div>
      <div>{{ progress }}%</div>
    </div>
    <slot></slot>
    <!-- <Button type="primary" @click="showLogs">查看日志</Button>
    <Modal v-model="logShow" title="任务日志" width="1000">
      <div class="mch-logs">
        <div class="scroll full">
          <div class="log-item" v-for="item in logs" :key="item.log_id">
            <span>[{{getTime(item.time)}}]</span>
            <span>{{ item.message }}</span>
            <span v-if="item.progress">当前进度：{{item.progress.toFixed(2)}}%</span>
          </div>
        </div>
      </div>
    </Modal> -->
  </div>
</template>

<script>
import _ from 'lodash'
import moment from 'moment'
export default {
  props: {
    logs: {
      type: Array,
      default: []
    }
  },
  methods: {
    getTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    showLogs() {
      this.logShow = true
      this.$nextTick(() => {
        let scroll = document.querySelector('.mch-logs .scroll')
        this.$ScrollTop(scroll, {
          to: scroll.scrollHeight
        })
      })
    }
  },
  data() {
    return {
      logShow: false
    }
  },
  computed: {
    progress() {
      for(let i = this.logs.length - 1;i>=0;i--) {
        if (this.logs[i].type === 'progress') {
          return _.round(this.logs[i].progress, 2)
        }
      }
      return 0
    },
    lastLogInfo() { // 最近一条日志信息
      for(let i = this.logs.length - 1;i >=0;i--) {
        if (this.logs[i].progress) {
          continue
        } else {
          return this.logs[i].message.replace('[日志信息]', '')
        }
      }
    }
  },
  watch: {
    logs() {
      if (this.logShow) {
        let scroll = document.querySelector('.mch-logs .scroll')
        scroll && this.$ScrollTop(scroll, {
          to: scroll.scrollHeight
        })
      }
    }
  }
}
</script>
