<template>
  <div class="mch-task-status tc full">
    <div class="sub-title">任务状态</div>
    <!-- 任务未开始 -->
    <div class="status">
      <div class="tc" v-if="status === 'none'">
        <div>任务未开始，可以继续上传照片或者手动开始任务</div>
        <Button type="primary" @click="uploadPhotos">上传照片</Button>
        <Button type="primary" @click="startTask">开始任务</Button>
      </div>
      <!-- 正在上传 -->
      <div class="uploading container" v-else-if="status === 'uploading'">
        <div class="status-image"></div>
        <Progress class="progress" :stroke-width="10" stroke-color="#0a9" hide-info :percent="upload.progress" status="active" />
        <div class="flex-between">
          <span>{{upload.status === 'uploading' ? '正在上传照片': '正在等待上传'}}，请稍后...</span>
          <span>{{ Math.round(upload.fileList.length * (upload.progress || 0) / 100) }}/{{ upload.fileList.length }}</span>
        </div>
      </div>
      <!-- 正在排队 -->
      <div class="waiting container" v-else-if="status === 'waiting'">
        <div class="status-image"></div>
        <div>正在等待处理，前面还有 <span class="emphasis">{{ waitingNumber }}</span> 个任务正在排队</div>
        <Button type="primary" @click="stopTask">停止任务</Button>
      </div>
      <!-- 正在处理 -->
      <Log :logs="logs" v-else-if="status === 'processing'">
        <Button type="primary" @click="stopTask">停止任务</Button>
      </Log>
      <!-- 任务停止 -->
      <div class="stop container" v-else-if="status === 'stop'">
        <div class="status-image"></div>
        <div>任务停止，可以手动点击“开始任务”</div>
        <Button type="primary" @click="startTask">开始任务</Button>
      </div>
      <!-- 建模出错 -->
      <div class="error container" v-else-if="status === 'error'">
        <div class="status-image"></div>
        <div>建模出错，请联系管理员获取错误日志！</div>
      </div>
    </div>
  </div>
</template>

<script>
import Log from './Log.vue'
export default {
  props: {
    status: {
      type: String,
      default: 'none'  // none,uploading,waiting,processing,error
    },
    logs: {
      type: Array,
      default: []
    },
    upload: {
      type: Object,
      default: () => ({})
    },
    waitingNumber: {
      type: Number,
      default: 0
    }
  },
  components: {
    Log
  },
  methods: {
    uploadPhotos() {
      this.$emit('on-upload-photos')
    },
    startTask() {
      this.$emit('on-run')
    },
    stopTask() {
      this.$emit('on-stop')
    }
  }
}
</script>