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
      }
    },
    lessonList() {
      return createState.lessonList || []
    }
  },
  methods: {
    async onSubmit() {
      try {
        const videoDetail = createState.lessonGroup
        let 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) => (
            <CourseVideoItem
              class={'mb12'}
              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}>
              创建完成
            </Button>
          </div>
        </Sticky>
      </div>
    )
  }
})
