/*
 * @Author: yuananting
 * @Date: 2021-07-28 14:56:52
 * @LastEditors: yuananting
 * @LastEditTime: 2021-07-29 13:52:35
 * @Description: 描述一下咯
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { useState, useEffect } from 'react';
import { Tabs, Tooltip, Checkbox, Dropdown } from 'antd';
import './TrainList.less';
import { XMTable, PageControl } from '@/components';
import User from '@/common/js/user';

const { TabPane } = Tabs;

function TrainList(props) {
  const {
    query: { size, current },
    totalCount,
  } = props;

  function renderMoreOperate(item) {
    return (
      <div className='live-course-more-menu'>
        <div className='operate__item'>编辑</div>
        <div className='operate__item'>分享</div>
        <div className='operate__item'>审批作业</div>
        <div className='operate__item'>删除 </div>
      </div>
    );
  }

  function parseColumns() {
    const columns = [
      {
        title: '培训任务',
        key: 'planName',
        dataIndex: 'planName',
        width: '18%',
        fixed: 'left',
        render: (val, record) => {
          return (
            <div className='plan_name_item'>
              <img className='plan-cover' src={record.coverUrl || 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'} alt='' />
              <Choose>
                <When condition={record.planName.length > 25}>
                  <Tooltip title={record.planName}>
                    <div className='plan-name'>{val}</div>
                  </Tooltip>
                </When>
                <Otherwise>
                  <div className='plan-name'>{val}</div>
                </Otherwise>
              </Choose>
            </div>
          );
        },
      },
      {
        title: '任务状态',
        width: '10%',
        key: 'status',
        dataIndex: 'status',
        render: (val, record) => {
          return <div className='course-number'>{'未开始'}</div>;
        },
      },
      {
        title: '任务数',
        width: '8%',
        key: 'courseNum',
        dataIndex: 'courseNum',
        render: (val, record) => {
          return <div className='course-number'>{val}</div>;
        },
      },
      {
        title: '学习人数',
        width: '8%',
        align: 'right',
        key: 'cultureCustomerNum',
        dataIndex: 'cultureCustomerNum',
        sorter: true,
        render: (val) => {
          return <div className='join-number'>{val}</div>;
        },
      },
      {
        title: (
          <span>
            完成率
            <Tooltip title='完成培训任务的人数/学习总人数'>
              <i
                className='icon iconfont'
                style={{
                  marginLeft: '5px',
                  cursor: 'pointer',
                  color: '#bfbfbf',
                  fontSize: '14px',
                  fontWeight: 'normal',
                }}>
                &#xe61d;
              </i>
            </Tooltip>
          </span>
        ),
        width: '10%',
        key: 'rate',
        dataIndex: 'rate',
        sorter: true,
        render: (val) => {
          return <span>100%</span>;
        },
      },
      {
        title: '培训时间',
        width: '14%',
        key: 'created',
        dataIndex: 'created',
        render: (val) => {
          return <span style={{ whiteSpace: 'nowrap' }}>{window.formatDate('YYYY-MM-DD H:i', val)}</span>;
        },
      },
      {
        title: '创建人',
        key: 'createName',
        dataIndex: 'createName',
        width: '10%',
        render: (val) => {
          return <div className='create-name'>{val}</div>;
        },
      },
      {
        title: '创建时间',
        width: '14%',
        key: 'created',
        dataIndex: 'created',
        sorter: true,
        render: (val) => {
          return <span style={{ whiteSpace: 'nowrap' }}>{window.formatDate('YYYY-MM-DD H:i', val)}</span>;
        },
      },
      {
        title: '更新时间',
        width: '10%',
        key: 'updated',
        dataIndex: 'updated',
        sorter: true,
        render: (val) => {
          return <span style={{ whiteSpace: 'nowrap' }}>{window.formatDate('YYYY-MM-DD H:i', val)}</span>;
        },
      },

      {
        title: '操作',
        key: 'operate',
        dataIndex: 'operate',
        fixed: 'right',
        width: '16%',
        render: (val, record) => {
          return (
            <div className='operate'>
              <div className='operate__item' onClick={() => toLearningDataPage(record)}>
                数据
              </div>
              {record.enableState === 'YES' && (
                <>
                  <span className='operate__item split'> | </span>
                  <div
                    className='operate__item'
                    onClick={() => {
                      handleShowShareModal(record);
                    }}>
                    指派
                  </div>
                </>
              )}
              {record.enableState === 'YES' && (
                <>
                  <span className='operate__item split'> | </span>
                  <div
                    className='operate__item'
                    onClick={() => {
                      handleShowShareModal(record);
                    }}>
                    发布
                  </div>
                </>
              )}
              {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
                <>
                  <span className='operate__item split'> | </span>
                  <Dropdown overlay={renderMoreOperate(record)}>
                    <span className='more-operate'>
                      <span className='operate-text'>更多</span>
                      <span className='iconfont icon' style={{ color: '#2966FF' }}>
                        &#xe824;
                      </span>
                    </span>
                  </Dropdown>
                </>
              )}
            </div>
          );
        },
      },
    ];
    return columns;
  }

  // 改变搜索条件(状态 协同与否)
  function handleChangeQuery(field, value) {
    const _query = {
      ...props.query,
      [field]: value,
    };
    props.onChange(_query);
  }

  return (
    <div className='train-list-page'>
      <div className='search-box'>
        <Tabs onChange={(value) => handleChangeQuery('status', value)} type='card'>
          <TabPane tab={`全部 (${20})`} key='all' />
          <TabPane tab={`已发布 (${10})`} key='published' />
          <TabPane tab={`未发布 (${10})`} key='unpublished' />
        </Tabs>
        <Checkbox onChange={(e) => handleChangeQuery('onlyHelp', e.target.checked)}>只看我协同的 ({10})</Checkbox>
      </div>
      <div className='list-content'>
        <XMTable
          rowKey={(record) => record.id}
          showSorterTooltip={false}
          dataSource={props.trainListData}
          columns={parseColumns()}
          pagination={false}
          // onChange={handleChangeTable}
          bordered
          size='middle'
          scroll={{ x: 1600 }}
          // className='plan-list-table'
          renderEmpty={{
            description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>,
          }}
        />
        <div className='box-footer'>
          <PageControl
            current={current - 1}
            pageSize={size}
            total={totalCount}
            toPage={(page) => {
              handleChangeQuery('current', page + 1);
            }}
            showSizeChanger={false}
          />
        </div>
      </div>
    </div>
  );
}

export default TrainList;
