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

export default defineComponent({
  name: 'video-operation',
  data() {
    const query = this.$route.query
    return {
      type: query.type || 'create'
    }
  },
  async created() {
    // 重置数据
    resestState()
    const query = this.$route.query
    createState.groupId = Number(query.groupId) || 0
    // 判断是否是编辑
    if (!createState.groupId) {
      return false
    }
    try {
      createState.loadingStatus = true
      const res = await request.get(
        '/api-website/videoLessonGroup/selectVideoLesson',
        {
          params: {
            groupId: createState.groupId
          }
        }
      )
      const result = res.data
      const {
        auditStatus,
        lessonCoverUrl,
        lessonPrice,
        lessonDesc,
        lessonSubject,
        lessonName,
        id,
        ...group
      } = result.lessonGroup
      // 判断模板图片是否在模板列表中，如果不在则是用户自己上传的图片
      const statusUrl = createState.templateList.includes(lessonCoverUrl)
        ? true
        : false

      createState.lessonGroup = {
        id: id,
        lessonName: lessonName,
        lessonSubject: Number(lessonSubject),
        lessonDesc: lessonDesc,
        lessonPrice: lessonPrice,
        lessonCoverTemplateUrl: statusUrl ? lessonCoverUrl : '',
        lessonCoverUrl: statusUrl ? '' : lessonCoverUrl
      }

      createState.lessonList = []

      result.detailList &&
        result.detailList.forEach((item: any) => {
          createState.lessonList.push({
            videoTitle: item.videoTitle,
            videoContent: item.videoContent,
            videoUrl: item.videoUrl,
            coverUrl: item.coverUrl,
            posterUrl: item.posterUrl // 视频封面图
          })
        })
      createState.loadingStatus = false
    } catch {}
    if (
      createState.lessonGroup.lessonCoverUrl &&
      !createState.templateList.includes(createState.lessonGroup.lessonCoverUrl)
    ) {
      createState.tabIndex = 2
    } else {
      createState.tabIndex = 1
    }
  },
  async mounted() {
    document.title = this.type === 'create' ? '新建视频课' : '编辑视频课'
    try {
      const sysConfig = await request.get(
        '/api-website/sysConfig/queryByParamName',
        {
          params: {
            paramName: 'video_lesson_service_fee'
          }
        }
      )
      createState.rate = sysConfig.data.paramValue
    } catch {}
  },
  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-[60px] pr-7"
            type="large"
            active={createState.active}
          />

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