import { useParams, useNavigate, NavLink } from "react-router-dom";
import { useEffect, useState, useRef } from "react";
import { observer } from "mobx-react";
import { toJS, runInAction } from "mobx";
import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Descriptions } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons";
import { isNotEmpty } from "@/utils/commons";
import * as config from "@/config";
import dayjs from "dayjs";

const { Title } = Typography;
const { TextArea } = Input;

function Detail() {
	const navigate = useNavigate();
	const { GMDSN, GSN } = useParams();
	const { invoiceStore, authStore } = useStore();
	const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail } = invoiceStore;
	const [form] = Form.useForm();
	const [dataLoading, setDataLoading] = useState(false);
	const { formCurrency, onCurrencyChange } = useState();
	const { notification } = App.useApp();

	const [invoicePicList, setInvoicePicList] = useState([]);

	useEffect(() => {
		console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
		defaultShow();
	}, [GMDSN, GSN]);

	function defaultShow() {
		setDataLoading(true);
		invoiceStore
			.fetchInvoiceDetail(GMDSN, GSN)
			.then(json => {
				let ZDDetail = json.ZDDetail;
				let arrLen = ZDDetail.length;
				const formData = ZDDetail.map((data, index) => {
					if (data.GMD_Dealed == false && arrLen == index + 1) {
						//只有最后一条账单未审核通过才显示
						runInAction(() => {
							invoiceStore.invoiceFormData = { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
						});
						return { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
					}
				});

				if (form) {
					form.setFieldsValue(formData[arrLen - 1]); //{'info_money':'111','info_Currency':'THB','info_date':''}
				}

				//图片列表
				let arrPicList = ZDDetail.map((data, index) => {
					const GMD_Pic = data.GMD_Pic;
					let picList = [];
					if (isNotEmpty(GMD_Pic)) {
						let js_Pic = JSON.parse(GMD_Pic);
						picList = js_Pic.map((picData, pic_Index) => {
							return {
								uid: -pic_Index, //用负数，防止添加删除的时候错误
								name: "",
								status: "done",
								url: picData.url,
							};
						});
					}
					if (data.GMD_Dealed == false && arrLen == index + 1) {
						runInAction(() => {
							invoiceStore.invoicekImages = picList;
						});
					}
					return picList;
				});
				setInvoicePicList(arrPicList);
			})
			.catch(ex => {
				notification.error({
					message: `Notification`,
					description: ex.message,
					placement: "top",
					duration: 4,
				});
			})
			.finally(() => {
				setDataLoading(false);
			});
	}

	const fileList = toJS(invoicekImages);
	//图片列表
	let arrimg = [];
	if (isNotEmpty(fileList)) {
		arrimg = fileList.map((data, index) => {
			return {
				url: data.url,
			};
		});
	}
	const onFinish = values => {
		const fieldVaule = {
			...values,
			info_date: isNotEmpty(values["info_date"]) ? values["info_date"].format("YYYY-MM-DD") : null,
			info_images: JSON.stringify(arrimg),
		};
		console.log("Success:", fieldVaule);
		//入库
		if (fieldVaule) {
			invoiceStore.postEditInvoiceDetail(fieldVaule.info_gmdsn, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then(data => {
				console.log(data);
				runInAction(() => {
					let param = { info_money: fieldVaule.info_money, info_Currency: fieldVaule.info_Currency, info_date: fieldVaule.info_date };
					invoiceStore.invoiceFormData = param;
				});
				if (data.errcode == 0) {
					notification.success({
						message: `Notification`,
						description: "Success Submit!",
						placement: "top",
						duration: 4,
					});
				}
			});
		}
	};

	const handleChange = info => {
		console.log(info);
		let newFileList = [...info.fileList];
		newFileList = newFileList.map(file => {
			if (file.response && file.response.result) {
				file.url = file.response.result.file_url;
			}
			return file;
		});
		runInAction(() => {
			invoiceStore.invoicekImages = newFileList;
		});
	};

	const handRemove = info => {
		console.log(info);
		invoiceStore.removeFeedbackImages(info.url);
		return true;
	};

	//币种
	function bindCurrency() {
		let arr = [];
		arr = invoiceCurrencyList.map((data, index) => {
			return {
				value: data.CRI_Code,
				label: data.CRI_Name,
			};
		});

		return arr;
	}

	function addInvoice() {
		invoiceStore
			.postAddInvoice(GSN, "", 0, "", "[]", "")
			.then(data => {})
			.finally(() => {
				defaultShow();
			});
	}

	function addButton(check) {
		if (check) {
			return (
				<Row>
					<Divider orientation="left"></Divider>
					<Button type="primary" block onClick={() => addInvoice(confirm)}>
						ADD New Invoice
					</Button>
				</Row>
			);
		}
	}

	//循环生成多次报账信息
	function bindSubmitForm() {
		let submitForm = invoiceZDDetail.map((data, index) => {
			if (data.GMD_Dealed) {
				//已审核的直接显示信息即可，无需表单
				return (
					<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
						<Col span={4}></Col>
						<Col span={18}>
							<Descriptions column={4} title={"Invoice " + index + 1}>
								<Descriptions.Item span={4}>
									<Upload
										name="ghhfile"
										// accept="image/*" 不限制类型
										multiple={true}
										action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
										fileList={invoicePicList[index]}
										listType="picture-card"></Upload>
								</Descriptions.Item>
								<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
								<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
								<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
								<Descriptions.Item label="Status">{invoiceStore.invoiceStatus(data.FKState)}</Descriptions.Item>
							</Descriptions>

							{addButton(index + 1 == invoiceZDDetail.length)}
						</Col>
						<Col span={4}></Col>
					</Row>
				);
			} else {
				// 一个团只能有一个未审核的账单记录
				return (
					<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
						<Col span={4}></Col>
						<Col span={18}>
							<Form name="invoice_submit" onFinish={onFinish} labelCol={{ span: 5 }} form={form} style={{ backgroundColor: "#fff", padding: "20px" }}>
								<Divider orientation="left">Invoice {index + 1}</Divider>
								<Form.Item>
									<Upload
										name="ghhfile"
										multiple={true}
										action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
										fileList={fileList}
										listType="picture-card"
										onChange={handleChange}
										onRemove={handRemove}>
										<div>
											<PlusOutlined />
											<div style={{ marginTop: 8 }}>Click to Upload</div>
										</div>
									</Upload>
								</Form.Item>
								<Divider orientation="left">Details</Divider>
								<Row gutter={16}>
									<Col span={8}>
										{" "}
										<Form.Item
											name="info_money"
											label="Amount："
											rules={[
												{
													required: true,
													message: "Please input your money!",
												},
											]}>
											<Input />
										</Form.Item>
									</Col>
									<Col span={8}>
										<Form.Item
											name="info_Currency"
											label="Currency："
											rules={[
												{
													required: true,
													message: "Please select Currency type!",
												},
											]}>
											<Select placeholder="Select Currency type" onChange={onCurrencyChange} options={bindCurrency()}></Select>
										</Form.Item>
									</Col>
									<Col span={8}>
										<Form.Item name="info_date" label="Due Date: ">
											<DatePicker />
										</Form.Item>
									</Col>
								</Row>
								<Form.Item name="info_gmdsn" hidden={true}>
									<input />
								</Form.Item>
								<Form.Item>
									<Button type="primary" htmlType="submit">
										Submit
									</Button>
								</Form.Item>
							</Form>
						</Col>
						<Col span={4}></Col>
					</Row>
				);
			}
		});
		return submitForm;
	}

	return (
		<>
			<Space direction="vertical" style={{ width: "100%" }}>
				<Row gutter={16}>
					<Col span={20}>
						<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
					</Col>
					<Col span={4}>
						<Button type="link" onClick={() => navigate("/invoice")}>
							Back
						</Button>
					</Col>
				</Row>
				<Title level={5}></Title>
				{bindSubmitForm()}
			</Space>
		</>
	);
}

export default observer(Detail);