<!--
 * @Author: aBin
 * @email: binbin0314@126.com
 * @Date: 2021-07-19 15:47:38
 * @LastEditors: aBin
 * @LastEditTime: 2021-07-19 19:39:36
-->
<template>
  <view>
    <view class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0" @tap="changeStatus($event, 0)">
      <u-circle-progress :percent="100" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="4" width="66">
        <view class="u-progress-content">
          <view class="u-progress-dot"></view>
          <text class="u-progress-info">
            <u-icon name="checkmark" size="30"></u-icon>
          </text>
        </view>
      </u-circle-progress>
    </view>
    <view class="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1" @tap="changeStatus($event, 1)">
      <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
        <view class="u-progress-content">
          <view class="u-progress-dot"></view>
          <view class="u-progress-info">{{ time }}</view>
        </view>
      </u-circle-progress>
    </view>
    <view class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2" @tap="changeStatus($event, 2)">
      <u-circle-progress :percent="40" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
        <view class="u-progress-content">
          <view class="u-progress-dot"></view>
          <text class="u-progress-info">
            <u-icon name="play-right-fill" size="30"></u-icon>
          </text>
        </view>
      </u-circle-progress>
    </view>
    <view
      class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black"
      v-if="status === 3"
      @tap="changeStatus($event, 3)"
    >
      <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
        <view class="u-progress-content">
          <view class="u-progress-dot"></view>
          <text class="u-progress-info">
            <u-icon name="pause" size="30"></u-icon>
          </text>
        </view>
      </u-circle-progress>
    </view>
  </view>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  name: 'TimeStatus',
  props: {
    status: {
      default: 0,
      type: Number,
    },
    content: {
      default: '',
      type: String,
    },
  },
  data() {
    return {
      time: 20,
      start: [
        {
          text: '确认开始任务',
          color: 'blue',
        },
      ],
      pause: [
        { text: '继续' },
        {
          text: '重新开始任务',
          color: 'blue',
        },
        { text: '结束' },
      ],
      proceed: [
        { text: '暂停' },
        {
          text: '重新开始任务',
          color: 'blue',
        },
        { text: '结束' },
      ],
      again: [
        {
          text: '重新开始任务',
          color: 'blue',
        },
      ],
    };
  },
  methods: {
    ...mapMutations('home', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),
    chooseList() {
      return this.start;
    },
    changeStatus(e, num) {
      this.setStatus(num);
      this.setTipsContent(this.chooseTips(num, this.content));
      const client = {
        left: e.target.x,
        top: e.target.y,
      };
      this.setClient(client);
      this.setTips(true);
    },
    chooseTips(num, content) {
      switch (num) {
        case 0:
          return `确认开始任务${content}吗？`;
        case 1:
          return `请选择要执行的操作`;
        case 2:
          return `请选择要执行的操作`;
        case 3:
          return `是否要重新开始此任务`;
      }
    },
  },
};
</script>
