/*
 * @Author: 吴文洁
 * @Date: 2020-07-23 14:54:16
 * @LastEditors: fusanqiasng
 * @LastEditTime: 2021-05-24 21:04:42
 * @Description: 大班直播课预览弹窗
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */

import React from 'react'
import { Modal } from 'antd'
import moment from 'moment'

import './PreviewCourseModal.less'

class PreviewCourseModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  dealWithTime = (startTime, endTime) => {
    const startDate = new Date(Number(startTime))
    const endDate = new Date(Number(endTime))

    const year = startDate.getFullYear()
    const month = startDate.getMonth() + 1 < 10 ? `0${startDate.getMonth() + 1}` : startDate.getMonth() + 1
    const day = startDate.getDate() < 10 ? `0${startDate.getDate()}` : startDate.getDate()

    const startHour = startDate.getHours() < 10 ? `0${startDate.getHours()}` : startDate.getHours()
    const startMinute = startDate.getMinutes() < 10 ? `0${startDate.getMinutes()}` : startDate.getMinutes()

    const endHour = endDate.getHours() < 10 ? `0${endDate.getHours()}` : endDate.getHours()
    const endMinute = endDate.getMinutes() < 10 ? `0${endDate.getMinutes()}` : endDate.getMinutes()

    const liveDateStr = `${year}-${month}-${day}`
    const startTimeStr = `${startHour}:${startMinute}`
    const endTimeStr = `${endHour}:${endMinute}`

    return {
      liveDateStr,
      startTimeStr,
      endTimeStr
    }
  }

  render() {
    const { courseBasinInfo, courseClassInfo = {}, courseIntroInfo, type } = this.props
    const { coverUrl, courseName, scheduleVideoUrl } = courseBasinInfo
    const { liveDate, timeHorizonStart, timeHorizonEnd, nickname } = courseClassInfo
    const { liveCourseMediaRequests } = courseIntroInfo

    let liveDateStr, startTimeStr, endTimeStr
    if (liveDate) {
      const _liveDate = moment(liveDate).format('YYYY-MM-DD')
      const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm')
      const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm')
      const startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x')
      const endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x')

      const { liveDateStr: _liveDateStr, startTimeStr: _startTimeStr, endTimeStr: _endTimeStr } = this.dealWithTime(startTime, endTime)

      liveDateStr = _liveDateStr
      startTimeStr = _startTimeStr
      endTimeStr = _endTimeStr
    }

    return (
      <Modal
        title='预览'
        visible={true}
        width={680}
        onCancel={this.props.close}
        footer={null}
        maskClosable={false}
        className='preview-live-course-modal'
        closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
        <div className='container__wrap'>
          <div className='container'>
            <div className='container__header'>
              <Choose>
                <When condition={type === 'videoCourse'}>
                  <video
                    controls
                    src={scheduleVideoUrl}
                    poster={coverUrl ? coverUrl : `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`}
                    className='course-url'
                  />
                </When>
                <Otherwise>
                  <img src={coverUrl} className='course-cover' alt='course-cover' />
                </Otherwise>
              </Choose>
            </div>
            <Choose>
              <When condition={type === 'videoCourse'}>
                <div className='container__body'>
                  <div className='title__name'>{courseName}</div>
                  <div className='title__inst-name'>{window.currentUserInstInfo.name}</div>
                </div>
              </When>
              <Otherwise>
                <div className='container__body'>
                  <div className='container__body__title'>
                    <div className='title__name'>{courseName}</div>
                    <div className='title__state'>待开课</div>
                  </div>
                  <div className='container__body__time'>
                    <span className='time__label'>上课时间：</span>
                    <span className='time__value'>
                      {liveDate &&
                        timeHorizonStart &&
                        timeHorizonEnd && [
                          <span>{liveDateStr}&nbsp;</span>,
                          <span>
                            {startTimeStr}~{endTimeStr}
                          </span>
                        ]}
                    </span>
                  </div>

                  <div className='container__body__teacher'>
                    <span className='teacher__label'>上课老师：</span>
                    <span className='teacher__value'>{nickname}</span>
                  </div>
                </div>
              </Otherwise>
            </Choose>
            <div className='container__introduction'>
              <div className='container__introduction__title'>直播课简介</div>
              <div className='container__introduction__list editor-box'>
                {liveCourseMediaRequests.map((item, index) => {
                  if (item.mediaType === 'TEXT') {
                    return (
                      <div
                        className='intro-item text'
                        dangerouslySetInnerHTML={{
                          __html: item.mediaContent
                        }}
                      />
                    )
                  }

                  if (item.mediaType === 'PICTURE') {
                    return (
                      <div className='intro-item picture'>
                        <img src={item.mediaUrl} alt='intro-item__picture' />
                      </div>
                    )
                  }
                  return item
                })}
              </div>
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}

export default PreviewCourseModal
