/**
 * 诊间预约模板
 */
import React from 'react'
import {
    Card, Col, Icon, Table, Row, Button, message
} from 'antd';
import { $http } from 'containers/config/https';
import moment from 'moment';
import store from '../../../store';
import '../style/index.less';

var user;
var recordData;
class ClinicTemplate extends React.Component {
    constructor(props) {
        recordData = JSON.parse(sessionStorage.getItem('patientData'));
        if (!recordData) {
            recordData = JSON.parse(sessionStorage.getItem('recordData'));
        }
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        super(props);
        this.state = {
            selectTimeRange: "",
            mouseInID: "",
            startDate: moment(new Date()).format('YYYY-MM-DD'),
            numberSource: [],
            tableData: [],
            columnData: [],
            resDetailID: "",
            ENObj: {},
            CNObj: {},
            columns: []
        }
        this.columns = []

    }
    componentDidMount() {
        this.props.onLeftRef(this);
        this.onLoadColumn();
        this.onLoadTableData();
        this.getDetailTableColumns()
    }
    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }
    //点击号源
    onClick = (record, item) => {
        if ((record[item.dataIndex].workStatusCode != "N") && (record[item.dataIndex].workStatusCode != "F")) {
            return;
        }
        this.props.right.setState({
            onlyToday: false,
        }, () => {
            this.props.hanlderThis.setState({
                date: item.date,
                resDetailID: record[item.dataIndex].resDetailID,
                selectTimeRange: item.date + "|" + record['7'].regResources,
                reload: true,
            })
        })
        this.setState({
            selectTimeRange: item.date + record['7'].regResources,
        })

        this.onLoadDetail(record[item.dataIndex].resDetailID)
    }
    //鼠标滑入
    MouseEnter(item) {
        this.setState({
            mouseInID: item.id,
        })
    }
    // 获取明系列表头数据
    getDetailTableColumns = () => {
        let { userInfo } = this.state;
        let data = {
            params: [{
                reactCode: ['Appointment'],
                compontName: 'Appointment',
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        ENObj: res.result.language.EN,
                        CNObj: res.result.language.CN
                    }, () => {
                        var language = user.language
                        var languageObj = {}
                        if (language == "EN") {
                            languageObj = this.state.ENObj
                        } else {
                            languageObj = this.state.CNObj
                        }
                        var columns = [{
                            title: (
                                <div style={{ width: "91px", height: "60px", verticalAlign: "top", background: '#ffffff', overflow: 'hidden',borderRight:'1px solid #cccccc' }}>
                                    <div style={{ width: 85, paddingTop: '10px', textAlign: 'right' }}>{languageObj.AppointmentDay != null ? languageObj.AppointmentDay.descripts : ""}</div>
                                    <div className="diagonal"></div>
                                    <div style={{ width: 80, textAlign: 'center' }}>{languageObj.AppointmentTime != null ? languageObj.AppointmentTime.descripts : ""}</div>
                                </div>
                            ),
                            dataIndex: "7",
                            width: '91px',
                            align: 'center',
                            render: (text) => (
                                <div style={{ width: '91px', height: '60px', lineHeight: '60px', margin: '0px', padding: '0px' }}>
                                    {text.regResources}
                                </div>
                            ),
                        }
                        ]
                        this.setState({
                            columns: columns,
                        })
                    })
                }
            }
        })
    };
    //鼠标移出
    MouseLeave() {
        this.setState({
            mouseInID: "",
        })
    }
    //预约
    onAppointment = (record, e) => {
        let data = {
            params: [{
                patID: recordData.patID,
                resDetailID: this.state.resDetailID,
                userID: user.userID,
                bookMethodID: "CON",
                resTimeID: record.id,
                bookName: "",
                patCredTypeID: "",
                patCredNo: "",
                patMobile: ""

            }]
        }
        $http.post('urlDeault', this, {
            code: "03040011",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    message.success("预约成功!");
                    this.setState({
                        mouseInID: "",
                    })
                    this.props.hanlderThis.setState({
                        reload: true,
                    })
                    this.onLoadTableData();
                    this.onLoadDetail(this.state.resDetailID);
                }
            }
        })
    }
    ///诊间预约列头信息加载
    onLoadColumn = () => {
        let data = {
            params: [{
                startDate: this.state.startDate,
                userID: user.userID,
                locID: user.locID,
                hospID: user.hospID,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050045",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({
                        columnData: res.data,
                    })
                }
            }
        })
    }
    ///诊间预约列头信息加载
    onLoadTableData = () => {
        let data = {
            params: [{
                startDate: this.state.startDate,
                userID: user.userID,
                locID: user.locID,
                hospID: user.hospID,

            }]
        }
        $http.post('urlDeault', this, {
            code: "03050046",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({
                        tableData: res.data,
                    })
                }
            }
        })
    }
    //获取一周诊间预约数据
    onLoadDetail = (resDetailID) => {
        if (resDetailID === "") {
            resDetailID = this.state.resDetailID;
        }
        let data = {
            params: [{
                patID: "",
                resDetailID: resDetailID,

            }]
        }
        $http.post('urlDeault', this, {
            code: "03040018",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({
                        numberSource: res.data.resDetail,
                        resDetailID: resDetailID,
                    })
                }
            }
        })
    }
    onPreWeek = () => {
        var curDate = new Date(moment(new Date()).format('YYYY-MM-DD'));
        var preDate = new Date(moment(new Date(this.state.startDate)).add('days', -7).format('YYYY-MM-DD'));
        if (curDate.getTime() > preDate.getTime()) {
            message.warn(languageObj.AppointmentNotSelectedBeforeData != null ? languageObj.AppointmentNotSelectedBeforeData.descripts : "")
        } else {
            this.props.right.setState({
                onlyToday: true,
            })
            this.setState({
                startDate: moment(preDate).format('YYYY-MM-DD'), numberSource: [], selectTimeRange: "", resDetailID: ""
            }, () => {
                this.onLoadColumn();
                this.onLoadTableData();
            })
            this.props.hanlderThis.setState({
                date: "",
                resDetailID: "",
                selectTimeRange: languageObj.AppointmentNot != null ? languageObj.AppointmentNot.descripts : "",
                reload: true,
            })
        }
    }
    onNextWeek = () => {
        this.props.right.setState({
            onlyToday: true,
        })
        this.setState({
            startDate: moment(new Date(this.state.startDate)).add('days', 7).format('YYYY-MM-DD'), numberSource: [], selectTimeRange: "", resDetailID: ""
        }, () => {
            this.onLoadColumn();
            this.onLoadTableData();
        })
        this.props.hanlderThis.setState({
            date: "",
            resDetailID: "",
            selectTimeRange: languageObj.AppointmentNot != null ? languageObj.AppointmentNot.descripts : "",
            reload: true,
        })
    }
    render() {
        let columnArr = [];
        this.state.columnData.map((item, index) => {
            if (item.dataIndex != "7") {
                columnArr.push({
                    key: item.dataIndex,
                    title: (
                        <div style={{ height: "60px", textAlign: 'center', background: '#ffffff', overflow: 'hidden' }}>
                            {item.workStatusCode === "F" ? (<div className="fullTable"></div>) : ""}
                            {item.workStatusCode === "S" ? (<div className="stopTable"></div>) : ""}
                            <div style={{ paddingTop: '10px' }}>
                                <div>{item.dateNew}</div>
                                <div>{item.title}</div>
                            </div>
                        </div>)
                    ,
                    dataIndex: item.dataIndex,
                    width: 'calc(14.28% - 13px)',
                    align: 'center',
                    render: (text, record) => (
                        <div
                            className={text.workStatusCode + " " + (((record[item.dataIndex].resDetailID === this.state.resDetailID) && (this.state.resDetailID !== "")) ? "clickCol" : "")}
                            style={{ width: '100%', height: '60px', lineHeight: '60px', margin: '0px', padding: '0px', fontWeight: 'bold' }}
                            onClick={this.onClick.bind(this, record, item)}>
                            {
                                text.workStatusCode === "S" ? "停诊" :
                                    text.workStatusCode === "F" ? "约满" : text.regResources
                            }
                        </div>
                    ),
                })
            }
        });
        var language = user.language
        var languageObj = {}
        if (language == "EN") {
            languageObj = this.state.ENObj
        } else {
            languageObj = this.state.CNObj
        }

        let columns = this.state.columns.concat(columnArr);
        let numberSource = [];
        this.state.numberSource.map((item) => {
            numberSource.push(
                <Col xl={4} key={item.id}>
                    <Card style={{ width: '100%', height: '100px' }} className="numberDetial" title={
                        <div className={item.workStatusCode === "N" ? "detialNomal" : "detialUnNomal"} style={{ textAlign: 'center', minHeight: '30px', lineHeight: '30px', paddingLeft: "10px" }}>
                            <span >{item.timeDetail}</span>
                        </div>
                    }>
                        <div className={((item.id === this.state.mouseInID) & (item.workStatusCode === "N") ? "select" : "unSelect") + " " + "detail" + item.workStatusCode}
                            style={{ fontSize: '12px', fontWeight: 'bold', height: '65px', lineHeight: '65px', textAlign: 'center', background: ((item.id === this.state.mouseInID) & (item.workStatusCode === "N")) ? "#DDDDDD" : "#FFFFFF" }}
                            onMouseEnter={this.MouseEnter.bind(this, item)}     //移入
                            onMouseLeave={this.MouseLeave.bind(this)}     //移出
                        >
                            {languageObj.AppointmentUse != null ? languageObj.AppointmentUse.descripts : ""}/{languageObj.AppointmentCount != null ? languageObj.AppointmentCount.descripts : ""}:{item.regResources}
                            {item.workStatusCode === "F" ? (<div className="fullArrange">  </div>) : ""}
                            {item.workStatusCode === "S" ? (<div className="stopArrange">  </div>) : ""}
                            <div className="buttonPosition">
                                <Button
                                    className="buttonStyle"
                                    type="primary"
                                    style={{
                                        zIndex: "1000",
                                        display: ((item.id === this.state.mouseInID) & (item.workStatusCode === "N")) ? "inline-block" : "none"
                                    }}
                                    onClick={this.onAppointment.bind(this, item)}
                                >
                                    预约
                            </Button>
                            </div>
                        </div>
                    </Card>
                </Col >
            )
        })
        return (
            <div style={{ height: '100%', width: '100%' }} className="clinic" >
                <Card style={{ width: '100%', height: '50%', overflow: 'hidden', }} title={
                    <div style={{ minHeight: '30px', lineHeight: '30px', background: '#D0E9FF', paddingLeft: "10px" }}>
                        <Col span={18} style={{ textAlign: 'left', color: '#409EFF' }}><Icon type="check-square" /> {languageObj.AppointmentSelectAoppointmentTime != null ? languageObj.AppointmentSelectAoppointmentTime.descripts : ""}</Col>
                        <Col span={6} style={{ color: '#409EFF' }}>
                            <Icon type="double-left" onClick={this.onPreWeek} style={{ paddingRight: '10px' }} /> {moment(new Date(this.state.startDate)).add('days', 1).format('YYYY-MM-DD')} <Icon type="double-right" onClick={this.onNextWeek} />
                        </Col>
                    </div>
                }>
                    <div style={{ overflow: 'hidden', height: '100%', width: '100%' }}>
                        <div style={{ height: '100%', width: '100%' }}>
                            <Table
                                columns={columns} style={{ height: '100%', width: '100%' }}
                                scroll={{ y: 'calc(100% - 60px)', x: 'hidden' }}
                                bordered
                                pagination={false}
                                dataSource={this.state.tableData}
                                rowKey={(data, index) => {
                                    return index
                                }}
                            >
                            </Table>
                        </div>
                    </div>
                </Card>
                <div style={{ textAlign: 'left', height: '40px', lineHeight: '40px', background: '#F5F4F4' }}>
                    <span style={{ color: '#666666', paddingLeft: '19px' }}>

                        {this.state.selectTimeRange != "" ? languageObj.AppointmentYourSelected != null ? languageObj.AppointmentYourSelected.descripts : "" : languageObj.AppointmentPleaseSelectPeriod != null ? languageObj.AppointmentPleaseSelectPeriod.descripts : ""}
                        <span style={{ color: '#1999db' }}>{this.state.selectTimeRange}</span>
                    </span>
                </div>
                <Card style={{ width: '100%', height: 'calc(49% - 40px)', overflow: 'hidden' }} className="numberSource">
                    <div
                    >
                        {numberSource}
                    </div>
                </Card>
            </div >
        )
    }
}
export default ClinicTemplate;