<template>
  <div class="dateswitch" :class="align === 'right' && 'justify-end'">
    <div v-if="showDateNum" class="datenum">{{ showDate }}</div>
    <div class="dateswitch-in" v-if="options">
      <div
        class="ds-btn"
        v-for="item in options"
        :key="item.type"
        :class="{ 'ds-active': item.type == selectedValue }"
        @click="selectedValue = item.type"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="dateswitch-in" v-else-if="type === 0">
      <div
        class="ds-btn"
        v-for="item in dateOption"
        :key="item.type"
        :class="{ 'ds-active': item.type == selectedValue }"
        @click="selectedValue = item.type"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="dateswitch-in" v-else-if="type === 2" style="width: 80px">
      <div
        class="ds-btn"
        v-for="item in dateOption2"
        :key="item.type"
        :class="{ 'ds-active': item.type == selectedValue }"
        @click="selectedValue = item.type"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="dateswitch-in" v-else-if="type === 3" style="width: 80px">
      <div
        class="ds-btn"
        v-for="item in dateOption3"
        :key="item.type"
        :class="{ 'ds-active': item.type == selectedValue }"
        @click="selectedValue = item.type"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="dateswitch-in" v-else style="width: 40px">
      <div class="ds-btn ds-active">
        {{ dateLable }}
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  computed: {
    showDate() {
      return moment(this.$store.state.appDate).format("yyyy");
    },
  },

  model: {
    prop: "modelVal", //指向props的参数名
    event: "change", //事件名称
  },
  props: {
    modelVal: {
      type: Number,
      default: 1,
    },
    align: {
      type: String,
      default: "right",
    },
    type: {
      Type: Number,
      default: 0, // 0-显示年月日   2-显示年月  3-显示月日  4-只显示一个维度，根据父组件传过来的显示
    },
    showDateNum: {
      Type: Boolean,
      default: false, // 是否显示时间数字
    },
    selectTime: {
      Type: Number,
      default: 1, // 默认选中的时间维度 1-年 2-月 3-日
    },
    dateLable: {
      Type: String,
      default: "年", // 单个时间维度显示的文字（type为4时有效）
    },
    options: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      dateOption: [
        {
          label: "年",
          type: 1,
        },
        {
          label: "月",
          type: 2,
        },
        {
          label: "日",
          type: 3,
        },
      ],
      dateOption2: [
        {
          label: "年",
          type: 1,
        },
        {
          label: "月",
          type: 2,
        },
      ],
      dateOption3: [
        {
          label: "月",
          type: 2,
        },
        {
          label: "日",
          type: 3,
        },
      ],
      selectedValue: this.selectTime,
    };
  },
  watch: {
    selectedValue(newValue) {
      this.$emit("change", newValue);
    },
    modelVal(v) {
      this.selectedValue = v;
    },
  },
};
</script>

<style lang="scss" scoped>
.dateswitch {
  width: 150px;
  height: 20px;
  display: flex;
  .dateswitch-in {
    display: flex;
    border: 1px solid #19375a;
    background: #1b406c;
    border-radius: 3px;
  }
  .ds-btn {
    min-width: 40px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #1b6bbb;
    font-size: 14px;
    text-shadow: none;
    padding: 0 5px;
    cursor: pointer;
  }
  .ds-active {
    color: #94c2e2;
  }
  .datenum {
    font-size: 14px;
    color: #3dafff;
    margin-right: 10px;
  }
}
</style>
