<template>
  <div>
    <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>{{timeLength}}</span>
<!--        <span>{{type==='daterange'? parseInt(timeLength)+1: timeLength }}</span>-->
      </div>
    </template>
  </div>
</template>

<script>
import componentMinxins from "../ComponentMinxins";
import moment from "moment";
import {timeLength} from '@/utils/date'
export default {
  mixins: [componentMinxins],
  name: "DateTimeRange",
  components: {},
  props: {
    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
    }
  },
  computed: {
    type() {
      switch (this.format) {
        case "yyyy-MM-dd":
          return "daterange";
        case "yyyy-MM-dd HH:mm":
          return "datetimerange";
        default:
          return "daterange";
      }
    },
    timeLength() {
      //求时长算法
      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  timeLength(this.value[0],this.value[1])
      } else {
        return "先选择时间哦";
      }
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

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

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

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