/**
 * 诊间预约列表
 */

import React from 'react'
import {
    Card, Col, Icon, Table, Row, Checkbox, Input, Pagination, message, Popconfirm, Button
} from 'antd';
import ComponentConfig from '../../columnAuthority/ComponentConfig'
import ColumnAuthoritysModel from '../../columnAuthority/ColumnAuthoritysModel'
import store from '../../../store';
import { $http } from 'containers/config/https';
import '../style/index.less';
import CommonPagination from 'components/pagination/index';

var user;
class AppointmentList extends React.Component {
    constructor(props) {
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        super(props);
        this.state = {
            column: [],
            appDate: "无",
            onlyToday: true,
            appointmentData: [],
            total: 0,
            page: 1,
            pageSize: props.modal == "1" ? 10 : 50,
            size: 'small',
            search: 'search',
            visible: false,
            languageSwitch: 'EN',
            ENObj:{},
            CNObj:{},
            columnOperation:[],
        }
        this.columnOperation = []
    }
    componentDidMount() {
        this.getDetailTableColumns()
        this.props.onRightRef(this);
        this.loadColumn();
        this.loadAppointmentList("", "")
        
        
    
    }
    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        this.setState = (state, callback) => { return; }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.reload) {
            //重新加载数据前需要初始化页码数据
            this.setState({
                total: 0,
                page: 1,
            }, () => {
                this.loadAppointmentList(nextProps.date, nextProps.resDetailID);
            })

        }
    }

    // 获取明系列表头数据
    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) {
                console.log(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
                    }
                    let a= [
                        {
                            title:languageObj.AppointmentOperation!=null?languageObj.AppointmentOperation.descripts:"",
                            dataIndex: 'operation',
                            align: "center",
                            render: (text, record) => (
                                <div>
                                    {record.operateFlag === "Y" ? (
                                        <Popconfirm title={languageObj.AppointmentAreYouCancelYourAppointment!=null?languageObj.AppointmentAreYouCancelYourAppointment.descripts:""} onConfirm={() => this.onCancelClick(record)} >
                                            <span className='span' >{languageObj.AppointmentCancelAppointment!=null?languageObj.AppointmentCancelAppointment.descripts:""}</span>
                                        </Popconfirm>)
                                        : <span style={{ color: '#cccccc' }}>{languageObj.AppointmentCancelAppointment!=null?languageObj.AppointmentCancelAppointment.descripts:""}</span>
                                    }
                                </div>
                            ),
                        }
                    ]
                    this.setState({
                        columnOperation:a,
                    })
                   })
                }
            }
        })
        };
    //分页切换
    changePageSize(current, pageSize) {
        this.setState({ pageSize: pageSize, page: current }, () => {
            this.loadAppointmentList(this.props.date, this.props.resDetailID);
        });
    }

    //分页切换
    onPageChange = (page, pageSize) => {
        this.setState({ page: page }, () => {
            this.loadAppointmentList(this.props.date, this.props.resDetailID);
        });
    }

    //取消预约
    onCancelClick = (record) => {
        let data = {
            params: [{
                bookScheduleID: record.bookScheduleID,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03040013",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    message.success(user.language != 'EN' ? '取消成功！' : 'Cancel success');
                    this.loadAppointmentList(this.props.date, this.props.resDetailID);
                    if (this.props.resDetailID !== "") {
                        this.props.left.onLoadTableData();
                        this.props.left.onLoadDetail("");
                    }
                }
            }
        })
    }
    //查询列头数据
    loadColumn = () => {
        let data = {
            params: [{
                compontName: "AppointmentList",
                type: "C",
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.props.hanlderThis.setState({
                        reload: false,
                    })
                    let column = res.result.C;
                    if (user.language == 'EN'){
                        for (let i=0;i<column.length;i++)
                        {
                            column[i].title = column[i].enDescripts
                        }
                    }        
                    this.setState({
                        column: column,
                    })
                }
            }
        })
    }
    //查询患者列表
    loadAppointmentList = (date, resDetailID) => {
        let data = {
            params: [{
                bookDate: date,
                userID: user.userID,
                resDetailID: this.state.onlyToday ? "" : resDetailID,
                todayFlag: this.state.onlyToday ? "Y" : "N",
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: this.state.page,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03050049",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({
                        appointmentData: res.result.data,
                        total: res.result.totalCount,
                    })
                }
            }
        })
    }
    //查询按钮事件
    searchData = () => {
        this.loadAppointmentList(this.props.date, this.props.resDetailID);
    }
    //勾选当日预约申请
    onChange = (e) => {
        let resDetailID = this.props.resDetailID;
        if (e.target.checked) {
            resDetailID = "";
        }
        this.setState({
            onlyToday: e.target.checked,
        }, () => {
            this.loadAppointmentList(this.props.date, resDetailID);
        })
    }
    //组件权限编辑器
    onColumnRef = (ref) => {
        this.columnRef = ref;
    }
    render() {
        let columns = this.state.column.concat(this.state.columnOperation);

        var language = user.language
        var languageObj = {}
        if(language == "EN" ){
            languageObj = this.state.ENObj
        }else{
            languageObj = this.state.CNObj
        }
        return (
            <div className="appointmentList">
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName="AppointmentList"
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.loadColumn}
                />
                <div className="title">
                    <span style={{ paddingLeft: '10px' }}>{languageObj.AppointmentAoppointmentPatient!=null?languageObj.AppointmentAoppointmentPatient.descripts:""}</span>
                </div>
                <div style={{ width: '100%', height: 'calc(100% - 36px)', padding: '0 10px' }}>
                    <div style={{ height: '46px', lineHeight: '46px', background: '#FFF' }}>
                        <Col span={10} style={{ height: '26px' }}>
                            <Input className='current' disabled value={languageObj.AppointmentAoppointmentDate!=null?languageObj.AppointmentAoppointmentDate.descripts:"" + (this.state.onlyToday ? "无" : this.props.selectTimeRange)} />
                        </Col>
                        <Col span={9} style={{ height: '26px', paddingLeft: '7px' }}>
                            <Checkbox checked={this.state.onlyToday} onChange={this.onChange}>{languageObj.AppointmentReservationToday!=null?languageObj.AppointmentReservationToday.descripts:""}</Checkbox>
                        </Col>
                        <Col span={5} style={{ height: '26px' }}>
                            <Button ghost icon="search" style={{ height: '26px', color: '#409EFF', border: '1px solid' }} onClick={this.searchData}>{languageObj.AppointmentQuery!=null?languageObj.AppointmentQuery.descripts:""}</Button>
                        </Col>
                    </div>
                    <div style={{ height: 'calc(100% - 46px)' }}>
                        <Table
                            scroll={{ y: this.props.modal == 1 ? "calc(70vh - 36px - 46px - 40px - 50px)" : 'calc(100% - 40px)' }}
                            style={{ border: '1px solid #eeeeee', height: this.props.modal == 1 ? "calc(70vh - 36px - 46px - 40px)" : 'calc(100% - 40px)' }}
                            bordered
                            columns={columns}
                            dataSource={this.state.appointmentData}
                            pagination={false}
                            rowKey={(data) => {
                                return data.bookScheduleID
                            }}
                            onHeaderRow={column => {
                                return {
                                    onDoubleClick: () => {
                                        this.columnRef.onOpenModel();
                                    }
                                };
                            }
                            }
                        >
                        </Table>
                        <CommonPagination size={this.props.modal == 1 ? "small" : ""} current={this.state.page} total={this.state.total} search={this.state.search}
                            onShowSizeChange={this.changePageSize.bind(this)} complete={false} dataSource={this.state.appointmentData}
                            loading={this.state.loading} onChange={this.onPageChange.bind(this)} />
                    </div>
                </div>
            </div>
        )
    }
}
export default AppointmentList;