<template>
  <div class="mch-task-status tc">
    <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="warning" size="small" @click="stopTask">停止任务</Button>
      </div>
      <!-- 正在处理 -->
      <div class="processing tc container" v-else-if="status === 'processing'">
        <div class="status-image"></div>
        <Progress class="progress" :stroke-width="10" stroke-color="#0a9" hide-info :percent="progress.percent" status="active" />
        <div class="info flex-between">
          <div class="message" :title="progress.label">{{ progress.label }}</div>
          <div>{{ progress.percent }}%</div>
        </div>
        <Button type="warning" size="small" @click="stopTask">停止任务</Button>
      </div>
      <!-- 任务停止 -->
      <div class="stop container" v-else-if="status === 'stop'">
        <div class="status-image"></div>
        <div>任务终止，可以手动重新开始任务</div>
      </div>
      <!-- 建模出错 -->
      <div class="error container" v-else-if="status === 'error'">
        <div class="status-image"></div>
        <div class="error-msg" :title="error">建模出错：{{error || '未知'}}</div>
        <Button type="primary" size="small" @click="exportLogs">导出日志</Button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      default: 'none'  // none,uploading,waiting,processing,error
    },
    progress: {
      type: Object,
      default: () => ({
        label: '初始化...',
        percent: 0
      })
    },
    upload: {
      type: Object,
      default: () => ({})
    },
    waitingNumber: {
      type: Number,
      default: 0
    },
    error: {
      type: String,
      default: ''
    }
  },
  methods: {
    uploadPhotos() {
      this.$emit('on-upload-photos')
    },
    startTask() {
      this.$emit('on-run')
    },
    stopTask() {
      this.$emit('on-stop')
    },
    exportLogs() {
      this.$emit('on-logs')
    }
  }
}
</script>