<script setup lang="ts">
const props = defineProps<{
  modelValue: any
}>()

const emit = defineEmits(['update:modelValue'])

defineOptions({ name: 'MjDatePicker' })

const value = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val),
})
</script>

<template>
  <el-date-picker
    v-model="value"
    class="mj-date-picker"
    popper-class="mj-date-picker-popper"
    type="datetimerange"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    format="YYYY-MM-DD HH:mm:ss"
    date-format="YYYY-MM-DD ddd"
    time-format="HH:mm:ss"
    :editable="false"
    v-bind="$attrs"
  />
</template>

<style lang="scss">
.mj-date-picker {
  height: 5.33vh !important;
  border-radius: 1.67vh;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: none !important;

  // 外部中间的横线
  .el-range-separator {
    font-size: 2.17vh !important;
    color: #fff !important;
  }
  // 外部的2个input
  input {
    // width: 270px !important;
    font-size: 2.33vh !important;
    color: #fff !important;
    // font-family: $font-special;
    &::placeholder {
      color: #ccd4d4 !important;
      font-family: $font-text;
    }
  }
  // 外部的图标
  .el-input__icon,
  .el-range__close-icon {
    font-size: 2.67vh;
    color: #4de798 !important;
  }
  .el-range__close-icon {
    display: none !important;
  }
  // .el-range__close-icon--hidden {
  //   opacity: 1;
  //   visibility: visible;
  // }
}

.mj-date-picker-popper {
  background: rgba(59, 59, 59, 1) !important;
  border-radius: 1.67vh;
  box-shadow: none;
  border: none !important;

  $single_panel_w: 500px;
  .el-picker-panel {
    width: $single_panel_w * 2 + 5px;
    box-shadow: none;
    background: rgba(59, 59, 59, 1) !important;
    border-radius: 1.67vh;
    font-size: 2vh;
    color: #fff;
  }
  // 年-星期
  .el-date-range-picker__header {
    div {
      font-size: 1.67vh !important;
    }
    // 左右两边的箭头
    .el-picker-panel__icon-btn {
      color: #fff !important;
      font-size: 1.67vh !important;
    }
  }

  // 顶部的输入框
  .el-date-range-picker__time-header {
    display: flex;
    align-items: center;
    justify-content: center;

    // 中间的箭头
    .el-icon {
      font-size: 1.67vh !important;
    }

    .el-time-panel {
      width: 200px;
    }

    // 时间选择picker的文字大小
    .el-time-spinner__item {
      font-size: 1.67vh !important;
    }

    // 单部分：日期+时间
    .el-date-range-picker__editors-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }

    input {
      height: 3.33vh;
      font-size: 1.83vh;
      text-align: center;
      width: 180px;
    }
  }

  .el-time-panel__btn {
    font-size: 1.5vh;
  }

  .el-picker-panel__footer {
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: end;
    background: none !important;
    button {
      width: 80px;
      height: 3.33vh;
      font-size: 1.67vh;

      &.is-text {
        color: #fff;
      }
    }
  }

  .in-range,
  .start-date,
  .end-date {
    .el-date-table-cell__text {
      // 在选中范围内
      color: #000 !important;
    }
  }
  .el-picker-panel__content {
    --el-datepicker-active-color: #4ee798;
    --el-datepicker-header-text-color: #fff;
    width: $single_panel_w;
    .el-date-table {
      width: 100%;

      th {
        font-size: 1.5vh !important;
      }
      .el-date-table-cell__text {
        font-size: 1.83vh !important;
      }

      td.available:hover {
        .el-date-table-cell__text {
          color: #4ee798;
        }
      }
      .el-date-table__row {
        height: 4.17vh;
        .today {
          .el-date-table-cell__text {
            color: #4ee798;
          }
          &.current {
            .el-date-table-cell__text {
              color: #fff;
            }
          }
        }
        .el-date-table-cell {
          height: 4.17vh;
          width: 50px;
          position: relative;
          font-size: 1.67vh;
          .el-date-table-cell__text {
            width: 40px;
            height: 3.33vh;
            line-height: 3.33vh;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }

  .el-popper__arrow {
    display: none;
  }
}
</style>
