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'
import VideoTcplayer from '@/components/video-tcplayer'

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,
        payType,
        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,
        payType,
        lessonPrice: lessonPrice,
        relationType: 'RECOMMEND',
        // lessonCoverTemplateUrl: statusUrl ? lessonCoverUrl : '',
        lessonCoverUrl: lessonCoverUrl
      }

      createState.lessonList = []

      result.detailList &&
        result.detailList.forEach((item: any) => {
          const tempInfo = item.musicAlbumInfos || []
          const relationList = tempInfo.map((info: any) => {
            return {
              relationMusicAlbum: info.relationType,
              musicAlbumName: info.name,
              musicAlbumId: info.musicAlbumId,
              relationId: info.id,
              useRelationType: 'RECOMMEND'
            }
          })
          createState.lessonList.push({
            videoTitle: item.videoTitle,
            videoContent: item.videoContent,
            videoUrl: item.videoUrl,
            coverUrl: item.coverUrl,
            relationList,
            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
      request
        .get('/api-website/sysConfig/queryByParamNameList', {
          params: {
            paramNames: 'video_lesson_service_fee,video_account_period'
          }
        })
        .then((res: any) => {
          const data = res.data || []
          data.forEach((item: any) => {
            if (item.paramName === 'video_lesson_service_fee') {
              createState.rate = item.paramValue
            } else if (item.paramName === 'video_account_period') {
              createState.video_account_period = item.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>
      </>
    )
  }
})
