<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 }"
    >
    </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-date-picker.has-sidebar.has-time {
  background: #04308d;

  color: #fff;

  border: 1px solid #326aff;
}

.el-date-picker__header-label {
  color: #ffffff;
}

.el-date-table th {
  color: #fff;
}

.el-icon-d-arrow-left:before {
  color: #fff;
}

.el-icon-arrow-left:before {
  color: #fff;
}

.el-icon-arrow-right:before {
  color: #fff;
}

.el-icon-d-arrow-right:before {
  color: #fff;
}

.el-picker-panel__footer {
  background-color: #04308d;

  border: 1px solid #326aff;
}

.el-picker-panel [slot="sidebar"],
.el-picker-panel__sidebar {
  background-color: #04308d;

  border-right: 1px solid #326aff;
}

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

.el-date-picker__time-header {
  border-bottom: 1px solid #326aff;
}

.el-popper[x-placement^="bottom"] .popper__arrow::after {
  top: 1px;

  margin-left: -6px;

  border-top-width: 0;

  border-bottom-color: #04308d;
}

.el-popper[x-placement^="top"] .popper__arrow::after {
  bottom: 1px;

  margin-left: -6px;

  border-top-color: #326aff;

  border-bottom-width: 0;
}

.el-picker-panel {
  background: #04308d;

  color: #fff;
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #326affc9;
}

.el-date-range-picker__time-header {
  border-bottom: 1px solid #326aff;
}

.el-date-range-picker__content.is-left {
  border-right: 1px solid #326aff;
}
</style>
<style lang="scss" scoped>
::v-deep .el-range-editor .el-range-input {
  background-color: rgb(26, 44, 117);
  color: white;
}
::v-deep.el-date-editor .el-range__close-icon {
  line-height: 18px;
}
::v-deep.el-date-editor .el-range__icon {
  line-height: 16px;
}
::v-deep .el-range-editor.el-input__inner {
  width: 230px;
  height: 30px;
  background-color: rgb(26, 44, 117);
  border: solid 1px white;
}
::v-deep .el-picker-panel .el-date-range-picker .l-popper .has-sidebar {
  background-color: red !important;
}
.date-container {
  padding: 0.1rem;
}
</style>