// 主收费项维护界面 --- 标准分类
import React from 'react';
import moment from 'moment';
import { Select, Input, Row, Col, Button, Spin, Divider, Popconfirm, message, Icon, Form, DatePicker, Table, Tabs, Modal, Card } from 'antd';
import { $http } from 'containers/config/https';
import store from 'store';

const { Option } = Select;

export default class StandardClassification extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectData1: [],
            selectData2: [],
            selectData3: [],
            selectValue1: '',
            selectValue2: '',
            selectValue3: '',
            SpanData: [],
            num: 1,
        };

    }

    componentDidMount() {
        this.selectData1()

    }

    selectData1 = () => {

        let data = {
            params: [{
            }]
        }
        $http.post('urlS', this, {
            code: "05100226",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {

                    this.setState({ selectData1: res.data || [] })
                }
            }
        })
    }
    selectData2 = () => {
        let { selectValue1 } = this.state
        if (!selectValue1) {
            return false
        }
        let data = {
            params: [{
                hospID: this.props.hospID ? JSON.parse(window.sessionStorage.userData).hospID : "",  //医院id
                tartype: '',
                type: this.state.selectValue1
            }]
        }
        $http.post('urlS', this, {
            code: "05100011",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({ selectData2: res.Data || [] })
                }
            }
        })
    }

    selectData3 = () => {
        let { selectValue2 } = this.state
        if (!selectValue2) {
            return false
        }
        let data = {
            params: [{
                hospID: "",
                tartype: 'SUB',
                tarTypeID: selectValue2,
                type: this.state.selectValue1,

            }]
        }
        $http.post('urlS', this, {
            code: "05100011",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {

                    this.setState({ selectData3: res.SUBData || [] })
                }
            }
        })
    }
    selectValue1 = (e) => {

        this.setState({
            selectValue1: e,
            selectValue2: '',
            selectValue3: '',
            selectData2: [],
            selectData3: [],
        }, () => {
            this.selectData2()
        })
    }

    selectValue2 = (e) => {

        this.setState({
            selectValue2: e,
            selectValue3: '',
            selectData3: [],
        }, () => {
            this.selectData3()
        })
    }

    selectValue3 = (e) => {

        this.setState({
            selectValue3: e
        })
    }

    add = (e) => {
        let { selectValue1, selectValue2, selectValue3, selectData1, selectData2, selectData3, SpanData, num } = this.state

        let typeDesc = selectData1.filter(function (item) {
            return item.ID == selectValue1;
        })

        let tarIDDesc = selectData2.filter(function (item) {
            return item.ID == selectValue2;
        })

        let tarsubIDDesc = selectData3.filter(function (item) {
            return item.ID == selectValue3;
        })

        let obj = {
            type: selectValue1 || '',
            typeDesc: typeDesc[0] ? typeDesc[0].Descripts : '',
            tarID: selectValue2 || '',
            tarIDDesc: tarIDDesc[0] ? tarIDDesc[0].Descripts : '',
            tarsubID: selectValue3 || '',
            tarsubIDDesc: tarsubIDDesc[0] ? tarsubIDDesc[0].Descripts : '',
            key: num,
        }

        if(obj.tarsubID ==='' ||!obj.tarsubID){
            obj.sort='Data'
        }else{
            obj.sort='SUBData'
        }
        
        if (obj.tarID && obj.tarID !== '') {
            SpanData.push(obj)
        }

        this.setState({
            SpanData: SpanData,
            num: num + 1
        }, () => {
            this.props.msg(SpanData)
        })

    }

    closeSpan = (e) => {
        let { SpanData, num } = this.state
        if (e === 'All') {
            this.setState({
                SpanData: [],
                num: 1
            })
        } else {
            let index = 0;

            for (var i = 0; i < SpanData.length; i++) {

                if (SpanData[i].key == e) {
                    index = i;
                    break;
                }
            }
            SpanData.splice(index, 1);
            this.setState({
                SpanData: SpanData,
            }, () => {
                this.props.msg(SpanData)
            })
        }


    }



    render() {


        return (
            <div>
                <Row>
                    <Col >
                        <Row >
                            <Col span={24} style={{ marginBottom: '5px' }} >
                                类型：<Select allowClear style={{ width: '150px', margin: '12px 15px 0 0' }} placeholder="请选择类型" value={this.state.selectValue1} onChange={(event) => { this.selectValue1(event) }}  >
                                    <Option value=''>请选择</Option>
                                    {this.state.selectData1.map(item => <Option title={item.Descripts + '^' + item.descriptsSPCode} key={item.ID} value={item.ID}  >{item.Descripts}</Option>)}
                                </Select>
                                大类：<Select allowClear style={{ width: '150px', margin: '12px 15px 0 0' }} placeholder="请选择类型" value={this.state.selectValue2} onChange={(event) => { this.selectValue2(event) }}  >
                                    <Option value=''>请选择</Option>
                                    {this.state.selectData2.map(item => <Option title={item.Descripts + '^' + item.descriptsSPCode} key={item.ID} value={item.ID}  >{item.Descripts}</Option>)}
                                </Select>
                                子类：<Select allowClear style={{ width: '150px', margin: '12px 15px 0 0' }} placeholder="请选择类型" value={this.state.selectValue3} onChange={(event) => { this.selectValue3(event) }}  >
                                    <Option value=''>请选择</Option>
                                    {this.state.selectData3.map(item => <Option title={item.Descripts + '^' + item.descriptsSPCode} key={item.ID} value={item.ID}  >{item.Descripts}</Option>)}
                                </Select>
                                <Button type="primary" className="margiRight16" onClick={this.add}>添加</Button>
                            </Col>
                        </Row>
                        <Row >
                            <Col span={24} style={{ marginBottom: '5px' }} >
                                <Card style={{ width: '100%', padding: '0', overflow: 'auto', minHeight: '300px' }} className='pd0' title='已添加条件' >
                                    <Col style={{ padding: 12 }}>
                                        <Row gutter={16}>
                                            {this.state.SpanData.map((item, i) =>
                                                <Col span={12} >
                                                    <p style={{ background: '#eee', borderRadius: '4px' }}>
                                                        <span>【{item.typeDesc}】</span>  <span>【{item.tarIDDesc}】</span>  <span>【{item.tarsubIDDesc}】</span><Icon style={{ float: 'right', marginTop: '4px' }} type="close" onClick={(event) => { this.closeSpan(item.key) }} />
                                                    </p>
                                                </Col>
                                            )}
                                        </Row>

                                    </Col>
                                </Card>
                                <p style={{ textAlign: 'right', color: '#f5222d', marginTop: '20px', cursor: 'pointer' }}>
                                    <span onClick={(event) => { this.closeSpan('All') }} >清空全部条件<Icon type="close" /></span>
                                </p>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}