<script lang="ts" setup>
/**
 * @Name: DataTable.vue
 * @Description: 买家之声-数据表格
 * @Author: xinyan
 */
import { Refresh } from '@element-plus/icons-vue';
import { usePagination } from '/@/utils/usePagination';
import { useTableData } from '/@/utils/useTableData';
import DataTableSlot from './DataTableSlot.vue';
import * as api from '../api';
import { CustomerVoiceColumns } from '/@/views/customers-voice/Columns';
import ShowDetail from './show-detail/index.vue';

interface Parameter {
	asin: string;
	date: Array<string>;
}

const queryParameter: Parameter | undefined = inject('query-parameter');
const { tableOptions, handlePageChange } = usePagination(fetchList);

const gridRef = ref();
const gridOptions: any = reactive({
	size: 'mini',
	border: false,
	round: true,
	stripe: true,
	currentRowHighLight: true,
	height: '100%',
	toolbarConfig: {
		size: 'large',
		slots: {
			buttons: 'toolbar_buttons',
			tools: 'toolbar_tools',
		},
	},
	rowConfig: {
		isHover: true,
	},
	columnConfig: {
		resizable: true,
	},
	pagerConfig: {
		total: tableOptions.value.total,
		page: tableOptions.value.page,
		limit: tableOptions.value.limit,
	},
	loading: false,
	loadingConfig: {
		icon: 'vxe-icon-indicator roll',
		text: '正在拼命加载中...',
	},
	columns: '',
	data: '',
});

const btnLoading = ref(false);

const showOpen = ref(false);
const rowData = ref({});

const start_time = dayjs(queryParameter?.date[0]).format('YYYY-MM-DD');
const end_time = dayjs(queryParameter?.date[1]).format('YYYY-MM-DD');

onBeforeMount(() => {
	gridOptions.pagerConfig.limit = 10;
});

onMounted(() => {
	fetchList();
});

async function fetchList(isQuery = false) {
	if (isQuery) {
		gridOptions.pagerConfig.page = 1;
	}

	gridOptions.data = [];
	gridOptions.columns = [];

	const query = {
		search: queryParameter?.asin,
		start_time: start_time,
		end_time: end_time,
	};

	await useTableData(api.getTableData, query, gridOptions);
	if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(CustomerVoiceColumns);
	gridOptions.showHeader = Boolean(gridOptions.data?.length);
}

function handleRefresh() {
	fetchList();
}


function handleShow(row: any) {
	console.log(123);
	showOpen.value = true;
	rowData.value = row;
}

const gridEvents = {
	custom({ type }: any) {
		if (type == 'confirm') {
			fetchList();
		}
	},
};

function cellStyle() {
	return {
		fontWeight: 500,
	};
}

defineExpose({ fetchList });
</script>

<template>
	<vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions" v-on="gridEvents">
		<!-- 工具栏左侧 -->
		<template #toolbar_buttons>

		</template>
		<!-- 工具栏右侧 -->
		<template #toolbar_tools>
			<el-button circle class="toolbar-btn" @click="handleRefresh">
				<el-icon>
					<Refresh />
				</el-icon>
			</el-button>
		</template>
		<template #top>
			<div class="mb-2"></div>
		</template>
		<!-- 分页 -->
		<template #pager>
			<vxe-pager
				v-model:currentPage="gridOptions.pagerConfig.page"
				v-model:pageSize="gridOptions.pagerConfig.limit"
				:total="gridOptions.pagerConfig.total"
				class="mt-1.5"
				@page-change="handlePageChange"
			/>
		</template>
		<template #empty>
			<el-empty description="暂无数据" />
		</template>
		<!-- 自定义列插槽 -->
		<template v-for="col in CustomerVoiceColumns" #[`${col.field}`]="{ row }">
			<DataTableSlot :field="col.field" :row="row" @show-detail="handleShow"/>
		</template>
	</vxe-grid>
	<ShowDetail v-if="showOpen" v-model="showOpen" :rowData="rowData"/>
</template>

<style scoped>
.toolbar-btn {
	width: 34px;
	height: 34px;
	font-size: 18px;
}

:deep(.custom-el-input .el-select__wrapper) {
	border-radius: 20px;
}
</style>
