<template>
  <div :class="inline ? 'inline' : ''" class="QdmPickeMain">
    <div class="QdmPicke" v-if="type === 'time'">
      <span :style="'width:' + colSpan + 'px;text-align:' + align + ';'"><i v-if="must">*</i>{{ name }}</span>
      <el-time-select
      v-model="newValue"
      :class="col"
      :placeholder="placeholder"
      :disabled="disabled"
      @change="pickerChange">
      </el-time-select>
    </div>
    <div class="QdmPicke" v-else-if="type === 'date'">
      <span :style="'width:' + colSpan + 'px;text-align:' + align + ';'"><i v-if="must">*</i>{{ name }}</span>
      <el-date-picker
	      :class="col"
	      v-model="newValue"
	      type="date"
	      :placeholder="placeholder"
	      value-format="YYYY-MM-DD"
	      :disabled="disabled"
	      @change="pickerChange">
	    </el-date-picker>
    </div>
    <div class="QdmPicke" v-else-if="type === 'datetime'">
    	<span :style="'width:' + colSpan + 'px;text-align:' + align + ';'"><i v-if="must">*</i>{{ name }}</span>
	    <el-date-picker
	    	:class="col"
	      v-model="newValue"
	      value-format="YYYY-MM-DD HH:mm:ss"
	      type="datetime"
	      :disabled="disabled"
	      :placeholder="placeholder"
	      @change="pickerChange">
	    </el-date-picker>
    </div>
    <div class="QdmPicke" v-else-if="type === 'daterange' || type === 'datetimerange'">
      <span :style="'width:' + colSpan + 'px;text-align:' + align + ';'"><i v-if="must">*</i>{{ name }}</span>
      <el-date-picker
      :class="timeCol"
      v-model="newValue"
      :value-format="type === 'datetimerange' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
      :type="type"
      :disabled="disabled"
      :range-separator="separator"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      @change="pickerChange">
      </el-date-picker>
    </div>
    <div class="QdmPicke" v-else-if="type === 'range'">
      <span :style="'width:' + colSpan + 'px;text-align:' + align + ';'"><i v-if="must">*</i>{{ name }}</span>
      <el-time-picker
      is-range
      :class="timeCol"
      v-model="newValue"
      value-format="HH:mm:ss"
      :type="type"
      :disabled="disabled"
      :range-separator="separator"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      @change="pickerChange">
      </el-time-picker>
    </div>
  </div>
</template>
<script>
export default {
  name: "QdmPicke",
  props: {
    type: {
      type: String,
      default: 'date'
    },
    value: {
      type: String,
      default: ''
    },
    timeValue: {
    	type: Array,
      default: () => {
        return []
      }
    },
    name: {
      type: String,
      default: ''
    },
    col: {
      type: String,
      default: 'small'
    },
    timeCol: {
      type: String,
      default: 'large'
    },
    colSpan: {
      type: Number,
      default: 60
    },
    align: {
    	type: String,
      default: 'right'
    },
    inline: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    must: {
      type: Boolean,
      default: false
    },
    separator: {
      type: String,
      default: '至'
    },
    startPlaceholder: {
      type: String,
      default: '开始时间'
    },
    endPlaceholder: {
      type: String,
      default: '结束时间'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      newValue: this.type === 'daterange' || this.type === 'datetimerange' || this.type === 'range' ? this.timeValue : this.value
    }
  },
  methods: {
    pickerChange(val) {
      this.$emit('pickeReturn', val)
    }
  },
  watch: {
  	timeValue(val) {
  		this.newValue = val
  	},
  	value(val) {
  		this.newValue = val
  	}
  }
}
</script>
<style lang="less">
.inline {
  float: left;
}
.QdmPickeMain {
	margin-bottom: 8px;
}
.QdmPicke {
	margin-right: 10px;
  height: 30px;
  >span {
	  display: block;
	  height: 30px;
	  float: left;
	  line-height: 30px;
	  padding-right: 8px;
	  font-size: 12px;
	  >i {
	    color: #F5222D;
	    margin-right: 5px;
	    padding-left: 3px;
	  }
	}
  .el-input {
    float: left;
    font-size: 12px;
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-input__icon {
      line-height: 30px;
    }
    &.large {
      width: 320px;
    }
    &.medium {
      width: 250px;
    }
    &.small {
      width: 180px;
    }
    &.mini {
      width: 100px;
    }
  }
  .el-range-editor {
    height: 30px;
    line-height: 30px;
    float: left;
    .el-range__icon, .el-range-separator, .el-range__close-icon {
      line-height: 22px;
      font-size: 12px;
    }
    .el-range-input {
      font-size: 12px;
    }
    &.large {
      width: 320px;
    }
    &.medium {
      width: 250px;
    }
    &.small {
      width: 180px;
    }
    &.mini {
      width: 100px;
    }
  }
}
</style>