import { Checkbox, message, Radio } from "antd/lib/index";
import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table } from 'antd';
import React from 'react';
import { initFilter, extendRule, extendInclude, extendIgnoreDataRule, setDataFieldValue, guid, initQueryFilter, showFiles, showJoinsHtml, showApprove } from "../../../utils/common";
import { ExportToExcel } from '@woowalker/feui'
import styles from '../HI/StepForm.css';
import ReactToPrint from "react-to-print";
import moment from 'moment';
import config from "../../../config.js";
import XLSX from 'xlsx';
import { connect } from 'dva';
// import FormPage from '../../../components/FormPage'

class SC028ShowPrint extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
            item: null,
            btndisplay: 'none',
            isTaskCheck: false, //是否待办 审批
            JOINRESULT: 10, //10 参加  20 请假 
            NOTJOINREASON: '',//请假原因
            isReasonShow: false,
            isHasOpinion: false,
            isHostSign: false,//是否主持人确定
            isRecordSign: false,//是否记录人确定
            isSend: false,//是否发送短信
        }
    }

    componentDidMount() {
        if (this.props.data?.id)
            this.loadData(this.props.data?.id);
    }

    componentWillReceiveProps(NextProps) {
        if (NextProps.data?.id && this.props.data?.id != NextProps.data?.id) {
            this.loadData(NextProps.data?.id);
        }
    }

    onTableBtnExport() {
        // let TableWrap = document.getElementById('table1' + this.props.record.ID);
        let TableWrap = document.getElementById('table1');
        let Table = TableWrap.getElementsByTagName('table1')[0];
        const wb = XLSX.utils.table_to_book(Table);
        XLSX.writeFile(wb, this.props.record.Nav_Department.NAME + ".xlsx")
    }

    onClickApprove = (appVisible) => {
        const newtmpData = {
            data: { id: this.props.data.id, isShow: true, key: guid(), param: this.props.data.param, appVisible: appVisible, BtnAgreeDisplay: 'none' },
            formCode: "PF123",
        }
        this.setState({
            tmpData: newtmpData,
        });
    }

    //审批意见 改变
    NOTJOINREASONCHANGE = (val) => {
        this.state.NOTJOINREASON = val
    }

    //请假/参加
    sureCheck = () => {
        if (this.state.JOINRESULT == 20 && (this.state.NOTJOINREASON == undefined || this.state.NOTJOINREASON == null || this.state.NOTJOINREASON.length < 1)) {
            message.error("请填写请假原因！");
            return false
        }
        let json = initFilter(this.props.login.OrgId, this.props.data.id, null, null, null, this.props.data.TaskID, this.state.JOINRESULT, this.state.NOTJOINREASON);
        extendIgnoreDataRule(json)
        this.props.dispatch({
            type: 'app/getDataByPost',
            payload: json,
            url: 'SC/SCMTMeeting/PAllCheck',
            onComplete: (ret) => {
                if (ret) {
                    this.props.data.onCancel();
                }
            }
        });
    }

    //发送短信
    sendMsg = () => {
        if (confirm('确定发送短信？')) {
            let json = initFilter(this.props.login.OrgId, this.props.data.id);
            extendIgnoreDataRule(json)
            this.props.dispatch({
                type: 'app/getDataByPost',
                payload: json,
                url: 'SC/SCMTMeeting/SendMsg',
                onComplete: (ret) => {
                    if (ret) {
                        this.props.data.onCancel();
                    }
                }
            });
        }
    }

    // //请假/参加
    // sureCheck = (val) => {
    //     if (val && val == 20 && (this.state.NOTJOINREASON == undefined || this.state.NOTJOINREASON == null || this.state.NOTJOINREASON.length < 1)) {
    //         message.error("请填写请假备注！");
    //         return false
    //     }
    //     let json = initFilter(this.props.login.OrgId, this.props.data.id, null, null, null, this.props.data.TaskID, val, this.state.NOTJOINREASON);
    //     this.props.dispatch({
    //         type: 'app/getDataByPost',
    //         payload: json,
    //         url: 'SC/SCMTMeeting/PAllCheck',
    //         onComplete: (ret) => {
    //             if (ret) {
    //                 this.props.data.onCancel();
    //             }
    //         }
    //     });
    // }

    //加载数据(传过来的参数都在props里面，包括登录信息)
    loadData = (id) => {
        var taskID = this.props.data.TaskID
        var loginID = this.props.login.user.ID
        var orgId = this.props.login ? this.props.login.OrgId : '';   //登录后有存储登录信息
        let json = initFilter(orgId);
        extendRule(json, 'ID', 1, id);    //ID=‘’，字段，等于，条件值， 1代表=，2代表不等于，3小于，4小于等于，5大于，6大于等于，7以开始的Like,8以结束的Like，9包含 

        extendInclude(json, 'Nav_Department');
        extendInclude(json, 'Nav_Minutes');
        extendInclude(json, 'Nav_User_Originator');
        extendInclude(json, 'Nav_UserHost');
        extendInclude(json, 'Nav_UserRecorder');
        extendInclude(json, 'Nav_ListMeetingContent.Nav_ContentName');
        extendInclude(json, 'Nav_ListMeetingContent.Nav_ContentName.Nav_ListContent.Nav_ListContentDeal');
        extendInclude(json, 'Nav_ListPAll');

        extendInclude(json, 'Nav_ListPAll.Nav_User.Nav_Department');
        // extendInclude(json, 'Nav_ListPAll.Nav_User.Nav_Department.Nav_Parent'); //是不是有些时候会报错？

        extendInclude(json, 'Nav_ListPAll.Nav_User.Nav_Person.Nav_Post');
        extendInclude(json, 'Nav_ListPReView.Nav_User');
        extendInclude(json, 'Nav_Files.Nav_ImgFile.Nav_File');
        extendInclude(json, 'Nav_FilesOfficialseal.Nav_ImgFile.Nav_File');
        extendInclude(json, 'Nav_Approve.Nav_ApproveDetails.Nav_ApproveUser.Nav_UserSignFiles.Nav_ImgFile.Nav_File');
        extendIgnoreDataRule(json)
        var that = this
        this.props.dispatch({
            type: 'app/getDataByPost',
            payload: json,
            url: 'SC/SCMTMeeting/GetSuitDevlop',// url: 'SC/MtMeeting/Get',           
            onComplete: (ret) => {    //返回查询结果ret
                var isTaskCheck = false
                var isHasOpinion = false
                var isHostSign = false//是否主持人确定
                var isRecordSign = false//是否记录人确定
                var isSend = false//是否记录人确定

                if (ret) {    //判断是否有记录
                    if (ret.STATUS >= 20 && taskID != undefined && taskID.length > 0) {
                        if (ret.USER_ID_HOST == loginID || ret.USER_ID_RECORDER == loginID) {
                            //后台查看 task 是否已经操作过
                            isTaskCheck = true
                        }
                        if (!isTaskCheck && ret.Nav_ListPAll != null) {
                            for (let i = 0; i < ret.Nav_ListPAll.length; i++) {
                                // JOINRESULT
                                // debugger
                                if (ret.Nav_ListPAll[i].USER_ID == loginID && (ret.Nav_ListPAll[i].JOINRESULT == undefined || ret.Nav_ListPAll[i].JOINRESULT == null)) {
                                    isTaskCheck = true
                                    break
                                }
                            }
                        }

                    }
                    if (isTaskCheck && ((that.props.data.tableKey == null) || (that.props.data.tableKey != undefined && that.props.data.tableKey == "2"))) {
                        isTaskCheck = false
                    }
                    if (ret.Nav_ListMeetingContent != null && ret.Nav_ListMeetingContent.length > 0) {
                        for (let j = 0; j < ret.Nav_ListMeetingContent.length; j++) {
                            if (!isHasOpinion && ret.Nav_ListMeetingContent[j].Nav_ContentName != null && ret.Nav_ListMeetingContent[j].Nav_ContentName.Nav_ListContent != null && ret.Nav_ListMeetingContent[j].Nav_ContentName.Nav_ListContent.length > 0) {
                                isHasOpinion = true
                            }
                        }
                    }
                    //判断 主持人 记录人 是否确定
                    if (ret.Nav_ListPAll != undefined) {
                        for (let i = 0; i < ret.Nav_ListPAll.length; i++) {
                            if (ret.Nav_ListPAll[i].USER_ID == ret.USER_ID_RECORDER) {
                                if (ret.Nav_ListPAll[i].JOINRESULT) {
                                    isRecordSign = true
                                }
                            } else if (ret.Nav_ListPAll[i].USER_ID == ret.USER_ID_HOST) {
                                if (ret.Nav_ListPAll[i].JOINRESULT) {
                                    isHostSign = true
                                }
                            }
                        }
                    }
                }
                // this.props.login
                debugger
                //isSend 是否发送短信 
                if (ret.IS_SEND && !ret.IS_SENDED && ret.STATUS > 0 && ret.STATUS <= 20) {
                    isSend = true
                }

                this.setState({   //设置setState全局变量
                    data: ret,      //将ret对象赋值给data, data供页面调用
                    isTaskCheck: isTaskCheck,//有taskID 状态 审核完成  登陆者 属于参会人
                    isHasOpinion: isHasOpinion,//有会议意见
                    isHostSign: isHostSign,//是否主持人确定
                    isRecordSign: isRecordSign,//是否记录人确定
                    isSend: isSend//是否发送短信
                })
            }
        });
    }

    //渲染页面
    render() {
        const { data, isTaskCheck, isSend, isHostSign, isRecordSign, isHasOpinion, isReasonShow } = this.state;
        const CheckboxGroup = Checkbox.Group;
        return <div>
            <div style={{ padding: '10px' }}>
                <table>
                    <tr>
                        <td><Button onClick={() => this.onClickApprove(true)} style={{ marginRight: '8px' }} icon="export">审批详情</Button></td>
                        <td><ReactToPrint trigger={() => <Button type={'default'} icon={'printer'} >打印</Button>} content={() => this.componentRef} pageStyle={"#tableId" + this.props.data.id + " { padding:0 40px;} img{width :120px}"} /></td>
                        <td><ExportToExcel fileName='会议通知' tableId={'tableId' + this.props.data.id} /></td>
                        {
                            isSend ? <td><Button type={'primary'} style={{ marginLeft: '8px' }} icon="sound" onClick={() => this.sendMsg()}>发送短信</Button></td> : null
                        }

                        {isTaskCheck ?
                            <td colSpan={5}>
                                <Select defaultValue={10} style={{ marginLeft: '50px', color: '#1890ff' }} onChange={value => this.setState({ JOINRESULT: value, isReasonShow: (value == 10 ? false : true) })}>
                                    <Option style={{ color: '#1890ff' }} value={10}>参加</Option>
                                    <Option style={{ color: '#1890ff' }} value={20}>请假</Option>
                                </Select>
                                {isReasonShow ? <Input style={{ marginLeft: '8px', width: '300px' }} placeholder="填写请假原因" onChange={evt => { this.setState({ NOTJOINREASON: evt.target.value }) }}></Input> : null}
                                <Button type={'primary'} style={{ marginLeft: '8px' }} icon="check" onClick={() => this.sureCheck()}>确认</Button>
                            </td> : null
                        }
                    </tr>

                    {/*<Input style={{ marginLeft: '8px', width: '300px' }} placeholder="签到备注" onChange={evt => { this.setState({ Note: evt.target.value }) }}  ></Input>
                       <Button type={'primary'} style={{ marginLeft: '8px' }} onClick={() => this.onTableBtnAgree()} icon="check" >签到</Button> */}
                    {/* {isTaskCheck ?
                    <table style={{ width: '100%', margin: '0,0,0,0', lineHeight: '35px' }}>
                        <tbody>
                            <tr><td colSpan={2}><br></br><hr></hr></td></tr>
                            <tr>
                                <th style={{ float: "right" }} >备注:</th>
                                <td>
                                    <Input.TextArea style={{ width: '96%', margin: '0 0 0 15px' }} onChange={(evt) => this.NOTJOINREASONCHANGE(evt.target.value)} />
                                </td>
                            </tr>
                            <tr>
                                <th></th>
                                <td >
                                    <Button className={styles.agreedUser} type={'primary'} icon={'check'} onClick={() => this.sureCheck(10)} >参加</Button>
                                    <Button className={styles.rejectedUser} type="primary" htmlType="submit" icon="close" size="50px" onClick={() => this.sureCheck(20)} >请假</Button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    : null
                } */}

                </table>
            </div>

            {/* <FormPage {...this.state.tmpData} /> */}
            {/* 安全检查 */}
            <div ref={el => (this.componentRef = el)} style={{ padding: '20px', paddingTop: '20px' }} id={'tableId' + this.props.data.id}>
                <h1 style={{ textAlign: 'center', margin: '15px' }}>会议通知</h1>
                {
                    data ? <div>
                        <Descriptions title="" size="middle" bordered>

                            <Descriptions.Item label="发起部门">{data.Nav_Department?.NAME}</Descriptions.Item>
                            <Descriptions.Item label="发起人">{data.Nav_User_Originator?.NAME}</Descriptions.Item>
                            <Descriptions.Item label="通知编号">{data.CODE}</Descriptions.Item>
                            {/* <Descriptions.Item label="会议类型">{this.props.app.enums.SCMEETINGTYPE.enums[data.MEETINGTYPE]}</Descriptions.Item> */}
                            <Descriptions.Item label="会议主题" span={3}>{data.THEME}</Descriptions.Item>
                            {
                                data.MEETINGTYPE < 40 ?
                                    <Descriptions.Item label="会议内容">{
                                        data.Nav_ListMeetingContent?.map((item, i) => {
                                            return (i > 0 ? "，" : "") + item.Nav_ContentName.NAME
                                        })
                                    }</Descriptions.Item> : null
                                //CONTENT
                            }

                            <Descriptions.Item label="参会人员">{
                                showJoinsHtml(data.Nav_ListPAll, isTaskCheck, data.STATUS)
                                // data.Nav_ListPAll?.map((item, i) => {
                                //     if ((item.PERSONNATURE == null || item.PERSONNATURE == 10) && (item.PERSONTYPE == 10 || item.PERSONTYPE == 40)) {//评审人 可能也加入到 参会人员中  || item.PERSONTYPE == 40
                                //         if (!isTaskCheck&&(data.STATUS == 0 || data.STATUS == 20)) {
                                //             return (i > 0 ? "，" : "") + item.Nav_User.NAME
                                //         } else {
                                //             // 人员 参会反馈情况 有 黑色 无 红色
                                //             return (<a style={{ color: ((item.JOINRESULT==undefined||item.JOINRESULT==null )? "black" : "red") }}> {(i > 0 ? "，" : "") + item.Nav_User.NAME}</a>)
                                //         }
                                //     }
                                // })
                            }</Descriptions.Item>

                            <Descriptions.Item label="主持人">{
                                isHostSign ? data.Nav_UserHost?.NAME : <a style={{ color: "red" }}> {data.Nav_UserHost?.NAME}</a>
                            }</Descriptions.Item>
                            <Descriptions.Item label="记录人">{
                                isRecordSign ? data.Nav_UserRecorder?.NAME : <a style={{ color: "red" }}> {data.Nav_UserRecorder?.NAME}</a>
                                // data.Nav_UserRecorder?.NAME
                            }</Descriptions.Item>

                            {(data.MEETINGTYPE != null && data.MEETINGTYPE == 30) ? <Descriptions.Item label="评审人员">{
                                // data.Nav_ListPReView
                                data.Nav_ListPReView?.map((item, i) => {

                                    if (data.STATUS == 0 || data.STATUS == 20) {
                                        return (i > 0 ? "，" : "") + item.Nav_User.NAME
                                    }
                                    else {
                                        // 人员 参会反馈情况 有 黑色 无 红色
                                        // 查找参会人员 中 是否参加 信息
                                        // data.Nav_ListPAll
                                        return (<a style={{ color: (item.JOINRESULT ? "black" : "red") }}> {(i > 0 ? "，" : "") + item.Nav_User.NAME}</a>)
                                    }
                                })

                            }</Descriptions.Item> : null}
                            <Descriptions.Item label="会议时间">{data.BEGIN_TIME}</Descriptions.Item>
                            {/* <Descriptions.Item label="会议地点">{data.ADDRESS}</Descriptions.Item> */}
                            {
                                data.MEETINGTYPE > 30 ?
                                    <Descriptions.Item label="会议地点" span={2} >{data.ADDRESS}</Descriptions.Item>
                                    : <Descriptions.Item label="会议地点">{data.ADDRESS}</Descriptions.Item>
                            }
                            {
                                data.MEETINGTYPE > 30 ?
                                    <Descriptions.Item label="会议内容" span={3}>{data.CONTENT}</Descriptions.Item> : null
                            }
                            {/* <Descriptions.Item label="状态">{this.props.app.enums.PFStandardStatus.enums[data.STATUS]}</Descriptions.Item> */}
                            <Descriptions.Item label="加盖公章会议通知">{
                                showFiles(data.Nav_FilesOfficialseal, config.picServerHost)
                            }</Descriptions.Item>
                            <Descriptions.Item label="附件" span={3}>{
                                showFiles(data.Nav_Files, config.picServerHost)
                            }</Descriptions.Item>

                            {/* <hr></hr> */}
                            {/* <Descriptions.Item label="审阅意见" span={3}>{
                                showApprove(data.Nav_Approve?.Nav_ApproveDetails, this.props.app.enums.NodeApproveStatus.enums, config.picServerHost)
                            }</Descriptions.Item> */}

                        </Descriptions>
                    </div> : null
                }

                {/* 显示会议意见 */}
                {/* {
                    isHasOpinion ?
                        <table style={{ width: '100%', marginTop: '15px', textAlign: 'center', borderTop: '1px solid #333', borderLeft: '1px solid #333' }} className={styles.PrintForm}>
                            <tbody>
                                <tr>
                                    <td colSpan={2}><h3>会议意见</h3></td>
                                </tr>
                                <tr>
                                    <td>题目</td>
                                    <td>选项</td>
                                </tr>
                                {data?.Nav_ListMeetingContent.map((item, i) => {
                                    return item.Nav_ContentName.Nav_ListContent?.map((itemContent, j) => {
                                        return <tr>
                                            <td>{itemContent.TITLE}</td>
                                            <td>
                                                {
                                                    itemContent.CHECKTYPE == 20 ?
                                                        <CheckboxGroup disabled
                                                            options={
                                                                itemContent?.Nav_ListContentDeal?.map((itemContentDetail, k) => {
                                                                    return itemContentDetail.CONTENTDETAIL
                                                                })
                                                            } />
                                                        :
                                                        <Radio.Group disabled >
                                                            {
                                                                itemContent?.Nav_ListContentDeal?.map((itemContentDetail, k) => {
                                                                    return <Radio value={k}>{itemContentDetail.CONTENTDETAIL}</Radio>
                                                                })
                                                            }
                                                        </Radio.Group>
                                                }
                                            </td>
                                        </tr>
                                    })
                                })}
                            </tbody>
                        </table> : null
                } */}

                {/* 参加 或者请假 */}

                {/* 如果会议已经开始了  显示
会议人员名单				
序号	"部门/车间
班组人员归到车间"	姓名	岗位	参加/请假 */}
                {
                    // data?.Nav_Minutes && data?.Nav_ListPAll ?  签到的时候不显示 会议人员名单
                    !isTaskCheck && data?.Nav_ListPAll ?
                        <table className={styles.PrintFormLight}>
                            {/* style={{ width: '100%', marginTop: '15px', textAlign: 'center', borderTop: '1px solid #333', borderLeft: '1px solid #333' }}
                              className={styles.PrintForm} */}
                            <tbody>
                                <tr>
                                    <td colSpan={5} style={{ textAlign: 'center' }}><h3>会议人员名单</h3></td>
                                </tr>
                                <tr className={styles.PrintFormLightTh}>
                                    <td>工号</td>
                                    <td>姓名</td>
                                    <td>部门/车间/班组</td>  {/*部门/车间 班组人员归到车间 */}
                                    <td>岗位</td>
                                    <td>参会反馈情况</td>
                                </tr>

                                {data?.Nav_ListPAll?.map((item, i) => {
                                    if (item.PERSONNATURE == null || item.PERSONNATURE == 10) {
                                        return <tr>
                                            {/* <td>{(i + 1)}</td> */}
                                            <td>{item.Nav_User.CODE}</td>
                                            {/* <td>{item.Nav_User.Nav_Department?.NAME}</td> //是不是有些时候会报错？*/}
                                            <td>{item.Nav_User.NAME}</td>
                                            <td>{item.Nav_User.Nav_Department?.NAME}</td>
                                            <td>{item.Nav_User.Nav_Person?.Nav_Post?.NAME}</td>
                                            <td>{(item.JOINRESULT == undefined || item.JOINRESULT == null) ? "" : (this.props.app.enums.JoinTaskResult.enums[item.JOINRESULT] == '未完成' ? '未确定' : (this.props.app.enums.JoinTaskResult.enums[item.JOINRESULT] == "参加" ? "参加" : (this.props.app.enums.JoinTaskResult.enums[item.JOINRESULT] + "（" + item.NOTJOINREASON + "）")))}</td>
                                        </tr>
                                    }
                                })}
                            </tbody>
                        </table> : null
                }

                {/* 参加 请假 */}
                {/* {isTaskCheck ?
                    <table style={{ width: '100%', margin: '0,0,0,0', lineHeight: '35px' }}>
                        <tbody>
                            <tr><td colSpan={2}><br></br><hr></hr></td></tr>
                            <tr>
                                <th style={{ float: "right" }} >备注:</th>
                                <td>
                                    <Input.TextArea style={{ width: '96%', margin: '0 0 0 15px' }} onChange={(evt) => this.NOTJOINREASONCHANGE(evt.target.value)} />
                                </td>
                            </tr>
                            <tr>
                                <th></th>
                                <td >
                                    <Button className={styles.agreedUser} type={'primary'} icon={'check'} onClick={() => this.sureCheck(10)} >参加</Button>
                                    <Button className={styles.rejectedUser} type="primary" htmlType="submit" icon="close" size="50px" onClick={() => this.sureCheck(20)} >请假</Button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    : null
                } */}

            </div>
        </div>
    }
}
export default connect(({ login, app }) => ({ login, app }))(SC028ShowPrint) 