<template>
    <div class="dateswitch">
      <div class="dateswitch-in">
        <div
          class="ds-btn"
          v-for="item in dateOptionList"
          :key="item.type"
          :class="{ 'ds-active': item.type == selectedValue }"
          @click="selectedValue = item.type"
        >
          {{ item.lable }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import moment from "moment";
  export default {
    computed: {
      showDate() {
        return 
      },
    },
  
    model: {
      prop: 'modelVal', //指向props的参数名
      event: 'change', //事件名称
    },
    props: {
      modelVal: {
        type: Number,
        default: 1
      },
      showAll:{
        type:Boolean,
        default:true
      },
      selectTime: {
      Type: Number,
      default: 3, // 默认选中的时间维度 1-年 2-月 3-日
    },
    },
    data() {
      return {
        dateOption: [
          {
            lable: "全部",
            type: 1,
            isShow:this.showAll
          },
          {
            lable: "年",
            type: 2,
            isShow:true
          },
          {
            lable: "月", 
            type: 3,
            isShow:true
          },
        ],
        selectedValue: this.selectTime,
        
      };
    },
    computed:{
        dateOptionList(){
            return  !this.showAll?this.dateOption.filter((v)=>v.type!==1):this.dateOption
        },
        refresh(){
          return this.$store.state.ele.refresh
        }
    },
    watch: {
      selectedValue(newValue) {
        let year=null
        if(newValue===2){
            year=moment(this.$store.state.ele.currentTime).format("yyyy");
        }else if(newValue===3){
            year=this.$store.state.ele.currentTime
        }
        this.$emit('change', year)
      },
      refresh(){
        this.selectedValue = 3
      },  
      modelVal(v) {
        this.selectedValue = v
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .dateswitch {
    width: 150px;
    height: 20px;
    display: flex;
    justify-content: flex-end;
    .dateswitch-in {
      display: flex;
      border: 1px solid #19375a;
      background: #1b406c;
      border-radius: 3px;
    }
    .ds-btn {
      width: 40px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      color: #1b6bbb;
      font-size: 14px;
      text-shadow: none;
      cursor: pointer;
    }
    .ds-active {
      color: #94c2e2;
    }
    .datenum {
      font-size: 14px;
      color: #3dafff;
      margin-right: 10px;
    }
  }
  </style>
  >
  