/*
 * @Author: your name
 * @Date: 2021-09-14 10:22:09
 * @LastEditTime: 2022-04-29 14:21:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/index.tsx
 */


import React, { useEffect } from 'react'
import { useModel } from 'umi';
import { Form, Button } from 'antd'
import {
    ProFormText,
    ProFormDateRangePicker,
} from '@ant-design/pro-form';

import ArticleManagementCopy from '@/pages/GradeHospitalAccreditation/articleManagement/index';
import MccsDrawerForm from '@/components/MccsDrawerForm/index';
import './index.less';


import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import ArticleDetail from '../articleManagement/components/articleDetailModule';


type LedgerUploadPropsType = {

}

// 条文管理
const LedgerUpload: React.FC<LedgerUploadPropsType> = (props) => {

    const columns = [
        {
            hideInTable: true,
            renderFormItem: (item: any, { type }: any, form: any) => {

                if (type === 'form') {
                    return null;
                }
                return (

                    <ProFormDateRangePicker name='date' placeholder={['开始时间', '结束时间']} fieldProps={{ locale }} />

                )
            },
        },
        {
            key: 'keyword',
            hideInTable: true,
            renderFormItem: (item: any, { type }: any, form: any) => {

                if (type === 'form') {
                    return null;
                }
                return (
                    <Form.Item name='keyword'>
                        <ProFormText placeholder='条文/条款' />
                    </Form.Item>
                )
            },
        },
        {
            title: '条款',
            key: 'numStr',
            dataIndex: 'numStr',
            hideInSearch: true,
        },
        {
            title: '条文',
            dataIndex: 'name',
            hideInSearch: true,
            ellipsis: true,
            width: '35%'
        },
        {
            title: '负责单位',
            dataIndex: 'responsibilityDepartmentName',
            hideInSearch: true,
        },
        {
            title: '负责人',
            dataIndex: 'responsibilityUserName',
            hideInSearch: true,
        },
        {
            title: '自评',
            hideInSearch: true,
            dataIndex: 'selfEvaluation',
        },
        // {
        //     title: '现场查核',
        //     hideInSearch: true,
        //     dataIndex: 'siteEvaluation',
        // },
        {
            title: '目标',
            dataIndex: 'targetEvaluation',
            hideInSearch: true,
        },
        {
            title: '系统评分',
            dataIndex: 'systemEvaluation',
            hideInSearch: true,
        },
        {
            title: '操作',
            width: 100,
            valueType: 'option',
            render: (_: any, record: any) => {

                return [<a key="1" onClick={() => openDrawerHandle(record)}>详情</a>, <a key="2" onClick={() => del(record)}>删除</a>]
            },
        },
    ]

    const { articleManagement, ledgerUpload } = useModel('allModels', model => {
        return { articleManagement: model.articleManagement, ledgerUpload: model.ledgerUpload };
    });

    const {

        currentActivedTree,
        leafData,
        scoreList,
        editMode,
        ...restArticleManagementModelData
    } = articleManagement;

    const { ...restLedgerUploadModelData } = ledgerUpload;

    const openDrawerHandle = (record: any) => {
        restLedgerUploadModelData.setCurrentRecord(record)
        restLedgerUploadModelData.setDrawerVisible(true);
        restArticleManagementModelData.getTableData({ id: record.id });
    }

    const del = (record: any) => {

        const { id } = record;
        restLedgerUploadModelData.delRuleHandle(id);
        restArticleManagementModelData.getArticleTreeData();  // 刷新树结构
        restArticleManagementModelData.setReloadRightContent(true);  // 刷新表格数据

    }

    const onVisibleChangeHandle = (visible: boolean) => {
        restLedgerUploadModelData.setDrawerVisible(visible);
    }

    useEffect(()=>{
        
        const {drawerVisible} = restLedgerUploadModelData;
        
        // 关闭抽屉时，取消编辑模式
        if(!drawerVisible){
            restArticleManagementModelData.setEditMode(false);
        }

    },[restLedgerUploadModelData.drawerVisible]);

    useEffect(() => {
        // 监听上传台账弹窗变化，更新本地drawer里台账记录
        if (!restArticleManagementModelData.modalVisible && restLedgerUploadModelData.currentRecord) {
            restArticleManagementModelData.getTableData({ id: restLedgerUploadModelData.currentRecord.id });
        }

    }, [restArticleManagementModelData.modalVisible]);

    
    return (
        <React.Fragment>
            <ArticleManagementCopy
                columnsFromProps={columns}
                isModeTwo={true}
            />

            <MccsDrawerForm
                title={restLedgerUploadModelData.currentRecord?.name}
                visible={restLedgerUploadModelData.drawerVisible}
                onVisibleChange={onVisibleChangeHandle}
                headerStyle={{
                    display:'none'
                }}
                noFormMode={true}
                width={'60%'}
                closable={!editMode}
                footer={editMode?(<div className='diyFooter'>
                    <Button type='default' style={{marginRight:10}} onClick={()=>restLedgerUploadModelData.setDrawerVisible(false)}>取消</Button>
                    <Button type='primary' onClick={()=>restArticleManagementModelData.commitTaizhangImplementationHandle()}>保存</Button>
                </div>):null}
            >
                <div className='leafContent'>
                     {/* <DetailModule /> */}
                     <ArticleDetail  />
                </div>
            </MccsDrawerForm>
        </React.Fragment>
    )
}

export default LedgerUpload