import { defineComponent, type PropType, ref } from 'vue';
import { useCrud, useForm } from '@cool-vue/crud';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { isEmpty, orderBy } from 'lodash-es';
import { export_json_to_excel } from '../utils';
import { deepFind } from '/$/dict/utils';
import { useI18n } from 'vue-i18n';

export default defineComponent({
	name: 'cl-export-btn',

	props: {
		filename: [Function, String],
		autoWidth: {
			type: Boolean,
			default: true
		},
		bookType: {
			type: String,
			default: 'xlsx'
		},
		header: Array,
		columns: {
			type: Array as PropType<ClTable.Column[]>
		},
		data: [Function, Array],
		maxExportLimit: Number // 最大导出条数，不传或者小于等于0为不限制
	},

	setup(props, { slots }) {
		const { t } = useI18n();

		// crud
		const Crud = useCrud();

		// 表单
		const Form = useForm();

		// 加载状态
		const loading = ref(false);

		// 获取表头数据
		async function getHeader(columns: any[], fields: any[]) {
			return columns.filter(e => !e.hidden && fields.includes(e.prop)).map(e => e.label);
		}

		// 获取表格数据
		async function getData(): Promise<any[]> {
			const params = {
				...Crud.value?.paramsReplace(Crud.value.params),
				maxExportLimit: props.maxExportLimit,
				isExport: true
			};

			if (typeof props.data === 'function') {
				return props.data(params);
			} else {
				if (props.data) {
					return props.data;
				} else {
					if (Crud.value?.service) {
						return Crud.value?.service
							.page(params)
							.then(res => {
								return res.list.map((e, i) => {
									for (const k in e) {
										const col = props.columns?.find(c => c.prop == k);

										if (col) {
											// 格式化
											if (col.formatter) {
												e[k] = col.formatter(e, col, e[k], i);
											}

											// 字典
											if (col.dict) {
												e[k] =
													deepFind(e[k], col.dict as any)?.label || e[k];
											}
										}
									}

									return e;
								});
							})
							.catch(err => {
								ElMessage.error(err.message);
								return [];
							});
					} else {
						console.error('[cl-crud] Service is required');
						return [];
					}
				}
			}
		}

		// 获取文件名
		async function getFileName() {
			if (typeof props.filename === 'function') {
				return await props?.filename();
			} else {
				return props.filename || `Doc（${dayjs().format('YYYY-MM-DD HH_mm_ss')}）`;
			}
		}

		// 导出
		async function toExport(columns: ClTable.Column[]) {
			// 加载
			loading.value = true;

			// 字段
			const fields = columns.map(e => e.prop).filter(Boolean);

			// 表头
			const header = await getHeader(columns, fields);

			// 数据
			let data = await getData();

			if (!data) {
				loading.value = false;
				return ElMessage.error(t('导出数据异常'));
			}

			// 文件名
			const filename = await getFileName();

			// 过滤
			data = data.map(d => fields.map(f => d[f]));

			// 导出 excel
			export_json_to_excel({
				header,
				data,
				filename,
				autoWidth: props.autoWidth,
				bookType: props.bookType
			});

			loading.value = false;
		}

		function open() {
			if (!props.columns) {
				return console.error('[cl-export-btn] Columns is required');
			}

			// 表格列
			const columns = orderBy(props.columns, 'orderNum', 'asc').filter(
				e =>
					!(
						e.hidden === true ||
						['selection', 'expand', 'index', 'op'].includes(e.type) ||
						e.filterExport ||
						e['filter-export']
					)
			);

			Form.value?.open({
				title: t('导出'),
				width: '600px',
				props: {
					labelPosition: 'top'
				},
				form: {
					checked: columns.map(e => e.prop)
				},
				items: [
					{
						label: t('选择列'),
						prop: 'checked',
						component: {
							name: 'el-checkbox-group',
							options: columns.map(e => {
								return {
									label: String(e.label),
									value: e.prop
								};
							})
						}
					}
				],
				on: {
					submit(data, { close, done }) {
						if (isEmpty(data.checked)) {
							ElMessage.warning(t('请先选择要导出的列'));
							done();
						} else {
							toExport(columns.filter(e => data.checked.includes(e.prop)));
							close();
						}
					}
				}
			});
		}

		return () => {
			return (
				<el-button loading={loading.value} onClick={open}>
					{slots.default ? slots.default() : t('导出')}

					<cl-form ref={Form} />
				</el-button>
			);
		};
	}
});