<template>
	<div class="xd-day-range">
		<div class="xd-day-range__time" v-if="type">{{type}}</div>
		<el-time-picker
			class="xd-day-range__picker"
			is-range
			clearable
      :disabled="disabled"
			v-model="range"
			range-separator="至"
			:start-placeholder="start"
			:end-placeholder="end"
			placeholder="选择时间范围"
			:value-format="valueFormat"
			:picker-options="pickerOptions"
			@change="handleChange"
		>
		</el-time-picker>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  export default {
    name: "XdDayRange",
    mixins: [emitter],
		props:{
      defaultValue: {
        type: Array,
        default() {
          return []
        },
      },

      maps: {
        type: Object | null,
        default() {
          return null
        },
      },

      setting: {
        type: Object,
        default() {
          return {
            valueFormat: 'HH:mm'
					}
        },
      },

      disabled: {
        type: Boolean,
        default: false,
      },

      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },

      placeholder: {
        type: Object,
        default() {
          return {
            start: '开始时间',
						end: '结束时间',
          }
        },
      },
		},
		data(){
      return {
        range: [],
        start: '开始时间',
        end: '结束时间',
        valueFormat: 'HH:mm',
        pickerOptions: {format: 'HH:mm'},
        type: ''
			}
		},

		created(){
      if(this.$xdHelper.checkVarType(this.setting)=== 'object') {
        if (this.setting.valueFormat) this.valueFormat = this.setting.valueFormat;
        if (this.setting.type) this.type = this.setting.type;
        if (this.setting.pickerOptions && this.$xdHelper.checkVarType(this.setting.pickerOptions) === 'object') {
          this.pickerOptions = this.setting.pickerOptions;
				}
			}

      if(this.$xdHelper.checkVarType(this.placeholder) === 'object') {
        if (this.placeholder.start) this.start = this.placeholder.start;
        if (this.placeholder.end) this.end = this.placeholder.end;
			}

			if(this.$xdHelper.checkVarType(this.defaultValue) === 'array'
				&& this.defaultValue.length === 2
			) {
        this.range = this.defaultValue;
        this.update();
			}
			else{
        this.range = null
      }
		},

		methods: {
      handleChange(){
        this.change();
        this.update()
			},

      /**
			 * @description 需要校验检查参数是正确处理方法
       */
			checkParams(){
   			return this.range || [];
			},

			/**
			 * @description 数据改变事件
			 */
			change(){
			  this.$emit('onChange', this.checkParams())
			},


      /**
			 * @description 双向绑定数据处理
       */
			update(){
        this.$emit('input', this.checkParams());
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()]);
          this.dispatch('ElFormItem', 'el.form.blur', [this.checkParams()])
        }
			},


		}
  }
</script>

<style scoped lang="scss">
	.xd-day-range {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		&__time {
			flex-shrink: 0;
			margin-right: 5px;
		}

		&__picker {
			flex: 1;
			max-width: 300px;
		}

	}

	@media screen and (max-width: 768px) {
		.xd-day-range {
			&__picker {
				max-width: 100%;
			}
		}
	}
</style>
