/**
 * 门诊座位图
 */

import React from 'react';
import {
    Row, Col, Select, Button, message, IconText, List, Icon, Tag,
} from 'antd';
import { $http } from '../../containers/config/https';
import ArrangePat from './ArrangePat';
import store from '../../store';
import CommonPagination from 'components/pagination/index';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
let user;

class SeatMap extends React.Component {
    constructor(props) {
        super(props);
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        this.state = {
            seatMap: [],
            seatInfo: "",  //座位信息
            compontName: "",         
            cardTypeList: [],       //卡类型
            defaultCardTypeID: "",
            emptySeatList: [],      //空座位列表
            arrangePatVisible: false,
            seatPatinfoColumn: [],
          
        }
    }
    componentDidMount() {
        this.handleQuery();
        this.handleBaseData();
        this.loadColumn("SeatMap");
      
    
    }
    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }


 
    //加载基础数据
    handleBaseData = () => {
        let data = {
            params: [{
                hospID: user.hospID,
            }]
        }
        $http.post('urlDeault', this, {
            code: "04080005",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    let defaultCardTypeID = "";
                    res.result.cardTypeList.map((item) => {
                        if (item.defaultFlag === "Y") {
                            defaultCardTypeID = item.id;
                        }
                    })
                    this.setState({
                        cardTypeList: res.result.cardTypeList,
                        defaultCardTypeID: defaultCardTypeID,
                        seatPatinfoColumn: res.result.seatPatinfoColumn,
                    })
                } else {
                    message.error('获取信息失败：' + res.errorMessage);
                }
            }
        })
    }
    // 查询条件 --- 科室
    handleQuery = () => {
        let data = {
            params: [{
                hospID: user.hospID,
                locID: user.locID,
            }]
        }
        $http.post('urlDeault', this, {
            code: "04080008",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({ seatMap: res.result })
                } else {
                    message.error('保存失败' + res.errorMessage);
                }
            }
        })
    }

    //查询列头数据
    loadColumn = (compontName) => {
        let data = {
            params: [{
                compontName: compontName ? compontName : this.state.compontName,
                type: "C",
                reactCode: [compontName ? compontName : this.state.compontName]
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (res.errorCode == 0) {
                    let column = res.result.C;
                    if (user.language == 'EN') {
                        for (let i = 0; i < column.length; i++) {
                            column[i].title = column[i].enDescripts
                        }
                    }
                    var arr = Object.keys(res.result.language.EN);
                    if (arr.length > 0) {
                        this.setState({
                            [(compontName ? compontName : this.state.compontName) + "Column"]: res.result.C,
                            ENObj: res.result.language.EN,
                            CNObj: res.result.language.CN
                        })
                    } else {
                        this.setState({
                            [(compontName ? compontName : this.state.compontName) + "Column"]: res.result.C,
                        })
                    }

                }
            }
        })
    }

    //安排或取消安排患者
    handleArrangePat(seatInfo, e) {
        let data = {
            params: [{
                hospID: user.hospID,
                locID: user.locID,
                seatID: seatInfo.seatID,
                emptyFlag: "1",
            }]
        }
        $http.post('urlDeault', this, {
            code: "04080004",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({
                        seatInfo: seatInfo,
                        emptySeatList: res.result.emptySeatList,

                        arrangePatVisible: true,
                    })
                } else {
                    message.error('获取信息失败：' + res.errorMessage);
                }
            }
        })

    }
    //隐藏弹出框
    onModalClose = () => {
        this.setState({
            arrangePatVisible: false
        });
    }
    onModalOk = () => {
        this.setState({
            arrangePatVisible: false
        });
    }
    // 调用公共组件的连接事件
    onRef = (ref) => {
        this.child = ref
    }
    render() {
        const cardType = [];
        this.state.cardTypeList.map((item) => {
            cardType.push(
                <Option key={item.id} value={item.id} cardlength={item.cardLength}>
                    {user.language == 'CN' ? item.descripts : item.enDescripts} 
                </Option>
            )
        })

        var language = user.language
        var languageObj = {}
        if(language == "EN" ){
            languageObj = this.state.ENObj
        }else{
            languageObj = this.state.CNObj
        }


        const seatList = (
            <div style={{ padding: 4 }}>
                {
                    this.state.seatMap.map(
                        (areaItem, index) => {
                            return (
                                <Row>
                                    <Col>
                                        <Icon type="edit" style={{ color: areaItem.seatColor === "" ? '#89c4E2' : areaItem.seatColor }} />
                                        {areaItem.seatAreaDesc}
                                    </Col>
                                    {
                                        areaItem.seatList.map((item) => {
                                            let width = 1 / areaItem.seatColumn * 100 + "%";
                                            let seatInterval = areaItem.seatInterval + "px";
                                            width = "calc(" + width + " - " + seatInterval + ")";
                                            return (
                                                <Col
                                                    span={1}
                                                    onClick={this.handleArrangePat.bind(this, item)}
                                                    style={{
                                                        background: areaItem.seatColor === "" ? '#89c4E2' : areaItem.seatColor,
                                                        textAlign: 'center',
                                                        height: areaItem.seatHeight,
                                                        width: width,
                                                        margin: areaItem.seatInterval / 2,
                                                        fontSize: '16px',
                                                        border: '3px solid #cccccc'
                                                    }}>
                                                    <div style={{ height: '45px', lineHeight: '45px', fontSize: '16px', borderBottom: '2px solid #eeeeee' }}>
                                                        {item.seatCode}
                                                    </div>
                                                    {
                                                        item.patInfo.admID ? (
                                                            <div style={{
                                                                width: '100%',
                                                                textAlign: 'left',
                                                                height: 'calc(100% - 45px)',
                                                                maxHeight: areaItem.seatHeight + 'px',
                                                            }}>
                                                                {
                                                                    this.state.seatPatinfoColumn.map((column, cIndex) => {
                                                                        let height = 1 / this.state.seatPatinfoColumn.length * 100 + "%";
                                                                        return (
                                                                            <div style={{
                                                                                height: height, maxHeight: height, lineHeight: '100%',
                                                                                borderBottom: cIndex == (this.state.seatPatinfoColumn.length - 1) ? '0px' : '2px solid #eeeeee'
                                                                            }}>
                                                                                <Col span={8} style={{ height: '100%', borderRight: '2px solid #eeeeee', padding: '2px 0', }}>
                                                                                    {column.descripts}
                                                                                </Col>
                                                                                <Col span={16} style={{ height: '100%', padding: '2px 0', }}>
                                                                                    {item.patInfo.patBaseInfo[column.code] || item.patInfo.patAdmInfo[column.code]}
                                                                                </Col>
                                                                            </div>
                                                                        )
                                                                    })
                                                                }
                                                            </div>
                                                        ) : ""
                                                    }
                                                </Col>
                                            )
                                        })
                                    }
                                </Row>
                            )
                        }
                    )
                }
            </div>
        );

        return (
            <div style={{ width: '100%', height: '100%' }}>
                {seatList}
                <ArrangePat
                    onRef={this.onRef}
                    handelThis={this}
                    visible={this.state.arrangePatVisible}
                    seatInfo={this.state.seatInfo}
                    cardType={this.state.cardTypeList}
                    defaultCardTypeID={this.state.defaultCardTypeID}
                    emptySeat={this.state.emptySeatList}
                    onOk={this.onModalOk}
                    languageObj={languageObj}
                    onClose={this.onModalClose} />
            </div>
        );
    }

}
export default SeatMap;