<template>
  <div class="pageContent taskWearing">
    <NavBar title="佩戴任务" @on-click-left="$router.back()"></NavBar>
    <div class="day">
      <span>第</span>
      <span class="number">{{ activeIndex + 1 }}</span>
      <span>天</span>
    </div>
    <div class="timeBar">
      <div
        class="timeBarItem"
        v-for="(item, index) in days"
        :key="index"
        :class="{ active: item.time >= standard, select: index === activeIndex }"
        @click="activeIndex = index"
      ></div>
    </div>
    <div class="wearingTime">{{ days[activeIndex] ? formateSeconds(days[activeIndex].time) : formateSeconds(0) }}</div>
    <div class="progress">
      <div
        class="progressPoint"
        :style="`left: ${((days[activeIndex] ? days[activeIndex].time : 0) / standard) * 100}%`"
      ></div>
      <div class="progressBar"></div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
export default {
  components: {
    NavBar
  },
  data() {
    return {
      activeIndex: 0,
      standard: 0,
      days: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.standard = 60 * 60 * 5;
      this.days = [
        {
          time: 60 * 60 * 5
        },
        {
          time: 60 * 60 * 5
        },
        {
          time: 60 * 60 * 5
        },
        {
          time: 60 * 60 * 2
        },
        {
          time: 60 * 60 * 5
        },
        {
          time: 60 * 60 * 4
        }
      ];

      this.activeIndex = this.days.length - 1;
    },
    onSelect(type) {
      console.log(type);
      this.$refs[type + 'file'].click();
    },
    onChange(type) {
      const file = this.$refs[type + 'file'].files[0];
      console.log(file);
      const formData = new FormData();
      formData.append('file', file);
      formData.append('type', type);
      console.log(formData);
    },
    // 秒转时分秒
    formateSeconds(time) {
      let secondTime = parseInt(time); //将传入的秒的值转化为Number
      let min = 0; // 初始化分
      let h = 0; // 初始化小时
      let result = '';
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        min = parseInt(secondTime / 60); //获取分钟，除以60取整数，得到整数分钟
        secondTime = parseInt(secondTime % 60); //获取秒数，秒数取佘，得到整数秒数
        if (min > 60) {
          //如果分钟大于60，将分钟转换成小时
          h = parseInt(min / 60); //获取小时，获取分钟除以60，得到整数小时
          min = parseInt(min % 60); //获取小时后取佘的分，获取分钟除以60取佘的分
        }
      }
      if (h.toString().padStart(2, '0') == '00') {
        result = `${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
      } else {
        result = `${h.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:${secondTime
          .toString()
          .padStart(2, '0')}`;
      }

      return result;
    }
  }
};
</script>

<style scoped lang="scss">
@import './include.scss';

.taskWearing {
  padding-top: 180px;
  text-align: center;

  .day {
    font-size: 34px;
    letter-spacing: 10px;

    .number {
      color: #000;
      font-size: 120px;
      font-weight: bold;
    }
  }

  .timeBar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;

    .timeBarItem {
      width: 60px;
      height: 30px;
      border-radius: 30px;
      background-color: #e6e6e6;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }

    .active {
      background: #179b3b;
    }
    .select {
      width: 70px;
      height: 40px;
      border: 5px solid gray;
    }
  }

  .wearingTime {
    color: #000;
    font-size: 90px;
  }

  .progress {
    position: relative;
    width: 50%;
    padding: 60px 0;
    margin: 0 auto;

    .progressBar {
      width: 100%;
      height: 30px;
      background-color: #179b3b;
      border-radius: 30px;
    }

    .progressPoint {
      position: absolute;
      width: 35px;
      height: 35px;
      border: 5px solid #179b3b;
      border-radius: 50%;
      top: 0;
      bottom: 0;
      margin: auto;
      margin-left: -15px;
      background: white;
    }
  }
}
</style>
