<script>
export default {
  data() {
    return {
      txtDate: '',
      result: '',
      txtStart: '',
      txtInterval: '',
      txtLastInterval: '',
      resultList: '',
      txtCount: '',
      txtRestInterval: '',
      txtRestIdx: '',
      txtRestTime: '',
      txtLastTime: '',
      needClean: true
    }
  },
  methods: {
    getTime() {
      if (this.txtDate.length > 0) {
        this.result = ''
        const dateList = this.txtDate.split(/\n/)
        for (let dateStr of dateList) {
            const curArr = dateStr.split('-')
            const start = new Date(`2023-03-01 ${curArr[0]}`).getTime()
            const end = new Date(`2023-03-01 ${curArr[1]}`).getTime()

            this.result += '<p>' + `<span style="font-weight: 600; color: green;width: 120px; display:inline-block;margin-right: 16px;">${dateStr}</span>${parseFloat((end-start)/1000/60)}分钟` + '</p>'
        }
      }
    },
    setNum(num) {
      return num >= 10 ? num : '0' + num
    },
    getSchedule() {
      let result = ''
      let dateTime = ''
      if (this.txtStart.trim().length > 0 && this.txtInterval.trim().length > 0 && this.txtCount.trim().length > 0) {
        const count = this.txtLastInterval.trim().length > 0 ? parseInt(this.txtCount) - 1 : parseInt(this.txtCount)
        const interval = parseInt(this.txtInterval) * 60 * 1000
        dateTime = new Date(`2023-03-01 ${this.txtStart}`).getTime()
        for (let index = 1; index <= parseInt(count); index++) {
          const curDate = new Date(dateTime)
          dateTime += interval
          const endDate = new Date(dateTime)
          result += `<p>
                      <span style="font-weight: 600; color: green;width: 120px; display:inline-block;margin-right: 16px;">【场次${index}】</span>
                      ${this.setNum(curDate.getHours())}:${this.setNum(curDate.getMinutes())}-${this.setNum(endDate.getHours())}:${this.setNum(endDate.getMinutes())}
                    </p>`

          if (this.txtRestIdx.trim().length > 0 && parseInt(this.txtRestIdx) === index) {
            // 分割间歇
            const restTime = this.txtRestInterval.trim().length > 0 ? parseFloat(this.txtRestInterval) * 60 * 60 * 1000 : 0
            dateTime += restTime
          } else if (index < count && this.txtIntervalRest.trim().length > 0) {
            // 演出间歇
            const intervalRestTime = parseFloat(this.txtIntervalRest) * 60 * 1000
            dateTime += intervalRestTime
          } else if(index === count && this.txtLastInterval.trim().length > 0) {
            // 演出间歇
            const lastInterval = parseFloat(this.txtLastInterval) * 60 * 1000
            dateTime += lastInterval
          }
        }
        console.log('result', result)
      } else {
        this.resultList = '';
        return false
      }
      if(this.txtLastInterval.length > 0) {
        const curDate = new Date(dateTime)
        const lastTime = parseFloat(this.txtLastInterval) * 60 * 1000
        dateTime += lastTime
        const endDate = new Date(dateTime)
        result += `<p>
                    <span style="font-weight: 600; color: green;width: 120px; display:inline-block;margin-right: 16px;">【场次${this.txtCount}】</span>
                    ${this.setNum(curDate.getHours())}:${this.setNum(curDate.getMinutes())}-${this.setNum(endDate.getHours())}:${this.setNum(endDate.getMinutes())}
                  </p>`
      }
      if (this.needClean) {
        this.resultList = result;
      } else {
        this.resultList += this.resultList.length > 0 ? '<hr>' : ''
        this.resultList += result;
      }
    }
  }
}
</script>

<template>
  <section class="bg-01">
    <header>
      <div class="wrapper">
        <h1>时间间隔计算器</h1>
      </div>
    </header>
    <main>
      <textarea cols="30" rows="10" v-model="txtDate"></textarea>
      <div>
        <button @click="getTime">计算</button>
      </div>
      <br>
      <p>输入结果：</p>
      <div class="result" v-html="result"></div>
    </main>
  </section>
  <section class="bg-02">
    <header class="mt16">
      <div class="wrapper">
        <h1>时间排序计算器</h1>
      </div>
    </header>
    <main>
      <div class="txt-box">
        <label for="txtStart">起始时间：</label>
        <input v-model="txtStart" type="text" name="" id="txtStart">（必填项，24小时制）
      </div>
      <div class="txt-box">
        <label for="txtCount">总计场次：</label>
        <input v-model="txtCount" type="text" name="" id="txtCount">（必填项，不含压轴）
      </div>
      <div class="txt-box">
        <label for="txtInterval">演出时长：</label>
        <input v-model="txtInterval" type="text" name="" id="txtInterval">（必填项，分钟）
      </div>
      <div class="txt-box">
        <label for="txtIntervalRest">演出间歇：</label>
        <input v-model="txtIntervalRest" type="text" name="" id="txtIntervalRest">（分钟）
      </div>
      <div class="txt-box">
        <label for="txtLastInterval">压轴间隔：</label>
        <input v-model="txtLastInterval" type="text" name="" id="txtLastInterval">（分钟）
      </div>
      <div class="txt-box">
        <label for="txtLastTime">压轴时长：</label>
        <input v-model="txtLastTime" type="text" name="" id="txtLastTime">（分钟）
      </div>
      <div class="txt-box">
        <label for="txtRestIdx">分割场次：</label>
        <input v-model="txtRestIdx" type="text" name="" id="txtRestIdx">（第几场后休息）
      </div>
      <div class="txt-box">
        <label for="txtRestInterval">分割间隙：</label>
        <input v-model="txtRestInterval" type="text" name="" id="txtRestInterval">（小时）
      </div>
      <div>
        <button @click="getSchedule">计算</button> <input type="checkbox" name="" id="chkNeedClean" v-model="needClean"><label for="chkNeedClean">清空历史结果</label>
      </div>
      <br>
      <p>输入结果：</p>
      <div class="result" v-html="resultList"></div>
    </main>
  </section>
</template>

<style scoped>
header, main {
  grid-column-start: 1;
 grid-column-end: 4;
}
section {
  padding: 16px;
}
.result {
  padding: 16px;
  background-color: #fff;
  border: 1px solid #000;
}
section.bg-01 {
  background-color: #d0e4a8;
}
section.bg-01  .result {
  border-color: rgb(1, 178, 1);
}
section.bg-02{
  background-color: #f5f5d5;
}
section.bg-02  .result {
  border-color: orange;
}

</style>
