<template>
  <div class="progress-inner">
    <div class="progress-inner-box">
      <div class="progress-content">
        <div
          @click="sendProgress(item, index)"
          v-for="(item, index) in rainfallData.arrData"
          :key="index"
          :class="{ 'progress-active': activeData.activeIndex == index }"
        >
          <i></i>
          <i></i>
          {{ item.time }}
        </div>
      </div>
      <div class="progress-btn">
        <div v-if="!isPay" @click="play()"> <img src="../../../assets/images/weatheHome/play-icon-active.png" /> </div>
        <div v-if="isPay"> <img src="../../../assets/images/weatheHome/play-icon.png" /> </div>
        <div v-if="isPay" @click="stop()"> <img src="../../../assets/images/weatheHome/stop-icon-active.png" /> </div>
        <div v-if="!isPay"> <img src="../../../assets/images/weatheHome/stop-icon.png" /> </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, defineEmits, ref } from 'vue';
const emit = defineEmits(['sendProgress']);
const props = defineProps({
  rainfallData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
let activeData = reactive({
  data: {},
  activeIndex: 0,
});
let setIntervalFn = null;
let isPay = ref(false);
// 播放开始
function play() {
  isPay.value = true;
  //获取当前的索引
  //获取播放速度
  setIntervalFn = setInterval(() => {
    activeData.activeIndex++;
    if (activeData.activeIndex == props.rainfallData.arrData.length) {
      activeData.activeIndex = 0;
      isPay.value = false;
      clearInterval(setIntervalFn);
      return;
    }
    activeData.data = props.rainfallData.arrData[activeData.activeIndex];
    sendProgress(props.rainfallData.arrData[activeData.activeIndex], activeData.activeIndex);
  }, props.rainfallData.activeTime);
}
function stop() {
  isPay.value = false;
  clearInterval(setIntervalFn);
}
// 返回数据this.$emit('getSshdTotal', sshdCount);
function sendProgress(item, index) {
  activeData.activeIndex = index;
  // console.log(item);
  emit('sendProgress', item);
}
onMounted(() => {
  activeData.data = props.rainfallData.arrData[0];
  sendProgress(activeData.data, 0);
});
</script>
<style lang="less" scoped>
.progress-inner {
  width: 100%;
  height: 100%;
}
.progress-inner-box {
  padding: 10px;
  height: 100%;
}
.progress-content {
  // border: 1px solid #e8e8e8;
  height: calc(100% - 140px);
  padding: 10px 0;
  overflow: auto;
  background-color: #06305e;
  div {
    line-height: 50px;
    margin-left: 20px;
    border-left: 6px solid #11417c;
    padding-left: 20px;
    position: relative;
    cursor: pointer;
    i:nth-child(1) {
      width: 13px;
      height: 4px;
      background-color: #11417c;
      position: absolute;
      left: 0px;
      top: 22px;
    }
    i:nth-child(2) {
      // background-color: #00d8f0;
      width: 14px;
      height: 14px;
      border-radius: 14px;
      position: absolute;
      left: -10px;
      top: 17px;
    }
  }
  .progress-active {
    color: #00d8f0;
    font-size: 14px;
    i:nth-child(1) {
      background-color: #00d8f0;
    }
    i:nth-child(2) {
      background-color: #00d8f0;
    }
  }
  div:hover {
    color: #00d8f0;
    i:nth-child(1) {
      background-color: #00d8f0;
    }
    i:nth-child(2) {
      background-color: #00d8f0;
    }
  }
}
.progress-btn {
  display: flex;
  // flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: 56px;
  div:nth-child(1) {
    margin-right: 60px;
  }
}
</style>
