import ColSteps from '@/components/col-steps'
import request from '@/helpers/request'
import { defineComponent } from 'vue'
import CourseClass from './course-class'
import CourseContent from './course-content'
import CourseInfo from './course-info'
import CoursePlan from './course-plan'
import { createState, resestState } from './createState'

export default defineComponent({
  name: 'live-operatoin',
  data() {
    const query = this.$route.query
    return {
      type: query.type || 'create'
    }
  },
  created() {
    resestState()
    this.getLiveClassDetail()
  },
  methods: {
    // 获取直播课详情
    async getLiveClassDetail() {
      const groupId = this.$route.query.groupId
      if (!groupId) return
      const res = await request.get(
        `/api-website/courseGroup/queryLiveCourseInfo?groupId=${groupId}`
      )
      console.log(res, [...createState.subjectList])
      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.subjectName = data.subjectName
        createState.live.courseIntroduce = data.courseIntroduce
        createState.live.courseNum = data.courseNum
        createState.live.singleMins = data.singleCourseMinutes
        createState.live.coursePrice = data.coursePrice
        const list = data.planList.map(n => {
          if (n.startTime && n.endTime) {
            n.start = n.startTime.split(' ')[1]
            n.end = n.endTime.split(' ')[1]
          }
          return n
        })
        createState.live.coursePlanList = list
        createState.selectCourseList = list
        createState.live.salesStartDate = data.salesStartDate
        createState.live.salesEndDate = data.salesEndDate
        createState.live.mixStudentNum = data.mixStudentNum
        // createState.live.coursePrice = data.singleCourseMinutes
        createState.live.backgroundPic = data.backgroundPic
      }
    }
  },
  render() {
    return (
      <>
        <div class="text-2xl font-semibold text-black leading-none px-6 py-5 ">
          {this.type === 'create' ? '新建直播课' : '编辑直播课'}
        </div>

        <div class="pt-12">
          <ColSteps
            class="pl-[58px] pr-7"
            type="small"
            active={createState.active}
          />

          {createState.active === 0 && <CourseInfo />}
          {createState.active === 1 && <CoursePlan />}
          {createState.active === 2 && <CourseContent />}
          {createState.active === 3 && <CourseClass />}
        </div>
      </>
    )
  }
})
