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'

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

      let teacher = await request.post('/api-teacher/teacher/querySubject')
      createState.subjectList = teacher.data || []
    } catch (err: any) {
      console.log(err)
    }
  },
  render() {
    return (
      <div class={styles['live-create']}>
        {createState.active !== 5 && (
          <Sticky position="top" offsetTop={0}>
            <Steps
              style={{ backgroundColor: '#f6f8f9', paddingBottom: '12px' }}
            />
          </Sticky>
        )}

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

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

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

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

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