import { useCrud } from '@cool-vue/crud';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { renderNode } from '@cool-vue/crud';
import { cloneDeep } from 'lodash-es';
import { reactive } from 'vue';
import { useRefs } from '/@/cool';

/**
 * 行编辑
 * @returns
 */
export function rowEdit() {
	return ({ exposed }) => {
		const Crud = useCrud();
		const { t } = useI18n();
		const { refs, setRefs } = useRefs();

		// 配置
		const { columns } = exposed.config as ClTable.Config;

		// 可编辑列
		const list = columns.filter(e => e.edit?.enable === true || e.edit === true);

		// 操作列
		const op = columns.find(e => e.type === 'op');

		// 编辑信息
		const edit = reactive({});

		// 列点击
		exposed.config.on.onCellClick = (
			row: any,
			column: any,
			cell: HTMLTableCellElement,
			event: Event
		) => {
			const item = list.find(e => e.prop == column.property);

			if (item) {
				edit[row.id] = {
					data: cloneDeep(row),
					loading: false,
					[`show_${column.property}`]: true
				};

				// 延迟
				setTimeout(() => {
					refs[`${row.id}_${column.property}`]?.focus();
				}, 300);
			}
		};

		// 设置值的格式化
		list.forEach(e => {
			e._formatter = e.formatter;

			e.formatter = (row, column, value) => {
				const id = `${row.id}_${e.prop}`;

				if (edit[row.id] && edit[row.id][`show_${column.property}`]) {
					if (e.edit?.component) {
						return renderNode(e.edit.component, {
							prop: e.prop,
							scope: row,
							ref: setRefs(id)
						});
					}

					return (
						<el-input
							ref={setRefs(id)}
							v-model={row[e.prop]}
							clearable
							placeholder={t('请输入')}
						/>
					);
				} else {
					return value;
				}
			};
		});

		if (op) {
			if (!op._buttons) {
				op._buttons = op.buttons || ['edit', 'delete'];
			}

			// 操作按钮
			op.buttons = ({ scope }) => {
				const ed = edit[scope.row.id];

				if (ed) {
					return [
						{
							label: t('保存'),
							type: 'success',
							props: {
								loading: ed.loading
							},
							async onClick() {
								ed.loading = true;

								await Crud.value?.service
									.update(scope.row)
									.then(() => {
										ElMessage.success(t('操作成功'));
										delete edit[scope.row.id];
									})
									.catch(err => {
										ElMessage.error(err.message);
										edit[scope.row.id].loading = false;
									});
							}
						},
						{
							label: t('取消'),
							onClick() {
								if (ed) {
									for (const i in ed.data) {
										scope.row[i] = ed.data[i];
									}

									delete edit[scope.row.id];
								}
							}
						}
					];
				} else {
					return op._buttons;
				}
			};
		}
	};
}
