<template>
    <template v-if="mode === 'DESIGN'">
      <el-date-picker size="medium" v-model="_value" disabled :type="type" :start-placeholder="placeholder[0]"
                      :end-placeholder="placeholder[1]"/>
      <div v-if="showLength" class="length">
        <span>时长：</span>
        <span>{{ timeLength }}</span>
      </div>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-date-picker v-model="_value" size="medium" clearable :value-format="format" :type="type"
                        :start-placeholder="placeholder[0]" :end-placeholder="placeholder[1]"/>
      </template>
      <template v-else-if="perm === 'R'">
<!--        <div v-if="type==='daterange'">-->
<!--          <span style="float:left;">{{_value[0]}}</span>-->
<!--          <span style="padding:0 9px">至</span>-->
<!--          <span>{{ _value[1] }}</span>-->
<!--        </div>-->
        <div>
          <span style="float:left;">{{ _value[0] }}</span>
          <span style="padding:0 9px">至</span>
          <span>{{ _value[1] }}</span>
        </div>
      </template>
      <div v-if="showLength" class="length">
        <span>时长：</span>
        <span>{{timeLengthFiled}}</span>
<!--        <span>{{type==='daterange'? parseInt(timeLength)+1: timeLength }}</span>-->
      </div>
    </template>
</template>




<script setup>
import {defineProps,defineEmits} from 'vue'
// import {timeLength} from '../utils/date'
const emit = defineEmits()

const props = defineProps({
  mode:{
    type: String,
    default: 'DESIGN'
  },
  required:{
    type: Boolean,
    default: false
  },
  value: {
    type: Array,
    default: () => {
      return [];
    }
  },
  perm: {
    type: String,
    default: "E"
  },
  format: {
    type: String,
    default: "YYYY-MM-DD HH:mm"
  },
  placeholder: {
    type: Array,
    default: () => {
      return ["开始时间", "结束时间"];
    }
  },
  showLength: {
    type: Boolean,
    default: false
  },
  length: {
    type: Number,
    default: 0
  }
})


const type = computed(()=>{
  switch (props.format) {
    case "YYYY-MM-DD":
      return "daterange";
    case "YYYY-MM-DD HH:mm":
      return "datetimerange";
    default:
      return "daterange";
  }
})

const timeLengthFiled = computed(()=>{
  //求时长算法
  if (Array.isArray(this.value)) {
    // let start = moment(this.value[0]).format(this.format.replaceAll("dd", "DD"));
    // let end = moment(this.value[1]).format(this.format.replaceAll("dd", "DD"));
    if (this.value[0] === this.value[1]) {
      return "0 （时长为0，请确认）";
    }
    return "先选择时间哦";
    // return timeLength(this.value[0],this.value[1])
  } else {
    return "先选择时间哦";
  }
})

const _value = computed({
  get() {
    return props.value;
  },
  set(value) {
    emit('update:value', value)
  }
})
watch(()=>props.value,(value)=>{
  _value.value = value
})

</script>

<style scoped>
.length {
  margin-top: 5px;
}

.length:nth-child(2) {
  color: #8c8c8c;
}

.el-date-editor--datetimerange.el-input__inner {
  width: 100%;
  max-width: 400px;
}
</style>
