// 主收费项维护界面 --- 所属医院
import React from 'react';
import { Select, Row, Col, Button, Popconfirm, Icon, message } from 'antd';
import { $http } from 'containers/config/https';
import store from 'store';
import PubilcTablePagination from '../../common/PubilcTablePagination.jsx'; // 公共table组件

const { Option } = Select;

export default class MTMAffiliatedHospital extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tableData: [], // table 数据
            selectaddre: '',//第一个select
            selectTwo: '',//第二个select
            hospitalData: [], // 第二个select 数据
            hospIDStr: '',//hospIDStr
            loading: false
        };
        this.columns = [
            // { title: '地区', dataIndex: 'disHospDesc', align: "center", width: '25%', key: '1' },
            { title: '医院', dataIndex: 'hospDesc', align: "center", key: '2' },
            { title: '日期', dataIndex: 'stDate', align: "center", width: '25%', key: '3' },
            { title: '添加人', dataIndex: 'createUserName', align: "center", width: '25%', key: '4' },
        ]
    }

    componentDidMount() {
        this.searchTable()
        this.props.onRef(this)
    }

    resetFields = () => {
        this.searchTable()
    }

    // 调用公共组件的连接事件
    onRef = (ref) => {
        this.child = ref
    }

    // 提供修改page和pageSize的回调函数
    compilePage(page, pageSize) {
        // 修改page，或者pageSize
        this.setState({ page: page, pageSize: pageSize }, () => {
            // 重新调用查询方法
            this.handleQuery();
        })
    }

    //  第一个select
    selectaddre = (e) => {
        this.setState({
            selectaddre: e,
            selectTwo: null,
        }, () => {
            if (this.state.selectaddre === '1') {
                this.searachHospDr()  // 医院列表加载
            }
            if (this.state.selectaddre === '0') {
                this.searachAddre()
            }
        })
    }

    //  第二个select
    selectTwo = (e) => {
        this.setState({
            selectTwo: e,
        }, () => {
            if (this.state.selectaddre === '1') {  // 医院列表加载
                this.setState({
                    hospIDStr: this.state.selectTwo
                })
            }
            if (this.state.selectaddre === '0') { //地区列表加载
                this.addre(this.state.selectTwo)
            }
        })
    }

    // 医院列表加载
    searachHospDr = () => {
        var data = {
            params: [{
            }]
        }
        $http.post('urlS', this, {
            code: "01040078",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        hospitalData: res.data, //  医院列表
                    })
                }
            }
        });
    }

    // 地区列表加载
    searachAddre = () => {
        var data = {
            params: [{
            }]
        }
        $http.post('urlS', this, {
            code: "05100089",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        hospitalData: res.result, //  地区列表加载
                    })
                }
            }
        });
    }

    // 地区列表回调
    addre = (id) => {
        var data = {
            params: [{
                Id: id
            }]
        }
        $http.post('urlS', this, {
            code: "05100138",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        hospIDStr: res.hospIDStr
                    })
                }
            }
        });
    }

    // table
    searchTable = () => {
        this.setState({ loading: true });
        var data = {
            params: [{
                "hospIDStr": this.state.hospIDStr || '',
                "itmID": this.props.rowId || '',
            }]
        }
        $http.post('urlS', this, {
            code: "05100136",
            data: data,
            success: function (res) {
                this.setState({ loading: false });
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        tableData: res.data,
                    })
                }
            },
            error: function () {
                this.setState({ loading: false });
            }
        })
    }

    // addTable
    addTable = () => {
        var data = {
            params: [{
                "hospIDStr": this.state.hospIDStr || '',
                "itmID": this.props.rowId || '',
                "updateUserID": JSON.parse(window.sessionStorage.userData).userID || '',
            }]
        }
        $http.post('urlS', this, {
            code: "05100135",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    message.success(res.errorMessage)
                    this.searchTable()
                }
            }
        })
    }

    // 删除
    handleDelete = record => {
        let data = {
            params: [{
                itmHpID: record?.itmHpID || '',
            }],
        }
        $http.post('urlS', this, {
            code: '05100410',
            data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success(res.errorMessage || '删除成功');
                    this.searchTable();
                }
            }
        })
    }

    render() {
        let { height } = this.props;
        let { tableData, loading } = this.state;
        let operationObj = {
            width: 100,
            title: '操作',
            fixed: 'right',
            align: 'center',
            key: 'operation',
            render: (text, record) => (
                <span>
                    <Icon type="delete" className="common-record-delete-span"></Icon>
                    <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
                        <span className="span common-record-delete-span">删除</span>
                    </Popconfirm>
                </span>
            ),
        }
        // 组件所需参数
        const param = {
            // 表头配置
            columns: [...this.columns, operationObj],
            // 表格数据
            data: tableData,
            // 表格的宽度
            y: height ? height : store.getState().tableHeight.y - 31,
            height: height ? (height + 50 + 'px') : store.getState().tableHeight.y + 19 + 'px',
            loading
        }

        return (
            <div style={{ marginTop: '12px' }}>
                <Row gutter={16}>
                    <Col span={6}>
                        <Select onChange={(e) => { this.selectaddre(e) }} value={this.state.selectaddre} style={{ width: '100%' }} allowClear placeholder="请选择">
                            <Option value='1'>医院</Option>
                            <Option value='0'>地区</Option>
                        </Select>
                    </Col>
                    <Col span={6}>
                        <Select allowClear value={this.state.selectTwo} onChange={(event) => this.selectTwo(event)} style={{ width: '100%' }} placeholder="请选择">
                            {this.state.hospitalData.map(item => <Option title={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
                        </Select>
                    </Col>
                    <Col span={12}>
                        <Button style={{ marginLeft: '15px', }} onClick={this.searchTable}>查询</Button>
                        <Button style={{ marginLeft: '15px', background: 'rgba(66, 185, 131)', color: '#fff' }} onClick={this.addTable}>添加</Button>
                    </Col>
                </Row>
                <Row className="mT20 table-body-height">
                    <PubilcTablePagination
                        param={param}
                        handelThis={this}
                        onRef={this.onRef}
                    />
                </Row>
            </div>
        )
    }
}