<template>
  <div class="m-box">
    <div
      class="m-box-label"
      :class="{
        error: option.error,
        disabled: option.disabled
      }"
      v-if="selectedDate && option.showLabel"
    >
      {{ option.placeholder }}
    </div>
    <m-picker
      ref="picker"
      v-model="selectedDate"
      :type="option.type ?? 'date'"
      :format="format"
      :class="{
        errorType: option.error,
        'input-width-m': !option.fullWidth,
        fullWidth: option.fullWidth,
        hasLabel: selectedDate
      }"
      value-type="format"
      :placeholder="option.placeholder"
      :clearable="!option.clearable"
      :disabled="option.disabled"
      :range="option.range"
      :append-to-body="!!option.noAttach"
      :lang="{
        formatLocale: {
          monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月',
            '8月', '9月', '10月', '11月', '12月']
        }
      }"
      @change="handleChange"
    ></m-picker>
  </div>
</template>

<script>
import MPicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'
/**
 * param type [date|datetime|year|month|time|week]
 * year 日期选择，选择 年 为结果
 * month 日期选择，选择 月 为结果
 * date 日期选择，选择 天 为结果
 * week 日期选择，选择 周 为结果
 * datetime 日期时间选择，选择 天和时间 为结果
 * time 时间选择，选择 时间 为结果
 */
export default {
  name: 'date-picker',
  components: { MPicker },
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: [String, Array],
      default: () => []
    }
  },
  data () {
    return {
      selectedDate: null
    }
  },
  computed: {
    format () {
      const type = this.option.type || 'date'
      const list = {
        datetime: 'YYYY-MM-DD HH:mm:ss',
        time: 'HH:mm:ss',
        year: 'YYYY',
        month: 'YYYY-MM'
      }
      return list[type] ?? 'YYYY-MM-DD'
      // if (type === 'datetime') return 'YYYY-MM-DD HH:mm:ss'
      // if (type === 'time') return 'HH:mm:ss'
      // if (type === 'year') return 'YYYY'
      // if (type === 'month') return 'YYYY-MM'
      // return 'YYYY-MM-DD'
    }
  },
  watch: {
    value (val) {
      this.selectedDate = val
    }
  },
  created () {
    this.selectedDate = this.value
  },
  // mounted () {
  //   console.log(this.$refs.picker)
  // },
  methods: {
    reset () {
      this.selectedDate = null
      this.$emit('change', null)
    },
    handleChange (value) {
      this.$emit('change', value)
    }
  }
}
</script>

<style lang="scss" scoped>

$disabledColor: rgba(0, 0, 0, 0.26);
.m-box {
  position: relative;
  &-label {
    &.disabled {
      color: $disabledColor;
    }
    &.error {
      color: red;
    }
    position: absolute;
    padding: 0 5px;
    font-size: 12px !important;
    z-index: 2;
    background: #FFF;
    top: 0;
    transform: translateY(-50%);
    left: 10px;
  }
}
.zIndexTop {
  z-index: 9999999999999999999999999;
}
.errorType {
  ::v-deep .mx-input {
    border-color: red;
    color: red;
    &::placeholder {
      color: red;
    }
  }
  ::v-deep .mx-input:hover, .mx-input:focus {
    border-color: red;
  }
  // border: 2px solid red;
  // border-radius: 5px;
}
.fullWidth {
  width: 100%;
  flex: 1;
}

::v-deep .mx-datepicker-main.mx-datepicker-popup .mx-scrollbar-wrap {
  overflow-y: hidden !important;
}
::v-deep .mx-scrollbar-track {
  width: 10px !important;
}

::v-deep .mx-input {
  transition: .3s;
  height: 40px;
  font-size: 16px;
  color: rgba(0,0,0,.87);
  border: 1px solid #9e9e9e;
  background-color: unset;
  &:disabled {
    cursor: unset;
    color: $disabledColor;
    border-color: $disabledColor;
    background: unset;
    &:hover {
      border-color: $disabledColor;
    }
    &:focus {
      border-color: $disabledColor;
    }
  }
}
::v-deep .mx-input:hover, .mx-input:focus {
  border-color: #000;
}

</style>
<style>
.mx-datepicker-main.mx-datepicker-popup {
  z-index: 999999999999 !important;
}
</style>
