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, Upload, Progress } from 'antd';
import DataTashSetPop from '../popComponents/DataTashSetPop'
import echarts from 'echarts';
require('./ecPayAlarm.css')

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

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

class ecPayAlarm extends Component {
	constructor(props) {
			super(props)
			this.state = {
				dataSource: [],
				batchNameList: [],
				selectInitialValue: '',
				selectedRowKeys: [], // Check here to configure the default column
				loading: false,
				popShow: true,
				popMode: '',
				popData: {},
				setMode: '',
				pagination: {},
				fileList: [],
				percent: 0,
				percentMode: false,
				resultMode: false,
				uploading: false,
				fileName: '点击右侧按钮上传文件',
				defaultZzjgdm: '',
				chartTitle: '',
				searchValues: {'hylx': null, 'zzjgdm': null}
			}
	}

	// 页面加载函数
	componentDidMount() {
		api.system.getListPayAlarm(1, 10, {'hylx': null, 'zzjgdm': null}).then(res => {
			const pagination = { ...this.state.pagination }
			pagination.current = 1
			pagination.total = res.data.total
			this.setState({
				dataSource: res.data.list,
				chartTitle: res.data.list[0].qymc,
				pagination
			})
			api.system.getListPayAlarmChart(res.data.list[0].zzjgdm).then(result => {
				this.setEcharts(result)
			})
		})
	}
	// 生成两个图表
	setEcharts = (res) => {
		// 柱状图
		var barChart = echarts.init(document.getElementById('barChart'))
		var barOption = {
			title: {
				text: this.state.chartTitle
			},
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c}"
			},
			legend: {
				data: ['纳税金额', '社保人数'],
				left: 'right',
				top: 'bottom'
			},
			xAxis: [{
				type: 'category',
				data: [res.data.backPayTrend[0].jd, res.data.backPayTrend[1].jd, res.data.backPayTrend[2].jd, res.data.backPayTrend[3].jd],
				axisPointer: {
					type: 'shadow'
				}
			}],
			yAxis: [
				{
					type: 'value',
					name: '纳税金额',
					min: 0,
					max: 1000000,
					interval: 100000,
					barWidth: 20,
					axisLabel: {
						formatter: '¥ {value}'
					}
				},
				{
					type: 'value',
					name: '社保人数',
					min: 0,
					max: 1000,
					interval: 100,
					barWidth: 20,
					axisLabel: {
						formatter: '{value}'
					}
				}
			],
			series: [
				{
					name: '纳税金额',
					type: 'bar',
					data: [res.data.backPayTrend[0].nsje, res.data.backPayTrend[1].nsje, res.data.backPayTrend[2].nsje, res.data.backPayTrend[3].nsje],
					itemStyle: {
						normal:{  
							color: '#FF0000'
						}
					}
				},
				{
					name: '社保人数',
					type: 'bar',
					yAxisIndex: 1,
					data: [res.data.backPayTrend[0].sbrs, res.data.backPayTrend[1].sbrs, res.data.backPayTrend[2].sbrs, res.data.backPayTrend[3].sbrs],
					itemStyle: {
						normal:{  
							color: '#0000EE'
						}
					}
				}
			]
		}
		barChart.setOption(barOption)
		
		// 雷达图
		var radarChart = echarts.init(document.getElementById('radarChart'))
		var radarOption = {
			title: {},
			tooltip: {},
			radar: {
				name: {
					textStyle: {
						color: 'black',
						backgroundColor:'skyblue',
						borderRadius: 3,
						padding: [3, 5]
					}
				},
				indicator: [
					{name: '负面舆情', max: 1},
					{name: '欠薪信访', max: 1},
					{name: '行政处罚', max: 1},
					{name: '社保欠费', max: 1},
					{name: '经营状况', max: 1}
				]
			},
			series: {
				name: '能力',
				type: 'radar',
				areaStyle: {normal: {}},
				data: [
					{
						name: "value",
						value: [
							res.data.backPayWeight.fmyq,
							res.data.backPayWeight.qxxf,
							res.data.backPayWeight.xzcf,
							res.data.backPayWeight.sbqf,
							res.data.backPayWeight.jyzk
						],
						areaStyle: {
							normal: {
								color: 'rgba(0, 128, 255, 0.8)' // 系列颜色
							}
						},
						lineStyle: {
							normal: {
								color: 'rgba(0, 0, 255, 0.8)' // 闭合线颜色
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 255, 0.8)', // 圆点颜色
							}
						}
					}
				]
			}
		}
		radarChart.setOption(radarOption)
		setTimeout(function (){
			window.onresize = () => {
				barChart.resize();
				radarChart.resize();
			}
		}, 200)
	}
	// 选择一条数据
	sourceDetailSet = (id, qymc) => {
		api.system.getListPayAlarmChart(id).then(res => {
			console.log(res)
			this.setState({
				chartTitle: qymc
			})
			this.setEcharts(res)
		})
	}
	// 搜索
	search = () => {
		this.props.form.validateFields((err, values)=>{
			this.setState({
				searchValues: values
			})
			api.system.getListPayAlarm(1, 10, values).then(res => {
				const pagination = { ...this.state.pagination }
				pagination.current = 1
				pagination.total = res.data.total
				this.setState({
					dataSource: res.data.list,
					chartTitle: res.data.list.length ? res.data.list[0].qymc : '',
					pagination
				})
				api.system.getListPayAlarmChart(res.data.list[0].zzjgdm).then(result => {
					this.setEcharts(result)
				})
			})
		})
	}
	// 点击翻页
	handleTableChange = pagination => {
		const pager = { ...this.state.pagination }
		pager.current = pagination.current
		this.setState({
			pagination: pager,
		})
		api.system.getListPayAlarm(pagination.current, pagination.pageSize, this.state.searchValues).then(res => {
			const pagination = { ...this.state.pagination }
			pagination.total = res.data.total
			this.setState({
				dataSource: res.data.list,
				chartTitle: res.data.list.length ? res.data.list[0].qymc : '',
				pagination
			})
			api.system.getListPayAlarmChart(res.data.list[0].zzjgdm).then(result => {
				this.setEcharts(result)
			})
		})
	}

	render() { 
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const { dataSource, batchNameList, selectInitialValue, uploading, fileList, percent } = this.state
		const columns = [
			{
				title: '行业类型',
				dataIndex: 'hylx',
				key: 'hylx',
				render: (text, record) => (
					<div>
						<div onClick={() => {this.props.history.push('/main/ecBaseDataSet/EcDataSourceList/EcDataSourceList')}}>{text}</div>
					</div>
				)
			},
			{
				title: '企业名称',
				dataIndex: 'qymc',
				key: 'qymc'
			},
			{
				title: '统一社会信用代码',
				dataIndex: 'zzjgdm',
				key: 'zzjgdm'
			},
			{
				title: '经营地址',
				dataIndex: 'jydz',
				key: 'jydz'
			},
			{
				title: '电话',
				dataIndex: 'qydh',
				key: 'qydh'
			},
			{
				title: '法人名称',
				dataIndex: 'frmc',
				key: 'frmc'
			},
			{
				title: '法人电话',
				dataIndex: 'frdh',
				key: 'frdh'
			},
			{
				title: '企业职工数量',
				dataIndex: 'qyzgsl',
				key: 'qyzgsl'
			},
			{
				title: '欠薪预警等级',
				dataIndex: 'qxyjdj',
				key: 'qxyjdj',
				className: 'alarmGrad'
			},
			{
				title: '操作',
				key: 'actions',
				render: (text, record) => (
					<div>
						<Button icon='eye' type='default' size='small' onClick={() => this.sourceDetailSet(record.zzjgdm, record.qymc)}>查看</Button>
					</div>
				)
			}
		]
    const { loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    const hasSelected = selectedRowKeys.length > 0
		return ( 
			<div>
				<div>
					<Card title="企业欠薪预警">
						
						<FormItem label="行业类型" {...formItemLayout}
							style={{ display: 'inline-block', width: 'calc( 30% - 12px )' }}
						>
							{
								getFieldDecorator('hylx', {
									initialValue: '0',
									rules: [
										{
											required: false,
											message: '请输入行业类型',
										},
									],
								})(<Select style={{ width: '200px' }}>
									<option value='0'>全部</option>
									<option value="租赁/商务服务">租赁/商务服务</option>
									<option value="建筑业">建筑业</option>
									<option value="IT互联网行业">IT互联网行业</option>
									<option value="房地产">房地产</option>
									<option value="科学研究/技术服务">科学研究/技术服务</option>
									<option value="制造行业">制造行业</option>
									<option value="批发/零售业">批发/零售业</option>
									<option value="文化/体育/娱乐业">文化/体育/娱乐业</option>
									<option value="农/林/牧/渔业">农/林/牧/渔业</option>
									<option value="运输/物流/仓储">运输/物流/仓储</option>
									<option value="居民服务/修理">居民服务/修理</option>
									<option value="住宿/餐饮业">住宿/餐饮业</option>
									<option value="采矿业">采矿业</option>
									<option value="电/热/煤/水业">电/热/煤/水业</option>
									<option value="金融行业">金融行业</option>
									<option value="教育培训行业">教育培训行业</option>
									<option value="水利/环境/公共设施">水利/环境/公共设施</option>
									<option value="卫生/社会工作">卫生/社会工作</option>
								</Select>)
							}
						</FormItem>
						
						<FormItem label="统一社会信用代码" {...formItemLayout}
							style={{ display: 'inline-block', width: 'calc( 40% - 12px )' }}
						>
							{
								getFieldDecorator('zzjgdm', {
									initialValue: null,
									rules: [
										{
											required: false,
											message: '请输入统一社会信用代码',
										},
									],
								})(<Input placeholder='请输入统一社会信用代码'/>)
							}
						</FormItem>
						
						<FormItem
							style={{ display: 'inline-block', width: 'calc(10% - 12px)', marginLeft: '10px' }}
						>
							<Button icon='search' onClick={this.search} type='primary'>搜索</Button>
						</FormItem>
						
						<div id='barChart' style={{ display: 'inline-block', width: 'calc( 50% - 5px )', height: '400px', background: 'rgb(232,237,237)', borderRadius: '5px', marginRight: '10px' }}></div>
						<div id='radarChart' style={{ display: 'inline-block', width: 'calc( 50% - 5px )', height: '400px', background: 'rgb(232,237,237)', borderRadius: '5px' }}></div>
						<Table
							rowKey={record => record.id}
							bordered
							rowClassName={(record, index) => {
								let className = 'light-row'
								if (record.qxyjdj === '一级') className = 'class-1st'
								if (record.qxyjdj === '二级') className = 'class-2nd'
								if (record.qxyjdj === '三级') className = 'class-3rd'
								if (record.qxyjdj === '四级') className = 'class-4th'
								if (record.qxyjdj === '五级') className = 'class-5th'
								return className
							}}
							pagination={this.state.pagination}
							loading={this.state.loading}
							onChange={this.handleTableChange}
							columns={columns}
							dataSource={this.state.dataSource}
						></Table>
					</Card>
				</div>
			</div>
		)
	}
}
export default Form.create({ name: 'ecPayAlarm' })(ecPayAlarm);
//export default EcTashAdd;