import React from 'react';
import { inject, observer } from 'mobx-react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { IMainStore } from '../stores/index';
import AMisRenderer from '../components/AMisRenderer';

interface LoginProps extends RouteComponentProps<any> {
    store: IMainStore;
}

const schema = {
    type: 'page',
    bodyClassName: 'w-4/5 m-auto',
    body: [
        {
            type: 'plain',
            tpl: '实验开放教学登记表',
            inline: false,
            className: 'text-center text-2x font-bold',
        },
        {
            type: 'plain',
            tpl: '实验名称：${project}',
            inline: false,
            className: 'm-t-xs',
        },
        {
            type: 'plain',
            tpl: '课堂编号：${id}   指导教师：${teacher}   地点：${location} \n  实验时间：${date} ${start_time}',
            inline: false,
            className: 'm-sm',
        },
        {
            type: 'plain',
            tpl: '备注：登记表请妥善保存，学期结束时必须交到实验室存档，不能遗失！',
            inline: false,
            className: '',
        },
        {
            type: 'crud',
            api: {
                method: 'get',
                url: 'rest/user2projects?select=id,student:users!user2project_student_id_fkey(id,code,name,user_orgs(orgs(name)))&schedule_id=eq.${id}&schedule_status=in.(elected,stopped)&order=id.asc',
                adaptor:
                    'payload.data.items = payload.data.items.map((item, index) => {\r\n  return {\r\n    ...item,\r\n    order_number: index + 1\r\n  }\r\n});\r\nreturn payload;',
            },
            columns: [
                {
                    name: 'order_number',
                    label: '序号',
                    type: 'text',
                    placeholder: '-',
                },
                {
                    name: 'student.code',
                    label: '学号',
                    type: 'text',
                },
                {
                    type: 'text',
                    label: '姓名',
                    name: 'student.name',
                },
                {
                    name: 'student.user_orgs[0].orgs.name',
                    label: '班级',
                    type: 'text',
                },
                {
                    type: 'text',
                    label: '考勤',
                    name: 'att',
                    placeholder: '',
                },
                {
                    type: 'text',
                    label: '预习',
                    name: 'prepare',
                    placeholder: '',
                },
                {
                    type: 'text',
                    label: '操作',
                    name: 'op',
                    placeholder: '',
                },
                {
                    type: 'text',
                    label: '报告',
                    name: 'report',
                    placeholder: '',
                },
                {
                    type: 'text',
                    label: '备注',
                    name: 'beizhu',
                    placeholder: '',
                },
            ],
            columnsTogglable: false,
            affixHeader: false,
            showHeader: true,
            showFooter: true,
            messages: {},
            className: 'm-t-sm preview',
        },
        {
            type: 'tpl',
            tpl: '<p>教师签字：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>',
            inline: false,
            className: 'text-right',
        },
    ],
};

@inject('store')
// @ts-ignore
@withRouter
@observer
export default class LoginRoute extends React.Component<LoginProps> {
    render() {
        return <AMisRenderer schema={schema} />;
    }
}