// 交班病人类型维护
import React from 'react';
import { Input, Button, Select, Row, Col,Popconfirm,message, Table} from 'antd';
import { $http } from '../../containers/config/https';
import store from '../../store';

const Option = Select.Option;
let user;
export default class ShiftPatTypeConfig extends React.Component {
	constructor(props) {
		super(props);
		this.state = {			
			tableData: [],      // 表格数据
			hospData: [],       // 医院下拉数据
            iconData: [],       // 图标下拉数据	
            hospID: '',         // 医院id
            code: '',           // code
            descripts: '',      // 描述
            icons: [],          // 图标数组
			total: 0,           // 表格数据总条数
			page: 1,
			pageSize: 10
		};
		user= window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		this.columns = [
			{
				key: 1,
				title: '医院',
				dataIndex: 'hospDesc',
				align: "center",
				width: '20%'
			},
			{
				key: 2,
				title: '类型代码',
				dataIndex: 'shiftPatConfigCode',
				align: "center",
				width: '15%'
			},
			{
				key: 3,
				title: '类型描述',
				dataIndex: 'shiftPatConfigDesc',
				align: "center",
				width: '20%'
			},
			{
				key: 4,
				title: '图标条件',
				dataIndex: 'iconConditionDesc',
				align: "center",
				width: '25%'
			},
			{
				title: '操作',
				key: 5,
				align: "center",
				render: (text, record) => (
					<span>
						<Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
							<span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
						</Popconfirm>
					</span>
				),
			}
		]
	}

	componentDidMount() {
        this.getSelectData();
        this.getShiftPatTypeConfig();
    }
    
    // 获取下拉数据
	getSelectData() {	
		let data = {
			params: [{}]
		}
		$http.post('urlS', this, {
			code: "04010009",
			data: data,
			success: function (res) {
				if (res.errorCode == '0') {
					this.setState({
                        hospData: res.result.hospData,
                        iconData: res.result.iconData
                    })
				} 
			}
		})
	}

   // 获取配置信息
	getShiftPatTypeConfig() {	
		let data = {
			params: [{
				hospID: this.state.hospID
			}],
			pagination: [{
				pageSize: this.state.pageSize,
				currentPage: this.state.page
			}]
		}
		$http.post('urlS', this, {
			code: "04070003",
			data: data,
			success: function (res) {
				if (res.errorCode == '0') {
					this.setState({
                        tableData: res.result.Data,
                        total: res.result.TotalCount
                    })
				} else {
					this.setState({tableData: [], total: 0})
				}
			}
		})
	}

	// 选择医院
	hospChange = (val) => {
	   this.setState({ hospID: val });
    }
    // 选择图标
	iconChange = (arr) => {
        this.setState({ icons: arr });
     }
  	// 提供修改page和pageSize的回调函数
	compilePage = (page, pageSize) => {
		// 修改page，或者pageSize
		this.setState({page: page, pageSize: pageSize}, () => {
			// 重新调用查询方法
			let {hospID} = this.state;
			this.getShiftPatTypeConfig();
		})
	}
	// 新增
	handelSave = () => {
		if( this.state.code==="")
		{
			message.error("请填写类型代码！");
			return;
        }
        if( this.state.descripts==="")
		{
			message.error("请填写类型描述！");
			return;
		}
		let data = {
			params: [{
                hospID: this.state.hospID,
                shiftPatConfigCode: this.state.code, 
                shiftPatConfigDesc: this.state.descripts, 
                iconCondition: this.state.icons.join('^')
			}]
		}
		$http.post('urlS', this, {
			code: "04070002",
			data: data,
			success: (res) => {
				if (+res.errorCode === 0) {
					message.success('新增成功');
					this.getShiftPatTypeConfig();	
				}
			}
		})
    }
    
    // 删除
    handleDelete = (record) => {
        let data = {
                params: [{
                    shiftPatConfigID: record.shiftPatConfigID,
                    updateUserID:user.userID
                }]
        }
        $http.post('urlADS', this, {
            code: '04070004',
            data: data,
            success: function (res) { 
                if (+res.errorCode === 0) {
                    message.success('删除成功');
                    // 刷新列表数据	 
                     this.getShiftPatTypeConfig();
                } 
            }
        })
    }
  
	// 调用公共组件的连接事件
	onRef = (ref) => {
		this.child = ref
	}

	render() {
		return (
			<div>
				<div className="table-operations">
					<Row style={{ height: '80px', lineHeight: '80px', padding: '0 24px' }}>
						<Col span={6}>
							医院：<Select
								showSearch
								allowClear
								style={{ width: '80%' }}
								placeholder="请输入"
								optionFilterProp="title"
								onChange={this.hospChange}
							>
								{this.state.hospData && this.state.hospData.map(item => {
									return <Option key={item.id} title={item.descripts + item.descriptsSPCode}>{item.descripts}</Option>
								})}
							</Select> 							
						</Col>
                        <Col span={3}>
                        代码：<Input style={{width: '70%'}} onChange={(e) => this.setState({code: e.target.value})}></Input>							
						</Col>
                        <Col span={3}>
                        描述：<Input style={{width: '70%'}} onChange={(e) => this.setState({descripts: e.target.value})}></Input>							
						</Col>
                        <Col span={8}>
							图标：<Select
                                mode="multiple"
								style={{ width: '80%' }}
								placeholder="请输入"
								optionFilterProp="title"
								onChange={this.iconChange}
							>
								{this.state.iconData && this.state.iconData.map(item => {
									return <Option key={item.code} title={item.descripts + item.descriptsSPCode}>{item.descripts}</Option>
								})}
							</Select> 							
						</Col>
                        <Col span={2}>
                            <Button type="primary" onClick={this.handelSave} style={{ marginBottom: '12px', marginLeft: '24px', display: 'inline-block' }}>增加</Button>
                        </Col>                        
					</Row>
				</div>
				<div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>

				<div style={{ padding: 24 }}>
					{/* handelThis将夫组件的属性与方法给子组件访问 */}
                    <Table 
                        columns={this.columns}
                        dataSource={this.state.tableData}
                    />
				</div>

			</div>
		);
	}
}