import { defineComponent } from 'vue'
import styles from './create-submit.module.less'
import UserDetail from '@/business-components/user-detail'
import SectionDetail from '@/business-components/section-detail'
import CourseVideoItem from '@/business-components/course-video-item'
import { Button, Sticky, Toast } from 'vant'
import { createState } from './createState'
import { state } from '@/state'
import request from '@/helpers/request'
import { postMessage } from '@/helpers/native-message'

export default defineComponent({
  name: 'CreateSubmit',
  computed: {
    userInfo() {
      const videoDetail = createState.lessonGroup
      const users = state.user.data || {}
      return {
        username: users.username || `游客${users.id || ''}`,
        headUrl: users.headUrl,
        lessonName: videoDetail.lessonName,
        buyNum: 0,
        lessonDesc: videoDetail.lessonDesc,
        lessonPrice: videoDetail.lessonPrice,
        lessonCoverUrl:
          videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl,
        lessonNum: createState.lessonList.length,
        auditVersion: 0
      }
    },
    lessonList() {
      const lessonList = createState.lessonList || []
      lessonList.forEach((item: any) => {
        const relationList = item.relationList
        const temp = [] as any
        relationList.forEach((relation: any) => {
          // 判断是否有选择专辑或曲目
          if (relation.musicAlbumId) {
            temp.push(relation)
          }
        })
        item.relationList = temp
      })
      return createState.lessonList || []
    },
    groupId() {
      const query = this.$route.query
      return query.groupId || ''
    }
  },
  methods: {
    async onSubmit() {
      try {
        const videoDetail = createState.lessonGroup
        const params = {
          lessonList: this.lessonList,
          lessonGroup: {
            ...videoDetail,
            lessonCoverUrl:
              videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl
          }
        }
        if (createState.groupId) {
          await request.post('/api-teacher/videoLessonGroup/update', {
            data: params
          })
          Toast.success('修改成功')
        } else {
          await request.post('/api-teacher/videoLessonGroup/add', {
            data: params
          })
          Toast.success('创建成功')
        }
        setTimeout(() => {
          postMessage({ api: 'back' })
        }, 1000)
      } catch {}
    }
  },
  render() {
    return (
      <div class={[styles.createSubmit]}>
        <UserDetail userInfo={this.userInfo} />
        <SectionDetail>
          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
        </SectionDetail>

        <SectionDetail title="课程列表" icon="courseList" class="mb12">
          {this.lessonList.map((item: any) => {
            const relationList = item.relationList || []
            const temp = relationList.map((relation: any) => {
              return {
                relationMusicAlbum: relation.relationMusicAlbum,
                musicAlbumName: relation.musicAlbumName,
                musicAlbumId: relation.musicAlbumId
              }
            })
            return (
              <CourseVideoItem
                musicAlbumInfos={temp}
                detail={{
                  title: item.videoTitle,
                  content: item.videoContent,
                  imgUrl: item.coverUrl
                }}
              />
            )
          })}
        </SectionDetail>

        <Sticky offsetBottom={0} position="bottom">
          <div class={['btnGroup', 'btnMore']}>
            <Button
              block
              round
              type="primary"
              plain
              onClick={() => {
                createState.active = 2
              }}
            >
              返回编辑
            </Button>
            <Button block round type="primary" onClick={this.onSubmit}>
              {this.groupId ? '修改完成' : '创建完成'}
            </Button>
          </div>
        </Sticky>
      </div>
    )
  }
})