colexiu-project/src/views/user-info/model/practice-timer/index.tsx

import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)
dayjs.extend(isSameOrBefore)
import { ElButton, ElCol, ElRow } from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'practice-timer',
  props: {
    timerObject: {
      // 传入的数据
      type: Object,
      default: {}
    },
    onClose: {
      type: Function,
      default: () => {}
    },
    onChoice: {
      // 点击选择时间
      type: Function,
      default: (item: any) => {}
    },
    courseMinutes: {
      // 课程时长
      type: Number,
      default: 25
    },
    freeMinutes: {
      // 空余时长
      type: Number,
      default: 5
    },
    startSetting: {
      // 开始设置时间
      type: String,
      default: '08:00'
    },
    endSetting: {
      // 结束设置时间
      type: String,
      default: '18:00'
    }
  },
  data() {
    return {
      timerList: [],
      list: [] as any,
      weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      weekType: [
        'monday',
        'tuesday',
        'wednesday',
        'thursday',
        'friday',
        'saturday',
        'sunday'
      ]
    }
  },
  mounted() {
    this.list = this.timerInit(
      this.startSetting,
      this.endSetting,
      this.courseMinutes + this.freeMinutes || 30
    )
    console.log(this.endSetting)
  },
  methods: {
    timerInit(startTime: string, endTime: string, space: number) {
      let start = dayjs(startTime, 'HH:mm')
      const end = dayjs(endTime, 'HH:mm')

      const timerList: any = []
      // 生成一天的时间段
      while (start.add(space, 'minute').isSameOrBefore(dayjs(end))) {
        const item = {
          startTime: start.format('HH:mm'),
          endTime: start.add(space, 'minute').format('HH:mm'),
          status: false
        }
        // 一周
        timerList.push(item)
        start = start.add(space, 'minute')
      }
      const list: any = []
      // 生成一周的时间段
      timerList.forEach((item: any) => {
        const weekList: any = []
        for (let i = 0; i < 7; i++) {
          weekList.push({
            ...item
          })
        }
        list.push(weekList)
      })

      const tempList = this._initData(list)
      return tempList
    },
    _initData(list: Array<any>) {
      // 回显数据
      const weekType = this.weekType
      const timerObject = this.timerObject
      list.forEach((item: any) => {
        item.forEach((slot: any, slotIndex: number) => {
          const dayList = timerObject[weekType[slotIndex]]
          const startTime = dayjs(slot.startTime, 'HH:mm').format('HH:mm:ss')
          const isExist = dayList?.some(
            (course: any) => course.startTime === startTime
          )
          isExist && (slot.status = true)
        })
      })
      return list
    },
    btnStatus(index: number, type: 'row' | 'col') {
      if (type === 'row') {
        return this.list.every((item: any) => {
          return item[index].status
        })
      }

      if (type == 'col') {
        return this.list[index].every((item: any) => item.status)
      }
    },
    choice(index: number, type: 'row' | 'col', status?: boolean) {
      if (type === 'row') {
        this.list.forEach((item: any, i: number) => {
          const type = !status ? true : false
          item[index].status = type
        })
      }

      if (type == 'col') {
        this.list[index].forEach((item: any, i: number) => {
          const type = !status ? true : false
          item.status = type
        })
      }
    },
    onSubmit() {
      const list = this.list
      const weekList = {
        monday: [],
        tuesday: [],
        wednesday: [],
        thursday: [],
        friday: [],
        saturday: [],
        sunday: []
      }
      const weekType = this.weekType
      let status = false
      list.forEach((item: any, i: number) => {
        item.forEach((times: any, j: number) => {
          if (times.status) {
            status = true
            weekList[weekType[j]].push({
              startTime: dayjs(times.startTime, 'HH:mm').format('HH:mm:ss'),
              endTime: dayjs(times.endTime, 'HH:mm')
                .subtract(this.freeMinutes, 'minute')
                .format('HH:mm:ss')
            })
          }
        })
      })
      this.onChoice && this.onChoice(weekList, status)
    }
  },
  render() {
    return (
      <div class={styles.timer}>
        <div class={styles.tips}>
          <div class={styles.tipsTitle}>请选择陪练开始时间</div>
          <div class={styles.tipsTime}>
            陪练课单课时时长为 <span>{this.courseMinutes}</span> 分钟
          </div>
        </div>

        <div class={[styles.timerContainer, 'mb12']}>
          <ElRow gutter={5}>
            <ElCol span={3} class={[styles.tag]}></ElCol>
            {this.weekList.map((item: any) => (
              <ElCol span={3}>
                <span class={styles.tag}>{item}</span>
              </ElCol>
            ))}
          </ElRow>

          <ElRow gutter={5} class="pt-1">
            <ElCol span={3} class={[styles.tag]}></ElCol>
            {this.weekList.map((item: any, index: number) => (
              <ElCol span={3}>
                <span
                  class={[
                    styles.tag,
                    'cursor-pointer',
                    this.btnStatus(index, 'row') && styles.active
                  ]}
                  onClick={() =>
                    this.choice(index, 'row', this.btnStatus(index, 'row'))
                  }
                >
                  全选
                </span>
              </ElCol>
            ))}
          </ElRow>

          <div class="h-72 overflow-y-auto overflow-x-hidden">
            {this.list.map((item: any, index: number) => (
              <ElRow gutter={5} class="pt-1">
                <ElCol span={3}>
                  <span
                    class={[
                      styles.tag,
                      'cursor-pointer',
                      this.btnStatus(index, 'col') && styles.active
                    ]}
                    onClick={() =>
                      this.choice(index, 'col', this.btnStatus(index, 'col'))
                    }
                  >
                    全选
                  </span>
                </ElCol>
                {item.map((week: any) => (
                  <ElCol span={3}>
                    <span
                      class={[
                        styles.tag,
                        'cursor-pointer',
                        week.status && styles.select
                      ]}
                      style={{ color: '#333333' }}
                      onClick={() => (week.status = !week.status)}
                    >
                      {week.startTime}
                    </span>
                  </ElCol>
                ))}
              </ElRow>
            ))}
          </div>
        </div>

        {/* <Sticky offsetBottom={0} position="bottom"> */}
        <div class="text-center pt-3 pb-5">
          <ElButton
            class="!w-40 !h-[48px] !text-base"
            round
            onClick={() => {
              this.onClose()
            }}
          >
            取消
          </ElButton>
          <ElButton
            type="primary"
            class="!w-40 !h-[48px] !text-base"
            onClick={this.onSubmit}
            round
          >
            保存设置
          </ElButton>
        </div>
        {/* </Sticky> */}
      </div>
    )
  }
})