import React, {
	useState,
	useEffect,
	forwardRef,
	useImperativeHandle,
} from 'react'
import { Button, Collapse, Divider, message, Tag, Empty } from 'antd'
import Enterthenextstage from '../../Enterthenextstage'
import { record, teacherstate } from '../../../util/requestURL'
import storageUtils from '../../../util/storageUtils'
import './index.css'
import {
	SettingOutlined,
	WarningFilled,
	DislikeOutlined,
	LikeOutlined,
} from '@ant-design/icons'

const { Panel } = Collapse

const InterviewTabs = ({ data, Tabsnum, setisfeedback, seefeedback },ref) => {
	const [isenterthenextstage, setisenterthenextstage] = useState(false)
	const [datalist, setdatalist] = useState([])
	let userinfo = storageUtils.getUser()

    console.log(ref)
    useImperativeHandle(ref, () => ({
        getData: updatarecord
    }))

	useEffect(() => {
		if (Tabsnum === '2') {
			updatarecord()
		}
	}, [Tabsnum])

	const updatarecord = () => {
		record({ uid: data.uid }).then(
			(res) => {
				// console.log(res)
				setdatalist(res.data)
			},
			(err) => {
				message.error('网络错误，请稍后再试')
			}
		)
	}

	const handelFeedback = (record) => {
		teacherstate({
			user_id: [record.interview_id],
			name: record.name,
		}).then(
			(res) => {
				if (res.code == 200) {
					message.success('发送成功')
				}
			},
			(error) => {
				message.error('网络加载错误，请稍后再试')
			}
		)
	}

	const onChange = (key) => {
		console.log(key)
	}

	const genExtra = () => (
		<SettingOutlined
			onClick={(event) => {
				// If you don't want click extra trigger collapse, you can prevent this:
				event.stopPropagation()
			}}
		/>
	)

	const handeladdinterview = () => {
		setisenterthenextstage(true)
	}

	return (
		<div className="InterviewTabs-box">
			<div className="InterviewTabs-top-buttom-box">
				<Button size="Large" onClick={handeladdinterview}>
					添加面试
				</Button>
				<label>导出面试反馈</label>
			</div>

			<div className="InterviewTabs-content-box">
				<Collapse defaultActiveKey="0" onChange={onChange}>
					{datalist.length > 0 ? (
						datalist.map((item, key) => {
							return (
								<Panel
									header={item.times}
									key={key}
									extra={genExtra()}
								>
									<div className="InterviewTabs-content-list-box">
										<label className="color2">
											面试地点
										</label>
										<span>
											武汉市洪山区野芷湖西路创意天地5号楼2层
										</span>
									</div>
									<div className="InterviewTabs-content-list-box">
										<label className="color2">
											面试负责人
										</label>
										<span>{item.hr_name}</span>
									</div>
									<Divider />
									<div className="InterviewTabs-content-list-box">
										<label className="color2">
											面试信息
										</label>
										<span>
											{' '}
											<Tag color="#22b8cf">初试</Tag>{' '}
											{/* {item.time} 时长：{item.duration} */}
										</span>
									</div>
									<div>
										{item.survey.map((items, keys) => {
											return (
												<div
													className="InterviewTabs-content-list-actionbar"
													key={keys}
												>
													<div className="InterviewTabs-content-list-left-box">
														<div className="InterviewTabs-content-list-left-name">
															{items.name}
														</div>
														<div>
															{!items.type ? (
																<div>
																	<WarningFilled
																		style={{
																			color: '#f57527',
																		}}
																	/>{' '}
																	未评估
																</div>
															) : items.teacher_back ===
															  1 ? (
																<div>
																	<LikeOutlined
																		style={{
																			color: '#2cda6c',
																		}}
																	/>{' '}
																	满意
																</div>
															) : items.teacher_back ===
															  2 ? (
																<div>
																	<LikeOutlined
																		style={{
																			color: '#2cda6c',
																		}}
																	/>{' '}
																	非常满意
																</div>
															) : items.teacher_back ===
															  3 ? (
																<div>
																	<DislikeOutlined
																		style={{
																			color: '#f7260f',
																		}}
																	/>{' '}
																	不满意
																</div>
															) : (
																<div>
																	<DislikeOutlined
																		style={{
																			color: '#f7260f',
																		}}
																	/>{' '}
																	非常满意
																</div>
															)}
														</div>
													</div>

													<div>
														{!items.type ? (
															<div>
																<Button
																	type="link"
																	onClick={() => {
																		handelFeedback(
																			item
																		)
																	}}
																>
																	催促反馈
																</Button>
																{userinfo.user_id ===
																	items.user_id ||
																userinfo.name ===
																	'root' ? (
																	<Button
																		type="link"
																		onClick={() => {
																			setisfeedback(
																				{
																					...items,
																					relevancy_id:
																						item.relevancy_id,
																				}
																			)
																		}}
																	>
																		填写反馈
																	</Button>
																) : (
																	''
																)}
															</div>
														) : (
															<div>
																<Button
																	type="link"
																	onClick={() => {
																		seefeedback(
																			{
																				...items,
																				relevancy_id:
																					item.relevancy_id,
																			}
																		)
																	}}
																>
																	查看反馈
																</Button>
															</div>
														)}

														{item.interview_sign !=
														0 ? (
															<Button type="link">
																面试未进行
															</Button>
														) : (
															''
														)}
													</div>
												</div>
											)
										})}
									</div>
								</Panel>
							)
						})
					) : (
						<div className="margintop30">
							<Empty description={'暂无数据'} />
						</div>
					)}
				</Collapse>
			</div>
			{/* 添加面试 */}
			<Enterthenextstage
				visible={isenterthenextstage}
				onCreate={() => {
					setisenterthenextstage(false)
				}}
				uid={data.uid}
				onCancel={() => {
					setisenterthenextstage(false)
				}}
			/>
		</div>
	)
}

export default forwardRef(InterviewTabs)