//专长模态框
import React from 'react';
import { Modal, Select, Button, Table, message, Popconfirm } from 'antd';
import { $http } from 'containers/config/https';

const Option = Select.Option;
export default class OfficePanleModel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            medData: [],
            locExpDr: '',
            locExpertise: '',//科室专长描述
            datasource1: [],//获取项目名称下拉框数据
            datasource1key: 0,//科室专长key
            selectValue: '',//下拉框值
            removeUserExperAry: [],//删除专长数组
            medDis: [],//不可选数组
        };
        this.columnr = [{
            title: '专长名称',
            dataIndex: 'CBExperDesc',
            width: 150,
            align: "center"
        }, {
            title: '操作',
            dataIndex: '',
            width: 100,
            align: "center",
            render: (text, record) => (
                <div>
                    <div>
                        {
                            <span className="span" style={{ color: 'rgba(240,65,52,1)' }} onClick={() => this.handleDelete(record)}>删除</span>
                        }
                    </div>

                </div>
            )
        }
        ];
    }
    componentDidMount() {
        this.props.onRef(this)
        //this.handleQuery();

        if (this.props.locid && this.props.locid !== '') {

            // 初始化列表数据
            this.handleQuery(this.props.locid);
        }
    }


    // 实时更新
    componentWillReceiveProps(nextProps) {



        if (nextProps.locid && nextProps.locid !== '') {
            if (nextProps.locid == 'relive') {
                this.setState({
                    removeUserExperAry: [], // 提交成功 置空
                    medDis: [], // 不可选数组 置空
                })
                return false
            }

            if (nextProps.locid !== this.props.locid) {

                // 初始化列表数据
                this.handleQuery(nextProps.locid);


                let array = [];
                nextProps.locData.map((item, i) => {
                    array.push(
                        Object.assign({}, item, { key: i })
                    )
                })



                this.setState({
                    datasource1: array,
                    datasource1key: nextProps.locData.length
                })

            }

        }



    }

    onSelctChange = (value) => {
        this.setState({ selectValue: value })

    }


    // 查询tab数据 
    handleQuery = (value) => {
        this.setState({ datasource1: [] })

        this.setState({
            medDis: this.props.medDis, // 不可选数组 
        })
        if (!value) {
            return false
        }
        let data = {
            params: [{
                locID: value
            }],
            pagination: [{
                pageSize: "",
                currentPage: 1
            }]
        }
        $http.post('urlS', this, {
            code: "01050017",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    if (res.result.Data) {
                        this.setState({ medData: res.result.Data })
                    } else {
                        this.setState({ medData: [] })
                    }

                } else {

                }
            }
        })
    }

    // 新增
    handelSave = () => {
        let { datasource1, datasource1key, selectValue, medDis } = this.state
        let exp = this.state.medData.filter(function (item) {
            return item.CBExpDr == selectValue;
        })

        let obj = {
            key: datasource1key,
            CBExperID: exp[0].CBExpDr,
            CBExperDesc: exp[0].descripts,
        }

        datasource1.push(obj)
        medDis.push(exp[0].CBExpDr) // 不可选数组

        this.setState({ datasource1: datasource1, datasource1key: datasource1key + 1, medDis: medDis })


    }

    // 删除
    handleDelete = (record) => {
        const datasource1 = [...this.state.datasource1];
        let { removeUserExperAry, medDis } = this.state
        let key = record.key
        if (record.userExperID) {
            removeUserExperAry.push(record.userExperID)
        }
        if (record.CBExperID) {
            let index = medDis.indexOf(record.CBExperID);
            if (index > -1) {
                medDis.splice(index, 1);
            }
        }

        this.setState({
            datasource1: datasource1.filter(item => item.key !== key),
            removeUserExperAry: removeUserExperAry,
            medDis: medDis
        });

    }
    showModal = () => {
        this.setState({
            visible: true,
            selectValue: '',
        });
    }

    handleOk = (e) => {
        this.props.callbackModal(this.state.datasource1, this.state.removeUserExperAry, this.state.medDis)
        this.setState({
            visible: false,
            selectValue: '',
        });
    }

    handleCancel = (e) => {
        this.props.callbackModal(this.state.datasource1, this.state.removeUserExperAry, this.state.medDis)
        this.setState({
            visible: false,
            selectValue: '',
        });
    }
    render() {
        return (
            <Modal
                title="其他专长"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={600}
            >
                专长名称:<Select
                    style={{ width: 200 }}
                    placeholder="请输入"
                    onChange={(event) => { this.onSelctChange(event) }}
                    value={this.state.selectValue}
                >
                    {
                        this.state.medData.map(
                            (item) => {
                                return <Option disabled={this.state.medDis.includes(item.CBExpDr)} key={item.CBExpDr} value={item.CBExpDr}>{item.descripts}</Option>
                            }
                        )

                    }
                </Select>
                <Button type="primary" style={{ marginBottom: '12px', marginLeft: '24px', display: 'inline-block' }} onClick={this.handelSave}>增加</Button>
                <Table
                    bordered
                    style={{ height: '400px', maxHeight: '400px', overflow: 'scroll' }}
                    columns={this.columnr}
                    dataSource={this.state.datasource1}
                    rowKey={(row) => {
                        return row.ID
                    }}
                    //onRow={this.onClickRow1}
                    pagination={false}
                />
            </Modal>
        )
    }
}