<template>
	<div>
		<el-card shadow="hover">
			<QueryForm
				v-model="searchForm"
				:fields="searchFields"
				@search="onSearch"
				@reset="onReset"
				ref="queryFormRef"
			/>

			<el-row :gutter="10" style="padding-bottom: 10px">
				<el-col :span="1.5">
					<el-button type="primary" @click="handleAdd" v-auth="'api/v1/businesses/speciesName/add'"
						><el-icon><ele-Plus /></el-icon>新增</el-button
					>
				</el-col>
				<el-col :span="1.5">
					<el-button
						type="danger"
						:disabled="multiple"
						@click="handleDelete(null)"
						v-auth="'api/v1/businesses/speciesName/delete'"
						><el-icon><ele-Delete /></el-icon>删除</el-button
					>
				</el-col>
			</el-row>
			<ProTable
				ref="proTableRef"
				:columns="columns"
				:data="tableData.data"
				:loading="loading"
				:show-selection="true"
				@selection-change="handleSelectionChange"
			>
			</ProTable>
			<!-- 	<el-table-column
					label="操作"
					align="center"
					class-name="small-padding"
					min-width="160px"
					fixed="right"
				>
					<template #default="scope">
						<el-button
							type="primary"
							link
							@click="handleUpdate(scope.row)"
							v-auth="'api/v1/businesses/speciesName/edit'"
							><el-icon><ele-EditPen /></el-icon>修改</el-button
						>
						<el-button
							type="primary"
							link
							@click="handleDelete(scope.row)"
							v-auth="'api/v1/businesses/speciesName/delete'"
							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
						>
					</template>
				</el-table-column> -->
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="speciesNameList"
			/>
		</el-card>
		<ApiV1BusinessesSpeciesNameEdit
			ref="editRef"
			@speciesNameList="speciesNameList"
		></ApiV1BusinessesSpeciesNameEdit>
		<ApiV1BusinessesSpeciesNameDetail
			ref="detailRef"
			@speciesNameList="speciesNameList"
		></ApiV1BusinessesSpeciesNameDetail>
	</div>
</template>
<script setup lang="ts">
import { toRefs, reactive, onMounted, ref, getCurrentInstance, toRaw, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { listSpeciesName, delSpeciesName } from './api/index';
import { SpeciesNameTableColumns, SpeciesNameInfoData, SpeciesNameTableDataState } from './type';
import ApiV1BusinessesSpeciesNameDetail from './ApiV1BusinessesSpeciesNameDetail.vue';
import ApiV1BusinessesSpeciesNameEdit from './ApiV1BusinessesSpeciesNameEdit.vue';
import QueryForm from '/@/components/dynamicpage/queryForm/index.vue';
import ProTable from '/@/components/dynamicpage/ProTable/index.vue';
import { QueryFormField, TableColumn } from '/@/components/dynamicpage/type';
import { getUserList } from '/@/api/system/user/index';
import { UserItem } from '/@/types';
import { parseTime } from '/@/utils/gfast';
defineOptions({ name: 'apiV1DemoSpeciesNameList' });
const { proxy } = <any>getCurrentInstance();
const loading = ref(false);
const editRef = ref();
const detailRef = ref();

// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
const userOptions = ref<UserItem[]>([]);

const onSearch = async (val: Record<string, any>) => {
	console.log('搜索参数', val);
	state.tableData.param = { ...state.tableData.param, ...val };
	speciesNameList();
};
const onReset = () => {
	state.tableData.param = {
		pageNum: 1,
		pageSize: 10,
		id: undefined,
		speciesCode: undefined,
		name: undefined,
		content: undefined,
		sourcesData: undefined,
		createUser: undefined,
		createDate: undefined,
		auditUser: undefined,
		auditDate: undefined,
		dateRange: [],
	};
	speciesNameList();
};
const searchForm = ref<Omit<SpeciesNameInfoData, 'id' | 'remark' | 'content'>>({
	speciesCode: undefined,
	name: undefined,
	sourcesData: undefined,
	createUser: undefined,
	createDate: undefined,
	auditUser: undefined,
	auditDate: undefined,
});
const searchFields = computed<QueryFormField[]>(() => [
	{ label: '物种编码', prop: 'speciesCode', type: 'input', placeholder: '请输入物种编码' },
	{ label: '物种名称', prop: 'name', type: 'input', placeholder: '请输入物种名称' },
	{ label: '数据来源', prop: 'sourcesData', type: 'input', placeholder: '请输入数据来源' },
	{
		label: '数据采集人',
		prop: 'createUser',
		type: 'select',
		options: userOptions.value.map((i) => {
			return {
				label: i.userNickname,
				value: i.id,
			};
		}),
		placeholder: '请选择数据采集人',
	},
	{ label: '数据采集日期', prop: 'createDate', type: 'daterange', valueFormat: 'YYYY-MM-DD' },

	{
		label: '数据核查人',
		prop: 'auditUser',
		type: 'select',
		options: userOptions.value.map((i) => {
			return {
				label: i.userNickname,
				value: i.id,
			};
		}),
		placeholder: '请选择数据核查人',
	},
	{ label: '数据核查日期', prop: 'auditDate', type: 'daterange', valueFormat: 'YYYY-MM-DD' },
]);

const state = reactive<SpeciesNameTableDataState>({
	ids: [],
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
			id: undefined,
			speciesCode: undefined,
			name: undefined,
			content: undefined,
			sourcesData: undefined,
			createUser: undefined,
			createDate: undefined,
			auditUser: undefined,
			auditDate: undefined,
			dateRange: [],
		},
	},
});
const { tableData } = toRefs(state);
const columns: TableColumn[] = [
	{ label: '物种编码', prop: 'speciesCode' },
	{ label: '物种名称', prop: 'name' },
	{ label: '物种名称内容', prop: 'content' },
	{ label: '数据来源', prop: 'sourcesData' },
	{ label: '数据采集人', prop: 'createUser' },
	{ label: '数据采集日期', prop: 'createDate',isFormater:true,formater(row,col){
    console.log(row,col);
    
    return parseTime(row.createDate,'{y}-{m}-{d}')
  } },
	{ label: '数据核查人', prop: 'auditUser' },
	{ label: '数据核查日期', prop: 'auditDate' },
	{ label: '备注', prop: 'remark' },
];
const proTableRef = ref();
// 页面加载时
onMounted(() => {
	initTableData();
});
// 初始化表格数据
const initTableData = () => {
	speciesNameList();
	reqGetUserList();
};
// 获取列表数据
const speciesNameList = async () => {
	loading.value = true;
	const res = await listSpeciesName(state.tableData.param);
	let list = res.data.list ?? [];
	state.tableData.data = list;
	state.tableData.total = res.data.total;
	loading.value = false;
};
const reqGetUserList = async () => {
	if (userOptions.value.length > 0) return;
	const res = await getUserList({ pageSize: 9999, pageNum: 1 });
	userOptions.value = res.data.userList;
};
// 多选框选中数据
const handleSelectionChange = (selection: Array<SpeciesNameInfoData>) => {
	state.ids = selection.map((item) => item.id);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
};
const handleAdd = () => {
	editRef.value.openDialog();
};
const handleUpdate = (row: SpeciesNameTableColumns | null) => {
	if (!row) {
		row = state.tableData.data.find((item: SpeciesNameTableColumns) => {
			return item.id === state.ids[0];
		}) as SpeciesNameTableColumns;
	}
	editRef.value.openDialog(toRaw(row));
};
const handleDelete = (row: SpeciesNameTableColumns | null) => {
	let msg = '你确定要删除所选数据？';
	let id: number[] = [];
	if (row) {
		msg = `此操作将永久删除数据，是否继续?`;
		id = [row.id];
	} else {
		id = state.ids;
	}
	if (id.length === 0) {
		ElMessage.error('请选择要删除的数据。');
		return;
	}
	ElMessageBox.confirm(msg, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			delSpeciesName(id).then(() => {
				ElMessage.success('删除成功');
				speciesNameList();
			});
		})
		.catch(() => {});
};
</script>
