<template>
  <from>
  <div class="time_line">
    <div class="up yse-events">
      <div class="line"></div>
      <el-radio-group @change="dateChange" v-model="radioVal">
        <el-radio  :label="dateFormat(new Date(item),'YY-mm-dd')"  v-for="item in timeList" :key="item"  ></el-radio>
      </el-radio-group>
    </div>
    <div class="down">
      <div :class="getActive(item)" v-for="item in timeList" :key="item">
        {{dateFormat(new Date(item),"mm/dd")}}
      </div>
    </div>
  </div>
  </from>
</template>

<script setup>
import {onMounted,onBeforeUnmount,ref,watch,toRefs} from "vue";
import {dateFormat} from "@/utils/date_util.js"

const emit = defineEmits(["dateChange"]);


const radioVal = ref(null);

const props = defineProps({
  today:{
    type: Date,
    default: new Date()
  },
  current:{
    type: Date,
    default: new Date()
  },
  timeList:{
    type: String,
    required:true
  }
})
const {today,current,timeList} = toRefs(props)
current.value && (
    radioVal.value = dateFormat(new Date(current.value),'YY-mm-dd')
)


// const oneDay = 24 * 3600 * 1000;
// for (let i = 9; i >= 0; i--) {
//   const date = new Date(today.value - (i * oneDay)); // 计算当前日期和时间的毫秒数
//   timeList.value.push(date);
// }

function getActive(item){
  return item == radioVal.value ? "active" : "";
}

function dateChange(val){
  emit("dateChange", new Date(val).getTime());
}










</script>

<style lang="scss" >
$timeline-bg-color:rgba(3,44,57);
$un-active-color:#B4FFFB;
$active-color:#00FFF0;


.time_line{
  width: 100%;
  height: 64px;
  z-index: 3;
  background: $timeline-bg-color;
  border-radius: 4px;
  border: 1px solid rgba(81,233,240,0.3);
  box-sizing: border-box;
  .up{
    position: relative;
    height: 60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 26px;
    padding-right: 26px;
    .line{
      position: absolute;
      top: calc(50% - 1px);
      left: calc(4% + 4px);
      width: calc(92% - 8px);
      height: 1px;
      background-color: rgba(180,255,251,0.5);
    }
    .el-radio-group{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      .el-radio{
        border-color: $un-active-color;
        --el-radio-input-bg-color:rgba(3,44,57);//radio背景色
        --el-radio-input-border-color-hover:#B4FFFB;//移入鼠标后的颜色
        //--el-radio-input-border-color:red;
        .el-radio__input.is-checked+.el-radio__label{
          display: none;
        }
        .el-radio__label{
          display: none;
        }
        //radio选中后的颜色
        .el-radio__input.is-checked .el-radio__inner {
          border-color: $un-active-color;
          background: $timeline-bg-color;
        }
        //radio中心的圆球
        .el-radio__inner::after{
          width: 7px;
          height: 7px;
          background-color:$active-color;
        }
      }
    }
  }
  .down{
    height: 40%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    color: $un-active-color;
    .active{
      color: $active-color;
    }
  }
}
</style>
