// 基础数据集字典
import React from 'react';
import { Row, Col, Button, Icon, Divider, Popconfirm, message, Input, Select } from 'antd';
import { $http } from 'containers/config/https';
import store from 'store';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx'; // 公共table组件
import NewDictionary from './component/NewDictionary.jsx'; // 新增数据元值域
import 'assets/css/common.css';
import './style/index.less';

let {Option} = Select;

export default class DataSetDictionary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            columns: [],
            tableData: [],
            total: 0,
            page: 1,
            pageSize: 10,
            headerHeight: 0,
            listID: undefined, // 表ID
            code: undefined, // 数据集代码
            descripts: undefined, // 数据集描述
            dataSetType: undefined, // 数据集类型
            dataSetTypeSelectData: [],
            loading: false
        }
    }

    componentDidMount() {
        this.getColumnsData(); // 初始化表头数据
        this.handleQuery(); // 初始化列表数据
        this.getDataSetTypeSelectData(); // 初始化下拉框数据
        var box = document.querySelector(".dictionary-header");
		if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
			this.setState({headerHeight: box.offsetHeight})
		}
    }

    // 获取下拉框数据
    getDataSetTypeSelectData = () => {
        let data = {
			params: [{}]
		}
		$http.post('urlS', this, {
			code: "06010030",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0 && res.result) {
                    this.setState({dataSetTypeSelectData: res.result})
				}
			}
		})
    }
    
	// 调用公共组件的连接事件
	onRef = (ref) => {
		this.child = ref
    }

    newOnRef = (ref) => {
		this.newChild = ref
    }

    // 获取表头数据
    getColumnsData = () => {
        let columns = [
            {
                title: '表ID',
                dataIndex: 'ID',
                align: "center",
                width: '80px'
            },
            {
                title: '数据集代码',
                dataIndex: 'code',
                align: "center",
                width: '100px'
            },
            {
                title: '数据集名称',
                dataIndex: 'descripts',
                align: "center",
                width: '200px'
            },
            {
                title: '服务代码',
                dataIndex: 'serviceCode',
                align: "center",
                width: '100px'
            },
            {
                title: '输出代码',
                dataIndex: 'resultCode',
                align: "center",
                width: '100px'
            },
            {
                title: '输出描述',
                dataIndex: 'resultDescripts',
                align: "center",
                width: '200px'
            },
            {
                title: '数据集字典类型',
                dataIndex: 'dataSetType',
                align: "center",
                width: '200px'
            },
			{
                title: '操作',
                key: 10,
                align: "center",
                width: 130,
                render: (text, record) => (
                    <span>
                        <Icon type="edit" style={{color: '#108EE9'}}></Icon>
                        <span className='span' onClick={() => this.handleCompile(record)}>编辑</span>
                        {/* 分割线 */}
                        <Divider type="vertical" />
                        <Icon type="delete" style={{color: 'rgba(240,65,52,1)'}}></Icon>
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
                            <span className='span' style={{color: 'rgba(240,65,52,1)'}}>删除</span>
                        </Popconfirm>
                    </span>
                ),
			}
        ]
        this.setState({columns});
    }
    
    // 查询
    handleQuery = () => {
        this.setState({page: 1, pageSize: 10}, () => {
            this.getTableData();
        })
    }

    // 获取表格数据
    getTableData = () => {
        this.setState({loading: true});
        let {page, pageSize, listID, code, descripts, dataSetType} = this.state;
		let data = {
			params: [{
				ID: listID, // 表ID
				code, // 数据集代码
				descripts, // 数据集描述
				dataSetType, // 数据集类型
			}],
			pagination: [{
				pageSize: pageSize,
				currentPage: page
			}]
		}
		$http.post('urlS', this, {
			code: "06010013",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0 && res.result) {
					for(var i = 0; i < res.result.length; i++) {
                        res.result[i].key = i;
					}
					this.setState({ tableData: res.result, total: res.result&&res.result.length > 0 ? res.result.length : 0, loading: false })
					// 数据加载成功关闭loading
					this.child.handleLoading();
				} else {
					this.setState({ tableData: [], total: 0, loading: false })
					// 数据加载失败关闭loading
					this.child.handleLoading();
				}
			},
			error: function (error) {
				this.setState({ tableData: [], total: 0, loading: false }, () => {
					// 数据加载成功关闭loading
					this.child.handleLoading();
				})
			}
		})
    }

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

    // 表ID
    handleListIDOnChange = e => {
        this.setState({listID: e.target.value})
    }

    // 目录代码
    handleCodeOnChange = e => {
        this.setState({code: e.target.value})
    }

    // 目录名称
    handleDescriptsOnChange = e => {
        this.setState({descripts: e.target.value})
    }

    // 数据集类型
    handleDataSetTypeOnChange = e => {
        this.setState({dataSetType: e})
    }

    // 新目录
    handleAdd = () => {
        let obj = {
            flag: 'add'
        }
        this.newChild.showModal(obj);
    }

    // 编辑
    handleCompile = record => {
        let obj = {
            flag: 'compile',
            userInfo: record
        }
        this.newChild.showModal(obj);
    }

    // 删除
    handleDelete = record => {
        let data = {
			params: [{
				ID: record.ID
			}]
		}
		$http.post('urlADS', this, {
			code: '06010016',
			data: data,
			success: function (res) { 
				if (+res.errorCode === 0) {
					message.success('删除成功');
                    // 刷新列表数据
                    this.getTableData();
				}
			}
		})
    }
    
    render() {
        let {columns, tableData, total, page, headerHeight, listID, code, descripts, dataSetType, dataSetTypeSelectData, loading} = this.state;
        // 组件所需参数
		const param = {
			// 表头配置
			columns,
			// 表格数据
			data: tableData,
			// 数据总条数
			total,
			// 当前页数
            page,
            pageSize: "20",
            // 表格的宽度
			y: store.getState().tableHeight.y + 78 - headerHeight,
            height: store.getState().tableHeight.y + 123 - headerHeight + 'px',
            loading
        }
        
        // 数据集类型
        let dataSetTypeOption = dataSetTypeSelectData&&dataSetTypeSelectData.map((item, index) => {
            return (<Option key={index} value={item.ID} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>)
        })
        return (
            <div>
                <div className="dictionary-header">
                    <Row style={{ minHeight: '64px', padding: '0 24px' }}>
                        <Col span={20}>
                            表ID：<Input
                                value={listID} 
                                onChange={this.handleListIDOnChange} 
                                style={{width: '100px', margin: '23px 6px 20px 0'}} 
                                placeholder="请输入"
                                onPressEnter={this.handleQuery}
                            />
                            数据集代码：<Input
                                value={code} 
                                onChange={this.handleCodeOnChange} 
                                style={{width: '100px', margin: '23px 6px 20px 0'}} 
                                placeholder="请输入"
                                onPressEnter={this.handleQuery}
                            />
                            数据集描述：<Input 
                                value={descripts} 
                                onChange={this.handleDescriptsOnChange} 
                                style={{width: '100px', margin: '23px 6px 20px 0'}} 
                                placeholder="请输入"
                                onPressEnter={this.handleQuery}
                            />
                            数据集类型：<Select
                                showSearch optionFilterProp="seatchprop" allowClear
                                style={{width: '100px', margin: '23px 15px 0 0'}} 
                                placeholder="请选择"
                                value={dataSetType}
                                onChange={this.handleDataSetTypeOnChange} 
                            >
                                {dataSetTypeOption}
                            </Select>
                            <Button onClick={this.handleQuery} style={{ margin: '23px 15px 20px 0', background: 'rgba(255,255,255,1)'}}>查询</Button>
                        </Col>
                        <Col span={4} style={{ textAlign: 'right' }}>
                            <Button icon="plus" onClick={this.handleAdd} style={{ background: 'rgba(247,128,93,1)', color: '#fff', marginTop: '23px'}}>新增数据集字典</Button>
                        </Col>
                    </Row>
                </div>
                <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
                <div style={{ padding: 24 }} className="table-body-height">
                    {/* handelThis将夫组件的属性与方法给子组件访问 */}
                    <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
                </div>
                <NewDictionary onRef={this.newOnRef} handleQuery={this.getTableData} dataSetTypeSelectData={dataSetTypeSelectData} />
            </div>
        )
    }
}