import { Grid, GridItem, Icon, Popup, Sticky } from 'vant'
import { defineComponent } from 'vue'
import styles from './create.module.less'
import ClassInfo from './class-info'
import ClassContent from './class-content'
import { createState } from './createState'
import request from '@/helpers/request'

import nameActive from './images/icon_name_active.png'
import education from './images/icon_education.png'
import educationActive from './images/icon_education_active.png'
import CreateSubmit from './create-submit'
import ColHeader from '@/components/col-header'
import iconQuestion from '@/teacher/practice-class/tip-model/images/icon-question.png'
import TipModel from '../practice-class/tip-model'

export default defineComponent({
  name: 'Create',
  data() {
    return {
      tipStatus: false
    }
  },
  async created() {
    const query = this.$route.query
    createState.groupId = Number(query.groupId) || 0
    // 判断是否是编辑
    if (!createState.groupId) {
      return false
    }
    try {
      document.title = '修改视频课'
      createState.loadingStatus = true
      const res = await request.get(
        '/api-teacher/videoLessonGroup/selectVideoLesson',
        {
          params: {
            groupId: createState.groupId
          }
        }
      )
      const result = res.data
      const {
        auditStatus,
        lessonCoverUrl,
        lessonPrice,
        lessonDesc,
        payType,
        lessonSubject,
        lessonName,
        relationType,
        id,
        ...group
      } = result.lessonGroup
      // 判断模板图片是否在模板列表中，如果不在则是用户自己上传的图片
      const statusUrl = createState.templateList.includes(lessonCoverUrl)
        ? true
        : false
      createState.lessonGroup = {
        id: id,
        lessonName: lessonName,
        lessonSubject: lessonSubject,
        lessonDesc: lessonDesc,
        payType,
        lessonPrice: lessonPrice,
        relationType: 'RECOMMEND',
        lessonCoverTemplateUrl: statusUrl ? lessonCoverUrl : '',
        lessonCoverUrl: statusUrl ? '' : 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() {
    try {
      request
        .get('/api-teacher/sysConfig/queryByParamNameList', {
          params: {
            paramNames: 'video_lesson_service_fee,video_account_period'
          }
        })
        .then((res: any) => {
          console.log(res, 'res')
          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={styles['video-create']}>
        {createState.active <= 2 ? (
          <Sticky position="top" offsetTop={0} zIndex={999999}>
            <ColHeader
              border={false}
              isFixed={false}
              v-slots={{
                right: () => (
                  <img
                    src={iconQuestion}
                    class={styles.iconQuestion}
                    onClick={() => (this.tipStatus = true)}
                  />
                )
              }}
            />
            <Grid
              border={false}
              style={{ paddingTop: '15px' }}
              direction="horizontal"
              columnNum="2"
              class={styles.gridColumn}
            >
              <GridItem
                v-slots={{
                  default: () => (
                    <>
                      <Icon name={nameActive} size={38} />
                      <span
                        class={[
                          styles.gridName,
                          createState.active >= 1 ? styles.active : null
                        ]}
                      >
                        课程信息
                      </span>
                    </>
                  )
                }}
              />
              <GridItem
                v-slots={{
                  default: () => (
                    <>
                      <Icon
                        name={
                          createState.active === 2 ? educationActive : education
                        }
                        size={38}
                      />
                      <span
                        class={[
                          styles.gridName,
                          createState.active === 2 ? styles.active : null
                        ]}
                      >
                        课程内容
                      </span>
                    </>
                  )
                }}
              />
            </Grid>
          </Sticky>
        ) : null}
        {/* 课程信息 */}
        {createState.active === 1 ? (
          <>
            <ClassInfo />
          </>
        ) : null}
        {/* 课程内容 */}
        {createState.active === 2 ? (
          <>
            <ClassContent />
          </>
        ) : null}
        {/* 预览 */}
        {createState.active === 3 ? (
          <>
            <CreateSubmit />
          </>
        ) : null}

        <Popup
          show={this.tipStatus}
          class={styles.tipPopup}
          closeable
          onClose={() => (this.tipStatus = false)}
        >
          <TipModel
            onClose={() => (this.tipStatus = false)}
            title={'什么是视频课？'}
            content={
              '视频课是由教师事先精心准备并录制的课程内容。教师依据教学大纲和目标，系统规划每一节视频的主题与内容，确保教学的连贯性和完整性。在录制过程中，采用专业设备如高清摄像机和录屏软件，保障视频画质清晰、音频质量优良。视频课为学生提供了极大的学习灵活性，他们可以依据个人的时间安排自由选择学习时间，不受地点限制。特别适用于系统化学习体系的内容，视频课能够帮助学生按部就班地掌握知识，实现自主高效学习。'
            }
          />
        </Popup>
      </div>
    )
  }
})
