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 { 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'

export default defineComponent({
  name: 'LiveCreate',
  async mounted() {
    try {
      // 获取手续费和分钟数
      const config = await request.get(
        '/api-teacher/sysConfig/queryByParamNameList',
        {
          params: {
            paramNames: 'live_service_rate,live_time_setting'
          }
        }
      )
      const configData = config.data || []
      configData.forEach((item: any) => {
        if (item.paramName === 'live_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 === 'live_service_rate') {
          createState.rate = 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} />
          {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 />}
      </div>
    )
  }
})
