/**
 * 门诊座位维护
*/
import React from 'react';
import {
    Row, Col, Select, Button, message, IconText, List, Icon, Tag,
} from 'antd';
import { $http } from '../../containers/config/https';
import AddSeat from './AddSeat'; // 批量维护组件
import AddSingleSeat from './AddSingleSeat'; // 单个添加或更新组件
import store from 'store';
import './style/style.less';//引入样式


const Option = Select.Option;
let user;
class SeatMaintain extends React.Component {
    constructor(props) {
        super(props);
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        this.state = {
            hospital: [],
            hospID: user.hospID,
            locList: [],
            locID: "",
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 10,
            seatInfo: {},
            singleSeatInfo: {},
        }
    }
    componentDidMount() {
        // 获取医院列表
        this.getHospital();
        // 获取科室列表
        this.getLocList(user.hospID);
        //加载完成

    }
    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }
    ///获取科室列表
    getLocList = (hospID) => {
        let data = {
            params: [{
                hospID: hospID,
                type: "O^OI^E",
                status: "1",
            }]
        }
        $http.post('urlDeault', this, {
            code: "04020008",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({ locList: res.result.Data, hospID: hospID })
                } else {
                    message.error('保存失败' + res.errorMessage);
                }
            }
        })
    }
    ///获取医院列表 (本院及下级医院)
    getHospital = () => {
        let data = {
            params: [{
                hospID: user.hospID,
                logonGroupID: user.groupID,
                logonHospID: user.hospID,
            }]
        }

        $http.post('urlDeault', this, {
            code: "01040001",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({ hospital: res.depDoctor })
                } else {
                    message.error('保存失败' + res.errorMessage);
                }
            }
        })
    }
    //新增配置
    handleAdd = () => {
        let { hospID, locID } = this.state;
        if ((hospID === "") || (locID === "")) {
            message.warn("请选择医院和科室");
            return;
        }
        // 打开抽屉
        this.child.showDrawer();
    }
    handleAddSingle = () => {
        let { hospID, locID } = this.state;
        if ((hospID === "") || (locID === "")) {
            message.warn("请选择医院和科室");
            return;
        }
        this.setState({ title: "添加" });
        // 打开抽屉
        this.singleChild.showDrawer();
    }
    handleEditSingle = () => {
        // 打开抽屉
        this.singleChild.showDrawer();
    }
    // 调用公共组件的连接事件
    onRef = (ref) => {
        this.child = ref
    }
    // 调用公共组件的连接事件
    onSingleRef = (ref) => {
        this.singleChild = ref
    }

    // 重置信息
    resetSeatInfo() {
        this.setState({ seatInfo: {} })
    }
    // 重置信息
    resetSingleSeatInfo() {
        this.setState({ singleSeatInfo: {} })
    }
    // 查询条件 --- 医院
    onChangehosp = (value) => {
        this.getLocList(value);
    }
    // 查询条件 --- 科室
    onChangeLoc = (value) => {
        let data = {
            params: [{
                hospID: this.state.hospID,
                locID: value,
            }]
        }
        $http.post('urlDeault', this, {
            code: "04080001",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({ dataSource: res.result, locID: value })
                } else {
                    message.error('保存失败' + res.errorMessage);
                }
            }
        })
    }
    ///点击区域名称时触发
    onListItemClick(seatInfo, e) {
        this.setState({ seatInfo: seatInfo }, () => {
            this.handleAdd();
        })
    }
    //点击座位触发
    onSeatClick(singleSeatInfo, e) {
        this.setState({ singleSeatInfo: singleSeatInfo, title: "编辑" }, () => {
            this.handleEditSingle();
        })
    }
    render() {
        const hospital = [];
        this.state.hospital.map((item) => {
            hospital.push(
                <Option key={item.id} value={item.id + ""} title={item.descspell} >{item.descripts}</Option>
            )
        })
        const locList = [];
        this.state.locList.map((item) => {
            locList.push(
                <Option key={item.id} value={item.id + ""} title={item.descspell} role={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
            )
        })
        const seatList = (
            <div style={{ padding: 4, width: '100%', height: '100%', overflow: 'auto' }} className="seatMap">
                {
                    this.state.dataSource.map(
                        (areaItem, index) => {
                            return (
                                <Row>
                                    <Col onClick={this.onListItemClick.bind(this, areaItem)}>
                                        <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.onSeatClick.bind(this, item)}
                                                    style={{
                                                        background: areaItem.seatColor === "" ? '#89c4E2' : areaItem.seatColor,
                                                        textAlign: 'center',
                                                        height: areaItem.seatHeight,
                                                        width: width,
                                                        margin: areaItem.seatInterval / 2,
                                                    }}>
                                                    {item.seatCode}
                                                </Col>
                                            )
                                        })
                                    }
                                </Row>
                            )
                        }
                    )
                }
            </div >
        );
        return (
            <div style={{ width: '100%', height: '100%' }} className="seatMap">
                <div className="table-operations">
                    <Row style={{ minHeight: '60px', padding: '7px 24px 7px 24px' }}>
                        <Col span={16}>

                            医院：<Select style={{ width: '180px', margin: '7px 10px 0 3px' }} defaultValue={user.hospID + ""} onChange={this.onChangehosp}>
                                {hospital}
                            </Select>
                            科室：<Select style={{ width: '180px', margin: '7px 10px 0 3px' }}
                                onChange={this.onChangeLoc}
                                showSearch
                                allowClear
                                optionFilterProp='role'
                            >
                                {locList}
                            </Select>
                            <Tag color="cyan" style={{ margin: '7px 0 0 3px' }} >鼠标点击区域名称或座位时可进行编辑</Tag>
                        </Col>
                        <Col span={8} style={{ textAlign: 'right' }}>
                            <Button icon="plus" onClick={this.handleAddSingle} style={{ background: 'rgba(247,128,93,1)', color: '#fff', margin: '7px 15px 7px 0' }}>添加单个座位</Button>
                            <Button icon="plus" onClick={this.handleAdd} style={{ background: 'rgba(247,128,93,1)', color: '#fff', margin: '7px 15px 7px 0' }}>批量添加座位</Button>
                        </Col>
                    </Row>
                </div>
                <div style={{ width: '100%', height: '10px', background: '#f0f2f5' }}></div>
                <div style={{ width: '100%', height: '760px', overflow: 'hidden' }}>{seatList}</div>
                <AddSeat onRef={this.onRef} handelThis={this} seatInfo={this.state.seatInfo} hospID={this.state.hospID} locID={this.state.locID} />
                <AddSingleSeat onRef={this.onSingleRef} handelThis={this} title={this.state.title} locAreaList={this.state.dataSource} singleSeatInfo={this.state.singleSeatInfo} hospID={this.state.hospID} locID={this.state.locID} />

            </div>
        );
    }

}
export default SeatMaintain;