import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import { Modal, Tooltip } from 'antd';
import React from 'react';
import './AccountChargeModal.less';

class ChargingDetailModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      query: {
        current: 1,
        size: 10,
        liveCourseId: props.liveCourseId,
      },
      totalCount: 0,
      list: [],
      teacherList: [],
    };
  }
  componentDidMount() {
    // 发请求
    this.handleToPage();
    this.getTeacherData();
  }
  handleToPage = (page = 1) => {
    const params = _.clone(this.state.query);
    params.current = page;
    axios.Apollo('public/businessLive/queryStudentVisitData', params).then((res) => {
      if (res.result) {
        const { records = [], total } = res.result;
        this.setState({
          list: records,
          totalCount: total,
          query: params,
        });
      }
    });
  };
  getTeacherData = () => {
    window.axios
      .Apollo('public/businessLive/queryTeacherVisitData', {
        liveCourseId: this.props.liveCourseId,
      })
      .then((res) => {
        if (res.result) {
          const teacherList = [res.result];
          this.setState({
            teacherList,
          });
        }
      });
  };
  dealTimeDuration = (time) => {
    const diff = Math.floor(time % 3600);
    let hours = Math.floor(time / 3600);
    let mins = Math.floor(diff / 60);
    let seconds = Math.floor(time % 60);
    hours = hours < 10 ? '0' + hours : hours;
    mins = mins < 10 ? '0' + mins : mins;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    return hours + ':' + mins + ':' + seconds;
  };
  getColumns = (type) => {
    const columns = [
      {
        title: type == 'student' ? '学生姓名' : '老师姓名',
        dataIndex: 'userName',
      },
      {
        title: '手机号',
        dataIndex: 'phone',
        render: (text, record) => {
          return <p>{text}</p>;
        },
      },
      {
        title: '累计在线时长',
        dataIndex: 'totalDuration',
        render: (text, record) => {
          return <span>{text ? this.dealTimeDuration(text) : '-'}</span>;
        },
      },
      {
        title: (
          <span>
            是否计费&nbsp;
            <Tooltip title='仅对累计在线时长≥10分钟的老师或学员计费'>
              <span className='icon iconfont'>&#xe6f2;</span>
            </Tooltip>
          </span>
        ),
        dataIndex: 'type',
        render: (text, record) => {
          return <span>{record.totalDuration > 600 ? '计费' : '不计费'}</span>; //大于十分钟的计费
        },
      },
    ];
    return columns;
  };
  render() {
    const { list, query, totalCount, teacherList } = this.state;
    return (
      <Modal
        title='计费人数详情'
        visible={true}
        width={680}
        maskClosable={false}
        closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
        className='charging-detail-modal'
        footer={null}
        onCancel={() => {
          this.props.close();
        }}>
        <div>
          <div style={{ marginBottom: 16 }}>
            <div className='detail-title'>老师详情</div>
            <XMTable
              renderEmpty={{
                image: college,
                description: '暂无数据',
              }}
              size='middle'
              columns={this.getColumns('teacher')}
              dataSource={teacherList}
              pagination={false}
              bordered
            />
          </div>
          <div className='detail-title'>学生详情</div>
          <XMTable
            renderEmpty={{
              image: college,
              description: '暂无数据',
            }}
            size='middle'
            columns={this.getColumns('student')}
            dataSource={list}
            pagination={false}
            bordered
          />
          <PageControl
            size='small'
            current={query.current - 1}
            pageSize={query.size}
            total={totalCount}
            toPage={(page) => {
              this.handleToPage(page + 1);
            }}
          />
        </div>
      </Modal>
    );
  }
}

export default ChargingDetailModal;
