import dayjs from 'dayjs'
import Calendar from '@/business-components/calendar'
import { Button, Cell, Dialog, Popup, Tag } from 'vant'
import { defineComponent } from 'vue'
import styles from './practice-calendar.module.less'
import { getWeekCh } from '@/helpers/utils'
import request from '@/helpers/request'
import { state } from '@/state'

export default defineComponent({
  name: 'practice-calendar',
  props: {
    courseNum: {
      type: Number,
      default: 4
    },
    teacherId: {
      type: [Number, String],
      default: ''
    },
    onSubmit: {
      type: Function,
      default: (item: any) => {}
    }
  },
  data() {
    return {
      calendarList: [] as any,
      selectCourseList: [] as any
    }
  },
  computed: {
    showSelectList() {
      const arr: any = this.selectCourseList
      let list = [...arr]
      list.forEach((item: any) => {
        item.title =
          dayjs(item.startTime).format('YYYY-MM-DD') +
          ' ' +
          getWeekCh(dayjs(item.startTime).day()) +
          ' ' +
          item.start +
          '~' +
          item.end
      })
      return list
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList(date?: Date) {
      try {
        let params = {
          day: dayjs(date || new Date()).format('DD'),
          month: dayjs(date || new Date()).format('MM'),
          year: dayjs(date || new Date()).format('YYYY')
        }
        let res = await request.post(
          '/api-student/courseSchedule/createPracticeCourseCalendar',
          {
            data: {
              ...params,
              studentId: state.user.data?.userId,
              teacherId: this.teacherId
            }
          }
        )
        const result = res.data || []
        let tempObj = {}
        result.forEach((item: any) => {
          tempObj[item.date] = item
        })
        this.calendarList = tempObj
      } catch {}
    },
    onSelectDay(obj: any) {
      const result = obj || []
      let list = [...this.selectCourseList] as any
      console.log(obj, list)
      result.forEach((item: any) => {
        const isExist = list.some(
          (course: any) => course.startTime === item.startTime
        )
        !isExist && list.push({ ...item })
      })
      // 去掉不在
      list.forEach((item: any) => {
        const isExist = result.some(
          (course: any) => course.startTime === item.startTime
        )
        const index = result.findIndex(
          (course: any) => course.startTime === item.startTime
        )
        !isExist && list.splice(index, 1)
      })
      // 对数组进行排序
      list.sort((first: any, second: any) => {
        if (first.startTime > second.startTime) return 1
        if (first.startTime < second.startTime) return -1
        return 0
      })
      console.log(list, 'list')
      this.selectCourseList = [...list] as any
    },
    onCloseTag(item: any) {
      Dialog.confirm({
        title: '提示',
        message: '您是否要删除该选择的课程？',
        confirmButtonColor: 'var(--van-primary)'
      }).then(() => {
        const index = this.selectCourseList.findIndex(
          (course: any) => course.startTime === item.startTime
        )
        this.selectCourseList.splice(index, 1)
      })
    }
  },
  render() {
    return <></>
  }
})
