//科室专长维护
import React from 'react';
import {
    Form, Select,Button,Row,Spin,message,Popconfirm,Col
  } from 'antd';
import { $http } from '../../../containers/config/https';
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx'; // 公共table组件
//import DepartmentExpertiseTable from './DepartmentExpertiseTable.jsx';//专长子组件



const Option = Select.Option;
class DepartmentExpertise  extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            medData:[],
            select:'',
            locExpertise:'',//科室专长描述
            locExpDr:"",
            // 主菜单列表数据
            data: [],
            // 主菜单分页数据
            total: 0,
            page: 1,
            pageSize: 10,
            flag: '',
            title: '',
            // 是否显示loading
            showLoading: true
        };
        this.columns = [
            {
                title: '名称',
                dataIndex: 'descripts',
                width: 130,
                align: "center"
            },
            {
                title: '操作',
                dataIndex: '',
                align: "center",
                width: 130,
                render: (text,record) => (
                    <span>
                        {/* <span className='span' onClick={this.handleCompile.bind(this, record)}>查看</span> */}
                        {/* onConfirm-- 点击确认的回调*/}
                        {/* 分割线 */}
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)}>
                            <span className='span' style={{color: 'rgba(240,65,52,1)'}}>删除</span>
                        </Popconfirm>
                    </span>
                )
            },
        ];
    }
    componentDidMount() {
        this.setState({showLoading: false});
        	// 数据请求完成后关闭loading
        this.child.handleLoading();
        this.getSelectDwonData();
        this.handleQuery();
		if(this.props.locID !== ''){
			// 初始化列表数据
		
			}		
        }
        
        componentWillReceiveProps(nextProps) {
			// 当修改选择的数据后刷新数据
			if (nextProps.locID !== '') {
				// this.handleQuery(this.props.locid);
			} else {
			//		this.setState({ locid: "" })
			}

	}
	// 调用公共组件的连接事件
	onRef = (ref) => {
		this.child = ref
    }
    // updateState=(name,value)=>{
	// 	this.setState({[name]:value});
    // }
  
   
    	// 查询tab数据 
	handleQuery = () => {
        //debugger;
		let { page, pageSize} = this.state;
		let data = {
			params: [{
                locID:this.props.locID,//科室ID
			   // locExpertise:locExpertise
			}],
			pagination: [{
				pageSize: pageSize,
				currentPage: page
			}]
        }
		$http.post('urlS', this, {
			code: "01050017",
			data: data,
			success: function (res) {
                //console.log(res,'res');
				if (+res.errorCode === 0  && res.result) {
					for(var i = 0; i < res.result.Data.length; i++) {
						res.result.Data[i].key = i
					}
					this.setState({ tableData: res.result.Data,total: res.result.TotalCount })
					// 数据加载成功关闭loading
					this.child.handleLoading();
				} else {
					this.setState({tableData: [], total: 0})
						// 数据加载成功关闭loading
						this.child.handleLoading();
				}
			},
			error: function (error) {
				this.setState({tableData: [], total: 0}, () => {
					// 数据加载成功关闭loading
						this.child.handleLoading();
				})
			}   
		})
    }
    	// 提供修改page和pageSize的回调函数
	compilePage(page, pageSize) {
		// 修改page，或者pageSize
		this.setState({page: page, pageSize: pageSize}, () => {
            // 重新调用查询方法
            this.handleQuery();
			//let {medItemDesc} = this.state;
		//	this.getTableData(status, hospitalDr, locDesc)
		})
    }
    //获取下拉框数据
    getSelectDwonData = () =>	{
		let data = {
			params: [{
                test:""
            }]
		}
		$http.post('urlS', this, {
			code: "01040019",
			data: data,
			success: function (res) {
				//console.log(res)
				if (+res.errorCode === 0) {
				    this.setState({ medData: res.experise})
				} 
			}
		})
	}
     
    // onSelctChange = (e) =>{
    //   // console.log(e);
    //     this.setState({
    //         locExpDr:e  
    //     })

    // }
    onSelctChange = (id)=>{
       // console.log(this.state.medData);
        this.state.medData.forEach((item)=>{
            if(item.id==id){
                    this.setState({
                    select:item.descripts,
                    locExpDr:item.id,
                })
            }
        })
    
    }
   

    	// 新增
		handelSave = (e) => {
			e.preventDefault();
			this.props.form.validateFields((err, values) => {
				if(err){
					return;
				}
				let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
				let data = {
                    params:[{
                                locID:this.props.locID,//科室id
                                cbExpID:this.state.locExpDr,//基础字典专长id
                                updateUserID:user.userID//创建人
                            }]
				}
				$http.post('urlS', this, {
						code: "01050018",
						data: data,
						success: (res) => {
								if (res.errorCode === '0') {
										message.success('新增成功');
									// 刷新列表数据
										this.handleQuery();		
								}
						}
				})

			});

			
	}
   
    
   	// 删除
	handleDelete = (record) => {
		let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
		//console.log(user)
		let data = {
			params: [{
				locExpID: record.id,
				updateUserID: user.userID
			}]
		}
		$http.post('urlADS', this, {
			code: '01050019',
			data: data,
			success: function (res) { 
				if (+res.errorCode === 0) {
					message.success('删除成功');
					// 刷新列表数据
					this.handleQuery();
				}
			}
		})
	}
    render(){
            const { getFieldDecorator } = this.props.form;
            const formItemInput  = {
            labelCol: {span: 6},
            wrapperCol: {span: 18}
            };
        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.columns,
            // 表格数据
            data: this.state.tableData,
            // 数据总条数
            total: this.state.total,
            page: this.state.page,
            // 表格的宽度
            x: 900
        }
        return(
            <div>
                <div style={{padding:'14px 30px 0',boxSizing:'border-box',width:'100%'}}>
                <Row>
                        <Form layout="inline"  onSubmit={this.handelSave}>
                           
                                
                                <Form.Item label="专长名称：" {...formItemInput} style={{padding:0,margin:0}}>
                                    {getFieldDecorator('descripts', {
                                            rules: [{ required: true, message: '请输入专长名称' }],
                                    })(
                                        <Select
                                        allowClear 
                                        optionFilterProp="title"
                                        showSearch
                                        style={{width:'220px'}}
                                        placeholder=""
                                        onChange={this.onSelctChange}
                                    >
                                    {
                                        this.state.medData.map(
                                            (item)=>{
                                                return <Option key={item.id} value={item.id} title={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                            }
                                        )

                                    }
                                    </Select>
                                    )}
                                </Form.Item>
                               
                               
                                <Form.Item>
                                        <Button type="primary" htmlType="submit">保存</Button>
                                </Form.Item>
                               
                           
                </Form> 
                </Row>
            </div>
                <div style={{widht: '100%', height: '10px', background: '#f0f2f5'}}></div>
                {/* <DepartmentExpertiseTable updateState={this.updateState} handleQuery={this.handleQuery}></DepartmentExpertiseTable> */}
                <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div style={{ padding: 24}}>
                    {/* handelThis将夫组件的属性与方法给子组件访问 */}
                            <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
                </div>
        </Spin>
        </div>
        )
    }
}

export default Form.create({ name: 'coordinated' })(DepartmentExpertise);