<template>
  <el-date-picker
      style="width: 100%;"
      :type="type"
      v-bind="$attrs"
      v-model="paramVal"
      clearable
      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
      :valueFormat="valueFormatCpt"
      :format="formatCpt"
      unlink-panels
      :disabled="$util.isValue($attrs.disabled) ? $attrs.disabled : formView"
  >
    <template #default="cell">
      <slot name="default" :cell="cell"></slot>
    </template>
  </el-date-picker>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick,
  inject
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    param: {},
    label: {},
    type: {
      type: String,
      default: 'date',
      validator(val: string) {
        return ['date', 'year', 'week', 'month', 'dates', 'monthrange', 'daterange'].includes(val)
      }
    },
    valueFormat: { type: String, default: ''},
    format: { type: String, default: ''},
  },
  setup(props, { emit }) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      paramVal: props.param,
      formView: inject('form-view', false),
    })
    watch(() => state.paramVal, (n) => {
      emit('emitParam', n)
    })
    watch(() => props.param, (n) => {
      state.paramVal = n
    })
    const formatCpt = computed(() => {
      let val = props.format
      if (!val) {
        switch (props.type) {
          case 'year':
            val = 'YYYY'
            break;
          case 'month':
            val = 'YYYY-DD'
            break;
          case 'week':
            val = '[第]ww[周]'
            break;
          default:
            val = 'YYYY-MM-DD'
        }
      }
      return val
    })
    const valueFormatCpt = computed(() => {
      let val = props.valueFormat
      if (!val) {
        switch (props.type) {
          case 'year':
            val = 'YYYY'
            break;
          case 'month':
            val = 'YYYY-DD'
            break;
          case 'week':
            val = ''
            break;
          default:
            val = 'YYYY-MM-DD'
        }
      }
      return val
    })
    return {
      ...toRefs(state),
      formatCpt,
      valueFormatCpt,
    }
  },
})
</script>

<style scoped lang="scss">
</style>
