import React from 'react'
import { Modal } from 'antd'
import moment from 'moment'
import $ from 'jquery'
import Service from '@/common/js/service'
import './PreviewOfflineModal.less'
import ENUM from '@/modules/knowledge-base/ENUM'

const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'

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

  componentDidMount() {
    const { data } = this.props
    _.isEmpty(data) ? this.getCourseDetail() : this.setState({ ...data })
  }

  getCourseDetail = () => {
    Service.Hades('public/hades/getOfflineCourseDetail', {
      courseId: this.props.courseId,
    }).then((res) => {
      if (res.success) {
        const { result } = res
        let coverUrl = ''
        result.courseMediaVOS.map((item) => {
          switch (item.contentType) {
            case 'COVER':
              coverUrl = item.mediaUrl
              break
            case 'INTRO':
              this.getTextDetail('introduce', item.mediaUrl)
              break
            default:
              break
          }
          return item
        })
        this.setState({
          ...result,
          coverUrl,
        })
      }
    })
  }

  getTextDetail = (key, url) => {
    $.ajax({
      data: {},
      type: 'GET',
      url,
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
      success: (res) => {
        this.setState({ [key]: res, [`load${key}`]: true })
      },
    })
  }

  render() {
    const {
      coverUrl,
      courseName,
      teacherName,
      courseState,
      categoryName,
      introduce,
      startTime,
      endTime,
      offlinePlace,
      whetherSetApply,
      startTimeApply,
      endTimeApply,
      whetherSetSignIn,
      whetherSetSignOut,
      signInType,
      signOutType,
      signInTimeNum,
      signInTimeUnit,
      signOutStartTimeNum,
      signOutStartTimeUnit,
      signOutEndTimeNum,
      signOutEndTimeUnit,
    } = this.state
    const unit = (signInTimeUnit || '').toLocaleLowerCase() + 's'
    const time = (signInType === 'START_AGO' ? startTime : endTime) && moment(signInType === 'START_AGO' ? startTime : endTime).subtract(signInTimeNum, unit)
    const signInTime = time && signInTimeNum && `${moment(time).format('HH:mm')} ~ ${moment(signInType === 'START_AGO' ? startTime : endTime).format('HH:mm')}`
    const endUnit = (signOutEndTimeUnit || '').toLocaleLowerCase() + 's'
    const end = endTime && signOutEndTimeNum && moment(endTime).add(signOutEndTimeNum, endUnit)
    let startUnit = ''
    let start = ''
    if (signOutType === 'START_LATER') {
      startUnit = (signOutStartTimeUnit || '').toLocaleLowerCase() + 's'
      start = startTime && signOutStartTimeNum && moment(startTime).add(signOutStartTimeNum, startUnit)
    }
    console.log(start, end, startTime, endTime, 666666)
    const signOutTime =
      (start || end) &&
      (signOutType === 'START_LATER'
        ? `${moment(start).format('HH:mm')} ~ ${moment(end).format('HH:mm')}`
        : `${moment(endTime).format('HH:mm')} ~ ${moment(end).format('HH:mm')}`)
    return (
      <Modal
        title='预览'
        visible={true}
        width={680}
        onCancel={this.props.close}
        footer={null}
        maskClosable={false}
        closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
        className='preview-offline-modal'>
        <div className='container__wrap'>
          <div className='container'>
            <div className='container__header'>
              <div className='cover'></div>
              <img src={coverUrl || defaultCoverUrl} className='course-cover' />
              <span className='cover-teacher'>主讲人：{teacherName}</span>
              <span className='cover-state' style={{ background: (ENUM.offlineStateShow[courseState] || {}).color }}>
                {(ENUM.offlineStateShow[courseState] || {}).title}
              </span>
            </div>
            <div className='container__body'>
              <div className='title__name'>{courseName}</div>
              <div className='title__categery'>
                <img className='item-icon' src='https://image.xiaomaiketang.com/xm/cDMwz3jzaX.png' />
                课程分类：{categoryName}
              </div>
              <div className='title__categery'>
                <img className='item-icon' src='https://image.xiaomaiketang.com/xm/BfTBK3dGda.png' />
                上课时间：{startTime ? moment(startTime).format('HH:mm') : ''}~{endTime ? moment(endTime).format('HH:mm') : ''}
              </div>
              <div className='title__categery'>
                <img className='item-icon' src='https://image.xiaomaiketang.com/xm/KhFNBTtAKR.png' />
                上课地点：{offlinePlace}
              </div>
            </div>

            <div className='container__introduction'>
              <div className='title'>线下活动简介</div>
              <div className='container__introduction__list editor-box'>
                {whetherSetApply === 'YES' && (
                  <div className='course-time'>
                    <div className='time-title'>报名时间</div>
                    <div className='time-text'>
                      {startTimeApply && moment(startTimeApply).format('MM-DD HH:mm')} ~ {endTimeApply && moment(endTimeApply).format('MM-DD HH:mm')}
                    </div>
                  </div>
                )}
                {(whetherSetSignIn === 'YES' || whetherSetSignOut === 'YES') && (
                  <div className='course-time'>
                    <div className='time-title'>考勤时间</div>
                    {whetherSetSignIn === 'YES' && <div className='time-text'>签到：{signInTime}</div>}
                    {whetherSetSignOut === 'YES' && <div className='time-text'>签退：{signOutTime}</div>}
                  </div>
                )}
                <div
                  className='intro-item text'
                  dangerouslySetInnerHTML={{
                    __html: introduce,
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}

export default PreviewOfflineModal
