import { Button, Col, Radio, RadioGroup, Row, Tag, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './timer.module.less'
import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import iconQuestion from '../icon-question.png'
import ColField from '@/components/col-field'
import request from '@/helpers/request'
import { postMessage } from '@/helpers/native-message'
import TheSticky from '@/components/the-sticky'
import ColHeader from '@/components/col-header'
dayjs.extend(customParseFormat)
dayjs.extend(isSameOrBefore)

export default defineComponent({
  name: 'timer',
  data() {
    return {
      startSetting: '08:00',  // 开始设置时间
      endSetting: '18:00', // 结束设置时间
      // freeMinutes: 5, // 空余时长
      courseMinutes: 30, // // 课程时长
      timerObject: {},
      chargeTypeArr: {
        0: '否',
        1: '是'
      },
      timerList: [],
      skipHolidayFlag: 1,
      list: [] as any,
      weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      weekType: [
        'monday',
        'tuesday',
        'wednesday',
        'thursday',
        'friday',
        'saturday',
        'sunday'
      ]
    }
  },
  async mounted() {
   await this._initFetch()
    this.list = this.timerInit(
      this.startSetting,
      this.endSetting,
      this.courseMinutes || 30
    )
  },
  methods: {
    async _initFetch() {
      try {
        // 获取手续费和分钟数
        const { data } = await request.get(
          '/api-teacher/teacher/queryTeacherTime'
        )
        this.startSetting = data.startTime ? data.startTime: this.startSetting
        this.endSetting = data.endTime ? data.endTime: this.endSetting
        this.courseMinutes = data.intervalTime  ? data.intervalTime: this.courseMinutes
        
        // const configData = config.data || []
        // configData.forEach((item: any) => {
        //   if (item.paramName === 'course_start_setting') {
        //     this.startSetting = item.paramValue
        //   }
        //   if (item.paramName === 'course_end_setting') {
        //     this.endSetting = item.paramValue
        //   }
        // })
  
        // 获取课程设置
        const setting = await request.get('/api-teacher/teacherFreeTime/get')
        const sr = setting.data
        if (sr) {
          this.timerObject = {
            monday: sr.monday ? JSON.parse(sr.monday) : [],
            tuesday: sr.tuesday ? JSON.parse(sr.tuesday) : [],
            wednesday: sr.wednesday ? JSON.parse(sr.wednesday) : [],
            thursday: sr.thursday ? JSON.parse(sr.thursday) : [],
            friday: sr.friday ? JSON.parse(sr.friday) : [],
            saturday: sr.saturday ? JSON.parse(sr.saturday) : [],
            sunday: sr.sunday ? JSON.parse(sr.sunday) : []
          }
          this.skipHolidayFlag = sr.skipHolidayFlag ? 1 : 0
        }
  
        
      } catch {}
    },
    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
        })
      }
    },
    async 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').format('HH:mm:ss')
            })
          }
        })
      })
      await request.post('/api-teacher/teacherFreeTime/upSet', {
        data: {...weekList,
          skipHolidayFlag: this.skipHolidayFlag}
      })
      setTimeout(() => {
        Toast('设置成功')
      }, 100);
      setTimeout(() => {
        postMessage({ api: 'back', content: {} })
      }, 500)
    }
  },
  render() {
    return (
      <div class={styles.timer}>
        <ColHeader  />

        <ColField  border={false} class={styles.colField}>
          {{
            title: () => <div class={styles.title}>
              <img src={iconQuestion}></img>
              是否跳过节假日
            </div>,
            default: () =>　<RadioGroup
            class={styles['radio-group']}
            modelValue={this.skipHolidayFlag}
            onUpdate:modelValue={val => (this.skipHolidayFlag = val)}
          >
            {['1', '0'].map((item: string) => {
              const isActive =
                Number(item) === Number(this.skipHolidayFlag)
              const type = isActive ? 'primary' : 'default'
              return (
                <Radio class={styles.radio} name={item}>
                  <Tag size="large" plain={isActive} type={type}>
                    {this.chargeTypeArr[item]}
                  </Tag>
                </Radio>
              )
            })}
          </RadioGroup>
          }}
        </ColField>
        {/* <div class={styles.tips}>
          <div class={styles.tipsTitle}>请选择陪练开始时间</div>
          <div class={styles.tipsTime}>
            趣纠课单课时时长为 <span>{this.courseMinutes}</span> 分钟
          </div>
        </div> */}

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

          <Row gutter={5}>
            <Col span={3}></Col>
            {this.weekList.map((item: any, index: number) => (
              <Col span={3}>
                <span
                  class={[
                    styles.tag,
                    this.btnStatus(index, 'row') && styles.active
                  ]}
                  onClick={() =>
                    this.choice(index, 'row', this.btnStatus(index, 'row'))
                  }
                  title={item}
                >
                  全选
                </span>
              </Col>
            ))}
          </Row>

          {this.list.map((item: any, index: number) => (
            <Row gutter={5}>
              <Col span={3}>
                <span
                  class={[
                    styles.tag,
                    this.btnStatus(index, 'col') && styles.active
                  ]}
                  onClick={() =>
                    this.choice(index, 'col', this.btnStatus(index, 'col'))
                  }
                >
                  全选
                </span>
              </Col>
              {item.map((week: any) => (
                <Col span={3}>
                  <span
                    class={[styles.tag, week.status && styles.select]}
                    title={week}
                    style={{ color: '#333333' }}
                    onClick={() => (week.status = !week.status)}
                  >
                    {week.startTime}
                  </span>
                </Col>
              ))}
            </Row>
          ))}
        </div>

        <TheSticky position='bottom' >
          <div class={['btnGroup', styles.btnGroupTimer]}>
            <Button block round type="primary" onClick={this.onSubmit}>
              确认
            </Button>
          </div>
        </TheSticky>
      </div>
    )
  }
})
