<template lang="pug">
  .top-tesk-detail
    .status-text {{statusText}}
    el-switch(
      :value="copyValue"
      @change="change"
    )
    template(v-if="isOpen")
      .task-info
        .over-task.mr5 剩余任务
        .mr5 已完成
        .already.mr5 {{completed}}
        .mr5 待质检
        .wait.mr5 {{wait}}
      .countDown(v-if="copyCountDownTime !== 0") {{countDownText}}
</template>
<script>
export default {
  name: 'TopTeskDetails',
  props: {
    isOpen: {
      type: Boolean,
      required: true
    },
    completed: {
      type: [Number, String],
      default: 0
    },
    wait: {
      type: [Number, String],
      default: 0
    },
    countDownTime: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      timer: null, // 计时器
      second: this.timeout, // 倒计时时间
      copyValue: this.isOpen,
      copyCountDownTime: this.countDownTime
    }
  },
  computed: {
    statusText() {
      return this.isOpen ? '进行中' : '开始'
    },
    countDownText() {
      return this.copyCountDownTime === 0 ? '-' : this.copyCountDownTime
    }
  },
  watch: {
    isOpen: {
      handler(val) {
        if (val && this.copyCountDownTime) {
          this.startTimeout()
        }
      },
      immediate: true
    }
  },
  methods: {
    startTimeout() {
      setTimeout(this.nextSecond, 1000)
    },
    nextSecond() {
      this.copyCountDownTime--
      if (this.copyCountDownTime === 0) {
        this.$emit('update:isOpen', false)
        return
      }
      setTimeout(this.nextSecond, 1000)
    },
    change(val) {
      this.$nextTick(() => {
        this.$emit('update:isOpen', val)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top-tesk-detail {
  height: 35px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  .status-text {
    width: 70px;
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  .task-info {
    margin: 0 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    .over-task {
      font-weight: 500;
    }
    .already {
      padding: 0 5px;
      border-radius: 3px;
      background-color: #52c3f1;
    }
    .wait {
      padding: 0 5px;
      border-radius: 3px;
      background-color: #f19b12;
    }
  }
  /* 倒计时*/
  .countDown {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border-radius: 50%;
    border: 3px solid #3f51b5;
    box-sizing: border-box;
  }
}
</style>