import { defineComponent } from 'vue'
import Steps from './create-components/steps'
import { createState } from './create-components/createState'
import Course from './create-components/course'
import CoursePlan from './create-components/course-plan'
import CourseStart from './create-components/course-start'
import Detail from './create-components/detail'
import { Popup, Sticky } from 'vant'
import Arrange from './create-components/arrange'
import request from '@/helpers/request'
import styles from './create.module.less'
import ColHeader from '@/components/col-header'
import TheSticky from '@/components/the-sticky'
import iconQuestion from '@/teacher/practice-class/tip-model/images/icon-question.png'
import TipModel from '../practice-class/tip-model'

export default defineComponent({
  name: 'LiveCreate',
  data() {
    return {
      tipStatus: false
    }
  },
  async mounted() {
    try {
      // 获取手续费和分钟数
      const config = await request.get(
        '/api-teacher/sysConfig/queryByParamNameList',
        {
          params: {
            paramNames: 'group_service_rate,group_time_setting,group_max_student_num'
          }
        }
      )
      const configData = config.data || []
      configData.forEach((item: any) => {
        if (item.paramName === 'group_time_setting') {
          const mins = item.paramValue ? JSON.parse(item.paramValue) : []
          const tempArr = [] as any
          mins.forEach((item: any) => {
            tempArr.push({
              ...item,
              name: item.courseMinutes
            })
          })
          createState.minutes = [...tempArr]
        }
        if (item.paramName === 'group_service_rate') {
          createState.rate = item.paramValue
        }
        // 最大成课人数
        if(item.paramName === "group_max_student_num") {
          createState.live.maxStudentNum = item.paramValue
        }
      })

      const teacher = await request.post('/api-teacher/teacher/querySubject')
      createState.subjectList = teacher.data || []
    } catch (err: any) {
      console.log(err)
    }
    this.getLiveClassDetail()
  },
  methods: {
    // 获取直播课详情
    async getLiveClassDetail() {
      const groupId = this.$route.query.groupId
      if (!groupId) return
      const res = await request.get(
        `/api-teacher/courseGroup/queryLiveCourseInfo?groupId=${groupId}`
      )
      console.log(res, createState)
      if (res.code == 200) {
        const data = res.data
        createState.live.courseGroupId = data.courseGroupId
        createState.live.teacherId = data.teacherId
        createState.live.name = data.courseGroupName
        createState.live.subjectId =
          (
            createState.subjectList.find(
              (n: any) => n.name === data.subjectName
            ) as any
          )?.id || ''
        createState.live.courseIntroduce = data.courseIntroduce
        createState.live.courseNum = data.courseNum
        createState.live.singleMins = data.singleCourseMinutes
        createState.live.coursePrice = data.coursePrice
        createState.live.coursePlanList = data.planList
        createState.live.salesStartDate = data.salesStartDate
        createState.live.salesEndDate = data.salesEndDate
        createState.live.mixStudentNum = data.mixStudentNum
        createState.live.backgroundPic = data.backgroundPic
      }
    }
  },
  render() {
    return (
      <div class={styles['live-create']}>
        <TheSticky position="top">
          <ColHeader border={false} v-slots={{
                right: () => (
                  <img
                    src={iconQuestion}
                    class={styles.iconQuestion}
                    onClick={() => (this.tipStatus = true)}
                  />
                )
              }} />
          {createState.active !== 5 && (
            <Steps
              style={{ backgroundColor: '#f6f8f9', paddingBottom: '12px' }}
            />
          )}
        </TheSticky>

        {createState.active === 1 && <Course />}

        {createState.active == 2 && <CoursePlan />}

        {createState.active == 3 && <Arrange />}

        {createState.active == 4 && <CourseStart />}

        {createState.active == 5 && <Detail />}

        <Popup
          show={this.tipStatus}
          class={styles.tipPopup}
          closeable
          onClose={() => (this.tipStatus = false)}
        >
          <TipModel
            onClose={() => (this.tipStatus = false)}
            title={'什么是小组课？'}
            content={
              '小组课是老师根据教学目的编排的课程，固定时间进行1V5线上授课。您可根据老师开放的课程内容和您的时间安排，选择您感兴趣的课程组进行学习。'
            }
          />
        </Popup>
      </div>
    )
  }
})