<script>
export default {
  data() {
    return {
      txtDate: '',
      result: ''
    }
  },
  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>'
        }
      }
    }
  }
}
</script>

<template>
  <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>
</template>

<style scoped>
</style>
