/*
 * Creator:     ML
 * CreatDate:   2020-04-09
 * descripts：  ADC评分报告
 * */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox, Tabs,
    DatePicker, Button, Popconfirm, Icon, Divider, message, Modal,
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import AssessmentADC from './AssessmentADC';
import QuestionnairePage from '../QuestionnairePage';
import store from 'store';
import moment from 'moment';
import '../style/assessment.less';

const { RangePicker } = DatePicker;
const Option = Select.Option;
const Search = Input.Search;
const TabPane = Tabs.TabPane;

class AssessmentADCReport extends React.Component {
    constructor(props) {
        super(props)
        var userData = JSON.parse(sessionStorage.getItem('userData'))
        this.state = {
            dataSource: [],
            userData: userData,
            activeKey: '1',
            baseParms:[]
        }
    }

    componentDidMount() {
        let data = {}
            data = {
                params: [{
                    credTypeFlag: 1,
                }]
            }
            $http.post('urlS', this, {
                code: '03030005',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            baseParms: res,
                        })
                    }
                }
            })
            document.getElementById('adcReport-conent').style.height = store.getState().tableHeight.y + 20   + 'px';
    }

    changeActiveKey(e) {
        this.setState({
            activeKey: e
        })
    }

    clear=(d)=>{
        if(d){
            this.setState({
                delStatus:true,
                doctorID:""
            })
        }
        this.props.form.resetFields();
    }
handleAdd = () => {
    const { tableData } = this.state;
    const newData = {
        credID: tableData && tableData.length > 0 ? tableData.length + 1 : 1,
        credNo: "",
        key: tableData && tableData.length > 0 ? tableData.length + 1 : 1,
        credTypeCode: "",
        credTypeDesc: "",
        credTypeID: "",
        editable: true,
        isAdd: true,
    }
    this.setState({ isAdd: true, disAdd: false, ordDetailValue: "", ordTemPrice: 0, tableData: [...tableData, newData] }, () => {
    });
}
    //文本框数据修改
    handleFieldChange = (e, fieldName, key) => {
        const { tableData, baseParms } = this.state;
        const newData = tableData.map(item => ({ ...item }));
        const target = this.getRowByKey(key, newData);
        if (fieldName == "cardType") {
            this.setState({
                selectID: e
            })
            for (var i = 0; i < newData.length; i++) {
                if (newData[i].credID === key) {
                    newData[i].credTypeID = e
                    for (var j = 0; j < baseParms.credType.length; j++) {
                        if (newData[i].credTypeID == baseParms.credType[j].id) {
                            newData[i].credTypeDesc = baseParms.credType[j].descripts
                        }
                    }
                }
            }
            this.setState({
                tableData: newData,
                canSaveStatus: false,
            })
            return
        }
        if (target) {
            target[fieldName] = e.target.value;
            this.setState({
                tableData: newData,
                canSaveStatus: false,
            })
        }
    }
       cut = (e, key) => {
        // e.stopPropagation();
        // e.nativeEvent.stopImmediatePropagation();
        // e.preventDefault();
        const { tableData } = this.state;
        const newData = tableData.filter(item => item.credID !== key);
        let bs = false
        newData.map((item, i) => {
            if (item.key && item.editable && item.editable == true) {
                bs = true
                this.setState({
                    canSaveStatus: false,
                    disAdd: false,
                    tableData: newData,
                })
                return
            }
        })
        if (!bs) {
            this.setState({ tableData: newData, disAdd: false, canSaveStatus: true, });
        }
    }
    render() {
        const {baseParms}=this.state
        const columns = [
            {
                key: '1',
                title: '机构',
                dataIndex: 'credTypeDesc',
                width: 160,
                align: "center",
                editable: true,
                render: (text, record, index) => {
                    const { isAdd, rightUnitDr } = this.state
                    if (record.editable) {
                        return (
                            <Select value={record.credTypeID} style={{ width: "200px", textAlign: "center" }} onSelect={(e) => this.handleFieldChange(e, 'cardType', record.credID)} disable={this.state.editDis}>
                                {addCredType}
                            </Select>
                        )
                    } if (!record.editable) {
                        return (
                            <Input style={{ textAlign: "center", border: "0" }}
                                readOnly
                                value={text} />
                        )
                    }
                    return text;
                },
            },
            {
                key: '2',
                title: '科室',
                dataIndex: 'credTypeDesc',
                width: 160,
                align: "center",
                editable: true,
                render: (text, record, index) => {
                    const { isAdd, rightUnitDr } = this.state
                    if (record.editable) {
                        return (
                            <Select value={record.credTypeID} style={{ width: "200px", textAlign: "center" }} onSelect={(e) => this.handleFieldChange(e, 'cardType', record.credID)} disable={this.state.editDis}>
                                {addCredType}
                            </Select>
                        )
                    } if (!record.editable) {
                        return (
                            <Input style={{ textAlign: "center", border: "0" }}
                                readOnly
                                value={text} />
                        )
                    }
                    return text;
                },
            },
            {
                key: '3',
                title: '类型',
                dataIndex: 'credTypeDesc',
                width: 160,
                align: "center",
                editable: true,
                render: (text, record, index) => {
                    const { isAdd, rightUnitDr } = this.state
                    if (record.editable) {
                        return (
                            <Select value={record.credTypeID} style={{ width: "200px", textAlign: "center" }} onSelect={(e) => this.handleFieldChange(e, 'cardType', record.credID)} disable={this.state.editDis}>
                                {addCredType}
                            </Select>
                        )
                    } if (!record.editable) {
                        return (
                            <Input style={{ textAlign: "center", border: "0" }}
                                readOnly
                                value={text} />
                        )
                    }
                    return text;
                },
            },
            {
                key: '4',
                title: '医生',
                dataIndex: 'credTypeDesc',
                width: 160,
                align: "center",
                editable: true,
                render: (text, record, index) => {
                    const { isAdd, rightUnitDr } = this.state
                    if (record.editable) {
                        return (
                            <Select value={record.credTypeID} style={{ width: "200px", textAlign: "center" }} onSelect={(e) => this.handleFieldChange(e, 'cardType', record.credID)} disable={this.state.editDis}>
                                {addCredType}
                            </Select>
                        )
                    } if (!record.editable) {
                        return (
                            <Input style={{ textAlign: "center", border: "0" }}
                                readOnly
                                value={text} />
                        )
                    }
                    return text;
                },
            },
            {
                title: '操作',
                dataIndex: 'edit',
                key: 'action',
                align: "center",
                key: 'cardEdit',
                width: 90,
                render: (text, record, index) => {
                    if (record.isAdd) {
                        return (
                            <span style={{ textAlign: "center" }}>
                                <a style={{ color: "red" }} onClick={(e) => this.cut(e, record.credID)}>解约</a>
                            </span>
                        )
                    }
                    if (!record.editable) {
                        return (
                            <p style={{ margin: "0" }}>
                                <span style={{ textAlign: "center" }}>
                                    <a >退出</a>
                                </span>
                                <Divider type="vertical" />
                                <Popconfirm title="是否要删除此行" onConfirm={() => this.delect(record.credID)}>
                                    <a style={{ color: "red" }} >删除</a>
                                </Popconfirm>
                            </p>
                        )
                    } else {
                        return (
                            <span style={{ textAlign: "center" }}>
                                <a onClick={(e) => this.cancel(e, record.credID)}>取消</a>
                            </span>
                        )
                    }
                    // if (!record.isAdd) {
                    //     return (
                    //         <Popconfirm title="是否要删除此行" onConfirm={() => this.cut(record.credID)}>
                    //             <a style={{ color: "red" }} >删除</a>
                    //         </Popconfirm>
                    //     )
                    // } else {
                    //     return (
                    //         <a style={{ color: "" }} onClick={(e) => this.del(e, record.credTypeID)}>删除</a>
                    //     )
                    // }
                }
            }
        ];
        let addCredType = []
        baseParms.credType && baseParms.credType.map(item => {
            addCredType.push(<Option key={item.code} value={String(item.code)} title={item.descripts} role={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
        })
        return <div className="adc-tab-dom assess-dom">
            <div id="adcReport-conent" style={{overflow:"auto"}}>
                <div className="adc-table-left-body" style={{
                    height: '40px', lineHeight: '40px', textAlign: 'left', borderTop: '1px solid #e8e8e8'
                    , borderLeft: '1px solid #e8e8e8', 
                }}>
                    ADC总分
               </div>
                <div className="adc-table-right-body" style={{
                    height: '40px', lineHeight: '40px', textAlign: 'left', borderTop: '1px solid #e8e8e8'
                    , borderLeft: '1px solid #e8e8e8', borderRight: '1px solid #e8e8e8'
                }}>
                    <span className="blue-span">30分</span>
                </div>
                <div className="adc-table-left-body" style={{
                    height: '40px', lineHeight: '40px', textAlign: 'left', borderTop: '1px solid #e8e8e8'
                    , borderLeft: '1px solid #e8e8e8', 
                }}>
                    A得分
               </div>
                <div className="adc-table-right-body" style={{
                    height: '40px', lineHeight: '40px', textAlign: 'left', borderTop: '1px solid #e8e8e8'
                    , borderLeft: '1px solid #e8e8e8', borderRight: '1px solid #e8e8e8'
                }}>
                    <span className="blue-span">5分</span>
                </div>
                <div className="adc-table-left-body" style={{
                    height: '280px', lineHeight: '280px', textAlign: 'left', borderTop: '1px solid #e8e8e8'
                    , borderLeft: '1px solid #e8e8e8',
                }}>
                    D得分
               </div>
                <div className="adc-table-right-body" style={{
                    height: '280px', lineHeight: '280px', textAlign: 'left', borderTop: '1px solid #e8e8e8'
                    , borderLeft: '1px solid #e8e8e8', borderRight: '1px solid #e8e8e8'
                }}>
                    <div style={{ width: '65%', float: "left" }}>
                        <div className="width-span" style={{ height: '40px', lineHeight: '40px', }}>
                            <span>D总分</span>
                            <span className="blue-span">5分</span>
                        </div>
                        <div className="width-span" style={{ height: '40px', lineHeight: '40px',  borderTop: '1px solid #e8e8e8' }}>
                            <span>心血管系统</span>
                            <span>0</span>
                        </div>
                        <div className="width-span" style={{ height: '40px', lineHeight: '40px', borderTop: '1px solid #e8e8e8' }}>
                            <span>内分泌代谢</span>
                            <span>0</span>
                        </div>
                        <div className="width-span" style={{ height: '40px', lineHeight: '40px',  borderTop: '1px solid #e8e8e8' }}>
                            <span>骨关节疾病</span>
                            <span>0</span>
                        </div>
                        <div className="width-span" style={{ height: '40px', lineHeight: '40px',borderTop: '1px solid #e8e8e8' }}>
                            <span>呼吸系统</span>
                            <span>0</span>
                        </div>
                        <div className="width-span" style={{ height: '40px', lineHeight: '40px',  borderTop: '1px solid #e8e8e8' }}>
                            <span>泌尿系统</span>
                            <span>0</span>
                        </div>
                        <div className="width-span" style={{ height: '40px', lineHeight: '40px', borderTop: '1px solid #e8e8e8' }}>
                            <span>神经、精神</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div style={{ width: '30%', float: "left" }}>
                        <div style={{ height: '280px', lineHeight: '280px', borderLeft: '1px solid #e8e8e8' }}>
                            <div style={{height: "40px",lineHeight: "40px"}}>所需专科</div>
                            <span style={{ paddingLeft: "10px", display: "flex",flexDirection: "column",height: "28px",lineHeight: "28px" }}>
                                <span className="blue-span">泌尿外科</span>
                                <span className="blue-span">消化内科</span>
                                <span className="blue-span">风湿免疫科</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div style={{ width: '100%', display: "flex" ,borderLeft:'1px solid #e8e8e8'}}>
                     <div className="item-span" style={{ height: '40px', lineHeight: '40px',  borderTop: '1px solid #e8e8e8' }}>
                            <span></span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',  borderTop: '1px solid #e8e8e8' }}>
                            <span>骨关节疾病</span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',  borderTop: '1px solid #e8e8e8' }}>
                            <span>0</span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px', borderTop: '1px solid #e8e8e8' }}>
                            <span></span>
                        </div>
               </div>
               <div style={{ width: '100%', display: "flex" ,borderLeft:'1px solid #e8e8e8'}}>
                     <div className="item-span" style={{ height: '40px', lineHeight: '40px',   }}>
                            <span></span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',   }}>
                            <span>风湿系统</span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',   }}>
                            <span>1</span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',  }}>
                            <span></span>
                        </div>
               </div>
               <div style={{ width: '100%', display: "flex" ,borderLeft:'1px solid #e8e8e8'}}>
                     <div className="item-span" style={{ height: '40px', lineHeight: '40px',   }}>
                            <span>C得分</span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',   }}>
                            <span className="blue-span">20分</span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',  }}>
                            <span>所需护理级别</span>
                        </div>
                        <div className="item-span" style={{ height: '40px', lineHeight: '40px',  }}>
                            <span className="blue-span">1级护理</span>
                        </div>
               </div>
               <p style={{marginTop:"12px"}}>所需健康管理团队 <span className="blue-span" onClick={this.handleAdd}>添加</span></p>
               <Table
                                pagination={false}
                                columns={columns}
                                dataSource={this.state.tableData}
                                rowClassName={this.setRowClassName}
                                bordered
                                // onRow={this.onClickRow}
                                rowKey={record => record.key}
                                // locale={{emptyText:this.state.findInfo}}
                                style={{
                                    marginTop: '12px', height: '300px',
                                    width: "630px",
                                    overflow: 'auto'
                                }}
                            />
            </div>
        </div>
    }

}

export default AssessmentADCReport;
