<template>
  <div class="date-container">
    <el-date-picker
      v-model="value2"
      :type="isHms ? 'datetimerange' : 'daterange'"
      :picker-options="isChangeOption ? {} : pickerOptions"
      @change="handleDateChange"
      :value-format="isHms ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
      :style="{ width: width }"
      size="mini"
    >
    </el-date-picker>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    isHms: {
      type: Boolean,
      default: false,
    },
    isChangeOption: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "4.2rem",
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: [],
    };
  },

  created() {
    console.log(this.isHms, "opopop");

    if (this.isHms) {
      this.value2 = [
        moment()
          .subtract(this.isChangeOption ? 1 : 3, "months")
          .format("YYYY-MM-DD HH:mm:ss"),
        moment().format("YYYY-MM-DD HH:mm:ss"),
      ];
    } else {
      this.value2 = [
        moment().subtract(3, "months").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD"),
      ];
    }
  },
  methods: {
    handleDateChange(e) {
      if (e && e.length > 0) {
        this.$emit("dateChange", e);
      }
    },
    setDate(date) {
      this.value2 = date;
    },
  },
};
</script>

<style>
/* 日期选择器弹出框样式 */
.el-picker-panel {
  background: #04308d !important;
  border: 1px solid #326aff !important;
  color: #fff !important;
}

/* 快捷选项区域 */
.el-picker-panel__sidebar {
  background: #04308d !important;
  border-right: 1px solid #326aff !important;
}

.el-picker-panel__shortcut {
  color: #fff !important;
}

/* 日历头部 */
.el-date-range-picker__header {
  color: #fff !important;
}

.el-date-range-picker__header div {
  color: #fff !important;
}

/* 日历主体 */
.el-date-table th {
  color: #fff !important;
  font-size: 0.24rem !important;
  padding: 0.1rem 0 !important;
}

.el-date-table td {
  padding: 0.1rem 0 !important;
}

.el-date-table td span {
  color: #fff !important;
  font-size: 0.24rem !important;
}

.el-date-table td.in-range div {
  background-color: rgba(50, 106, 255, 0.3) !important;
}

.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #326aff !important;
}

/* 箭头图标 */
.el-picker-panel__icon-btn {
  color: #fff !important;
}

/* 弹出框布局 */
.el-date-range-picker {
  width: 90vw !important;
  min-width: unset !important;
  left: 5vw !important;
  margin-top: 0.2rem !important;
}

.el-date-range-picker__content {
  float: none !important;
  width: 100% !important;
}

.el-date-range-picker__content.is-left {
  border-right: none !important;
}

.el-date-range-picker__content.is-right {
  display: none !important;
}
</style>

<style lang="scss" scoped>
.date-container {
  padding: 0.1rem;
  
  :deep(.el-range-editor) {
    background-color: rgb(26, 44, 117);
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 0.6rem;
    line-height: 0.6rem;
    padding: 0 0.2rem;
    
    .el-range-input {
      background-color: transparent;
      color: white;
      font-size: 0.24rem;
      height: 100%;
      line-height: 0.6rem;
    }
    
    .el-range-separator {
      color: rgba(255, 255, 255, 0.7);
      line-height: 0.6rem;
    }
    
    .el-range__icon,
    .el-range__close-icon {
      line-height: 0.6rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.24rem;
    }
  }
}
</style>