import React, { Component } from 'react';
import { getControl } from 'zorod/components/Zform/controls';
import { ZsearchListHOC } from 'zorod';
import api from '../Api';
import { Card, Form, Input, Button, message, Icon, Checkbox, Select, Cascader, Table, Popconfirm, Divider } from 'antd';
import StandardCodeSetPop from '../popComponents/StandardCodeSetPop'

const FormItem=Form.Item;
const TextArea=Input.TextArea;

const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };
  const formTailLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12, offset: 4 },
  };
  const formButtom={
    wrapperCol: { span: 12, offset: 6 }
  }
const residences=["baijing","hunian","guangxi"];

class ecStandardCodeList extends Component {
	constructor(props) {
			super(props)
			this.state = {
				dataSource: [],
				selectedRowKeys: [], // Check here to configure the default column
				loading: false,
				popShow: true,
				popMode: '',
				popData: {},
				setMode: '',
				pagination: {},
				searchValues:  {"DATABASE_TYPE": "0"},
				searchDataSource: [],
				selectInitialValue: ''
			}
	}

	// 页面加载函数
	componentDidMount() {
		api.system.getListStdcode(1, 10, this.state.searchValues).then(res => {
			const pagination = { ...this.state.pagination }
			pagination.current = 1
			pagination.total = res.data.total
			for (let data of res.data.list) {
				data.TYPE_ID = ['全部', '姓名', '职业'][data.TYPE_ID]
			}
			this.setState({
				dataSource: res.data.list,
				pagination
			})
		})
		api.system.getListStdcodeType(1, 999, {"DATABASE_TYPE": "0"}).then(res => {
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({name: data.TYPE_NAME, id: data.TYPE_ID, count: 0})
			}
			// api.system.getListStdcode(1, 9999, this.state.searchValues).then(result => {
			// 	for (let data of result.data.list) {
			// 		for (let typeName of dataBaseId) {
			// 			if (typeName.name === data.codeType.TYPE_NAME) {
			// 				typeName.count ++
			// 			}
			// 		}
			// 	}
			// })
			this.setState({
				searchDataSource: dataBaseId,
				selectInitialValue: dataBaseId[0].id
			})
			console.log(dataBaseId)
		})
		//test数据分析图表
		
	}
	//表单提交
	handelsubmit=()=>{
			let userInfo=this.props.form.getFieldsValue
			this.props.form.validateFields((err,values)=>{
						if(!err){
							console.log(values)
							message.success(`添加成功!!!`)
						}
			})
	}
	//取消
	handelConcel=()=>{
		this.setState({
			popShow: false
		})
	}
	// 关闭弹窗
	closePop = () => {
		this.setState({
			popShow: true
		})
	}
	// 打开新增弹窗
	sourceAdd = () => {
		this.setState({
			popShow: false,
			popMode: '新增标准码',
			popData: {},
			setMode: 'add'
		})
	}
	// 打开更新弹窗
	sourceSet = (key) => {
		api.system.getSingleStdcode(key).then(res => {
			console.log(res)
			this.setState({
				popShow: false,
				popMode: '标准码配置',
				setMode: 'update',
				popData: res.data
			})
		})
	}
	// 打开详情窗口
	sourceDetailSet = (key) => {
		api.system.getSingleStdcode(key).then(res => {
			this.setState({
				popShow: false,
				popMode: '标准码详情',
				setMode: '',
				popData: res.data,
				detailMode: false
			})
		})
	}
	// 新增一条数据
	addDataSource = (data) => {
		console.log(data)
		api.system.addStdcode(data).then(res => {
			this.setState({
				popShow: true
			})
			api.system.getListStdcode(1, 10, this.state.searchValues).then(res => {
				const pagination = { ...this.state.pagination }
				pagination.current = 1
				pagination.total = res.data.total
				for (let data of res.data.list) {
					data.TYPE_ID = ['全部', '姓名', '职业'][data.TYPE_ID]
				}
				this.setState({
					dataSource: res.data.list,
					pagination
				})
			})
		})
	}
	// 修改一条数据
	updateDataSource = (data) => {
		api.system.updateStdcode(data).then(res => {
			this.setState({
				popShow: true
			})
			api.system.getListStdcode(1, 10, this.state.searchValues).then(res => {
				const pagination = { ...this.state.pagination }
				pagination.current = 1
				pagination.total = res.data.total
				for (let data of res.data.list) {
					data.TYPE_ID = ['全部', '姓名', '职业'][data.TYPE_ID]
				}
				this.setState({
					dataSource: res.data.list,
					pagination
				})
			})
		})
	}
	// 删除一条数据
	deleteDataSource = (key) => {
		api.system.deleteStdcode(key).then(res => {
			console.log(res)
			api.system.getListStdcode(1, 10, this.state.searchValues).then(res => {
				const pagination = { ...this.state.pagination }
				pagination.current = 1
				pagination.total = res.data.total
				for (let data of res.data.list) {
					data.TYPE_ID = ['全部', '姓名', '职业'][data.TYPE_ID]
				}
				this.setState({
					dataSource: res.data.list,
					pagination
				})
			})
		})
	}
	// 搜索
	search = () => {
		this.props.form.validateFields((err, values)=>{
			this.setState({
				searchValues: values
			})
			api.system.getListStdcode(1, 10, values).then(res => {
				const pagination = { ...this.state.pagination }
				pagination.current = 1
				pagination.total = res.data.total
				for (let data of res.data.list) {
					data.TYPE_ID = ['全部', '姓名', '职业'][data.TYPE_ID]
				}
				this.setState({
					dataSource: res.data.list,
					pagination
				})
			})
		})
	}
	// reload选项
	start = () => {
		this.setState({ loading: true })
		// ajax request after empty completing
		setTimeout(() => {
			this.setState({
				selectedRowKeys: [],
				loading: false,
			})
		}, 1000)
	}
	// 点击选择一行
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys)
    this.setState({ selectedRowKeys })
  }
	// 点击翻页
	handleTableChange = pagination => {
		const pager = { ...this.state.pagination }
		pager.current = pagination.current
		this.setState({
			pagination: pager,
		})
		api.system.getListStdcode( pagination.current, pagination.pageSize, this.state.searchValues).then(res => {
			const pagination = { ...this.state.pagination }
			this.setState({
				dataSource: res.data.list,
        pagination
			})
		})
	}

	render() { 
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const columns = [
			{
				title: '标准码ID',
				dataIndex: 'STANDARD_CODE_ID',
				key: 'STANDARD_CODE_ID',
				width: 100
			},
			{
				title: '标准码名称',
				dataIndex: 'STANDARD_CODE',
				key: 'STANDARD_CODE',
				width: 200
			},
			{
				title: '标准码类型',
				dataIndex: 'codeType.TYPE_NAME',
				key: 'codeType.TYPE_NAME',
				width: 200
			},
			{
				title: '描述',
				dataIndex: 'STANDARD_CODE_DESC',
				key: 'STANDARD_CODE_DESC',
				width: 100
			},
			{
				title: '操作',
				key: 'actions',
				width: 100,
				render: (text, record) => (
					<div>
						<Button icon='eye' type='default' size='small' onClick={() => this.sourceDetailSet(record.id)}>详情</Button>
						{/* <Button type='primary' onClick={() => this.sourceSet(record.id)}>修改</Button>
						<Button type='danger' onClick={() => this.deleteDataSource(record.id)}>删除</Button> */}
					</div>
				)
			}
		]
    const { loading, selectedRowKeys, searchDataSource, selectInitialValue } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    const hasSelected = selectedRowKeys.length > 0
		return ( 
			<div>
				<div>
					<Card title="标准码管理" extra={<div>
						{/* <Button icon='plus' type='primary' onClick={this.sourceAdd}>新增</Button> */}
						</div>}>
						<Form>
							<FormItem label="标准码" {...formItemLayout}
								style={{ display: 'inline-block', width: 'calc( 45% - 12px)' }}
							>
								{
									getFieldDecorator('STANDARD_CODE', {
										rules: [
											{
												required: false,
												message: '请输入标准码',
											},
										],
									})
									(<Input placeholder="请输入标准码" />)
								}
							</FormItem>
							<FormItem label="标准码类型" {...formItemLayout}
								style={{ display: 'inline-block', width: 'calc( 45% - 12px)' }}
							>
								{
									getFieldDecorator('TYPE_ID', {
										initialValue: selectInitialValue,
										rules: [
											{
												required: false,
												message: '请输入标准码类型',
											},
										],
									})(<Select style={{ width: 200 }}
										showSearch
										optionFilterProp="children"
										filterOption={(input, option) =>
											option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
										}
									>
										{searchDataSource.map((data) => (
											<option value={data.id}>{data.name}</option>
										))}
									</Select>)
								}
							</FormItem>
							<FormItem
								style={{ display: 'inline-block', width: 'calc( 10% - 12px)' }}
							>
								<Button icon='search' onClick={this.search} type='primary'>搜索</Button>
							</FormItem>
						</Form>
						<Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
							重置选择
						</Button>
						<span style={{ marginLeft: 8 }}>
							{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
						</span>
						<Table
							rowSelection={rowSelection}
							pagination={this.state.pagination}
							loading={this.state.loading}
							onChange={this.handleTableChange}
							columns={columns}
							dataSource={this.state.dataSource}
						></Table>
					</Card>
					{!this.state.popShow &&
						<StandardCodeSetPop
							title={this.state.popMode}
							onPopClose={this.closePop}
							onAdd={this.addDataSource}
							onUpdate={this.updateDataSource}
							data={this.state.popData}
							setMode={this.state.setMode}
						></StandardCodeSetPop>
					}
				</div>
			</div>
		)
	}
}
export default Form.create({ name: 'ecStandardCodeList' })(ecStandardCodeList);
//export default EcTashAdd;