/*
 * @Author: 吴文洁
 * @Date: 2020-07-14 15:41:30
 * @Last Modified by: 吴文洁
 * @Last Modified time: 2020-07-23 13:45:16
 * @Description: 大班直播、互动班课列表的筛选组件
 */

import React from 'react'
import { withRouter } from 'react-router-dom'
import { Row, Col, Input, Select, Tooltip } from 'antd'
import RangePicker from '@/modules/common/DateRangePicker'
import moment from 'moment'
import StoreService from '@/domains/store-domain/storeService'
import User from '@/common/js/user'
import './LiveCourseFilter.less'

const { Search } = Input
const { Option } = Select

const defaultQuery = {
  courseName: null,
  startTime: null,
  teacherId: null,
  courseState: null,
  shelfState: null,
  thirdPartType: null
}
const defaultTeacherQuery = {
  size: 10,
  current: 1,
  nickName: null,
}
class LiveCourseFilter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      query: { ...defaultQuery },
      teacherQuery: defaultTeacherQuery,
      teacherList: [],
      expandFilter: false,
    }
  }
  componentDidMount() {
    this.getTeacherList()
  }
  getTeacherList(current = 1, selectList) {
    const { teacherQuery, teacherList } = this.state
    const _query = {
      ...teacherQuery,
      current,
      size: 10,
    }

    StoreService.getStoreUserBasicPage(_query).then((res) => {
      const { result = {} } = res
      const { records = [], total = 0, hasNext } = result
      const list = current > 1 ? teacherList.concat(records) : records
      this.setState({
        hasNext,
        teacherList: list,
      })
    })
  }
  // 滑动加载更多讲师列表
  handleScrollTeacherList = (e) => {
    const { hasNext } = this.state
    const container = e.target
    const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop
    if (scrollToBottom && hasNext) {
      const { teacherQuery } = this.state
      let _teacherQuery = teacherQuery
      _teacherQuery.current = _teacherQuery.current + 1
      this.setState(
        {
          teacherQuery: { ..._teacherQuery },
        },
        () => {
          this.getTeacherList(_teacherQuery.current)
        }
      )
    }
  }

  // 改变搜索条件
  handleChangeQuery = (field, value) => {
    this.setState(
      {
        query: {
          ...this.state.query,
          [field]: value,
          current: 1,
        },
      },
      () => {
        if (field === 'courseName') return
        this.props.onChange(this.state.query)
      }
    )
  }

  handleChangeDates = (dates) => {
    const { query } = this.state
    if (_.isEmpty(dates)) {
      delete query.startTime
      delete query.endTime
    } else {
      query.startTime = dates[0]?.startOf('day').valueOf()
      query.endTime = dates[1]?.endOf('day').valueOf()
    }
    this.setState(
      {
        query: {
          ...query,
          current: 1,
        },
      },
      () => {
        this.props.onChange(this.state.query)
      }
    )
  }

  // 选择老师
  handleSelectTeacher = (teacher) => {
    const { name: teacherName, teacherId } = teacher
    this.setState(
      {
        query: {
          ...this.state.query,
          teacherId,
          teacherName,
          current: 1,
        },
      },
      () => {
        this.props.onChange(this.state.query)
      }
    )
  }

  // 清空搜索条件
  handleReset = () => {
    this.setState(
      {
        query: {
          courseName: null,
          startTime: null,
          endTime: null,
          teacherId: null,
          teacherName: null,
          courseState: undefined,
          current: 1,
          shelfState: null,
          thirdPartType: null
        },
      },
      () => {
        this.props.onChange(this.state.query)
      }
    )
  }

  render() {
    const { courseName, startTime, endTime, courseState, teacherName, teacherId, shelfState, thirdPartType } = this.state.query
    const { expandFilter, teacherList, teacherQuery } = this.state
    const { teacherId: _teahcerId } = {}
    const isTeacher = !!_teahcerId // 判断是否是老师身份

    return (
      <div className='live-course-filter'>
        <Row type='flex' justify='space-between' align='top'>
          <div className='search-condition'>
            <div className='search-condition__item'>
              <span className='search-name'>直播名称：</span>
              <Search
                value={courseName}
                placeholder='搜索直播名称'
                onChange={(e) => {
                  this.handleChangeQuery('courseName', e.target.value)
                }}
                onSearch={() => {
                  this.props.onChange(this.state.query)
                }}
                style={{ width: 'calc(100% - 70px)' }}
                className='search-input'
                enterButton={<span className='icon iconfont'>&#xe832;</span>}
              />
            </div>
            <div className='search-condition__item'>
              <span className='search-date'>上课日期：</span>
              <RangePicker
                id='course_date_picker'
                allowClear={false}
                value={startTime ? [moment(startTime), moment(endTime)] : null}
                format={'YYYY-MM-DD'}
                onChange={(dates) => {
                  this.handleChangeDates(dates)
                }}
                style={{ width: 'calc(100% - 70px)' }}
              />
            </div>
            {User.getUserRole() !== 'CloudLecturer' && (
              <div className='search-condition__item'>
                <span style={{width:"70px",display:"inline-block",textAlign:"right"}}>讲师：</span>
                <Select
                  placeholder='请选择讲师'
                  style={{ width: 'calc(100% - 70px)' }}
                  showSearch
                  allowClear
                  filterOption={(input, option) => option}
                  onPopupScroll={this.handleScrollTeacherList}
                  suffixIcon={
                    <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
                      &#xe835;
                    </span>
                  }
                  value={teacherId}
                  onChange={(value) => {
                    this.handleChangeQuery('teacherId', value)
                  }}
                  onSearch={(value) => {
                    teacherQuery.nickName = value
                    this.setState(
                      {
                        teacherQuery,
                      },
                      () => {
                        this.getTeacherList()
                      }
                    )
                  }}
                  onClear={(value) => {
                    this.setState(
                      {
                        teacherQuery: {
                          size: 10,
                          current: 1,
                          nickName: null,
                        },
                      },
                      () => {
                        this.getTeacherList()
                      }
                    )
                  }}>
                  {_.map(teacherList, (item, index) => {
                    return (
                      <Select.Option value={item.userId} key={item.userId}>
                        {item.nickName}
                      </Select.Option>
                    )
                  })}
                </Select>
              </div>
            )}
            {((expandFilter && User.getUserRole() !== 'CloudLecturer') || User.getUserRole() === 'CloudLecturer') && (
              <div className='search-condition__item'>
                <span className='select-status'>上课状态：</span>
                <Select
                  style={{ width: 'calc(100% - 70px)' }}
                  placeholder='请选择'
                  allowClear={true}
                  value={courseState}
                  onChange={(value) => {
                    this.handleChangeQuery('courseState', value)
                  }}
                  suffixIcon={
                    <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
                      &#xe835;
                    </span>
                  }>
                  <Option value='UN_START'>待开课</Option>
                  <Option value='STARTING'>上课中</Option>
                  <Option value='FINISH'>已完成</Option>
                  <Option value='EXPIRED'>未成功开课</Option>
                </Select>
              </div>
            )}
            {expandFilter && (
              <div className='search-condition__item'>
                <span className='shelf-status'>学院展示：</span>
                <Select
                  style={{ width: 'calc(100% - 70px)' }}
                  placeholder='请选择'
                  allowClear={true}
                  value={shelfState}
                  onChange={(value) => {
                    this.handleChangeQuery('shelfState', value)
                  }}
                  suffixIcon={
                    <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
                      &#xe835;
                    </span>
                  }>
                  <Option value='YES'>开启</Option>
                  <Option value='NO'>关闭</Option>
                </Select>
              </div>
            )}
            {expandFilter && (
              <div className='search-condition__item'>
                <span className='live-type'>直播方式：</span>
                <Select
                  style={{ width: 'calc(100% - 70px)' }}
                  placeholder='请选择'
                  allowClear={true}
                  onClear={(value) => {
                    this.setState(
                      {
                        query: {...this.state.query,thirdPartType:null}
                      },
                      () => {
                        this.props.onChange(this.state.query)
                      }
                    )
                  }}
                  value={thirdPartType}
                  onChange={(value) => {
                    this.handleChangeQuery('thirdPartType', value)
                  }}
                  suffixIcon={
                    <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
                      &#xe835;
                    </span>
                  }>
                  <Option value='WECHAT'>企微直播</Option>
                  <Option value='TENCENT'>小麦直播</Option>
                </Select>
              </div>
            )}
          </div>

          <div className='reset-fold-area'>
            <Tooltip title='清空筛选'>
              <span className='resetBtn iconfont icon' onClick={this.handleReset}>
                &#xe61b;{' '}
              </span>
            </Tooltip>
            <span
              style={{ cursor: 'pointer' }}
              className='fold-btn'
              onClick={() => {
                this.setState({ expandFilter: !expandFilter })
              }}>
              {this.state.expandFilter ? (
                <span>
                  <span>收起</span>
                  <span className='iconfont icon fold-icon'>&#xe82d; </span>{' '}
                </span>
              ) : (
                <span>
                  展开<span className='iconfont icon fold-icon'>&#xe835; </span>
                </span>
              )}
            </span>
          </div>
        </Row>
      </div>
    )
  }
}

export default withRouter(LiveCourseFilter)
