<script lang="ts" setup>
/**
 * @Name: SelectDrawer.vue
 * @Description: 成本选择抽屉
 * @Author: Cheney
 */

import { hasPermission } from '/@/utils/hasPermission';
import { Plus, Refresh } from '@element-plus/icons-vue';
import VerticalDivider from '/@/components/VerticalDivider/index.vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { usePagination } from '/@/utils/usePagination';
import { useTableData } from '/@/utils/useTableData';
import * as api from '../api';
import { CostSelectColumns } from '/@/views/price-approval/Columns';
import { useResponse } from '/@/utils/useResponse';
import CreateDialog from '/@/views/price-approval/cost-detail/component/CreateDialog.vue';

const isShow = defineModel({ default: false });

const props = defineProps({
	rowData: <any>Object,
	title: String,
});
const { rowData, title } = props;

const emit = defineEmits(['sendCheckId']);

const editDrawer = ref();

const queryRow = reactive<any>({});

const platformOptions = ref([]);
const stationOptions = ref([]);
provide('stationOptions', stationOptions);

const createOpen = ref(false);

const { tableOptions, handlePageChange } = usePagination(fetchList);

const checkedId = ref(rowData? rowData.cost : null);

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

onBeforeMount(() => {
	fetchList();
	fetchOptions();
});

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

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

	const query = {
		description: queryRow?.description,
		platform: queryRow?.platform,
		station: queryRow?.station,
	};

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

function handleRefresh() {
	fetchList();
}

function handleCreate() {
	createOpen.value = true;
}

async function fetchOptions() {
	const resp = (await useResponse(api.getCostOptions)).data;
	platformOptions.value = resp.platform_list;
	stationOptions.value = resp.station_list;
}

function radioChangeEvent({ row }: any) {
	checkedId.value = row.id;
	if (checkedId.value) {
		emit('sendCheckId', checkedId);
		editDrawer.value.handleClose();
	}
}

defineExpose({ editDrawer });
</script>

<template>
	<div class="drawer-container">
		<el-drawer
			ref="editDrawer"
			v-model="isShow"
			:destroy-on-close="true"
			:show-close="false"
			:title="`审批查看( ${title}) --> 成本选择`"
			direction="btt"
			size="80%"
			style="background-color: #f3f4fb"
		>
			<div class="px-5 mb-5">
				<el-card class="border-none mt-2">
					<!-- 查询条件 -->
					<div class="flex flex-1">
						<div class="w-full whitespace-nowrap">
							<el-row :gutter="20" style="margin-bottom: 5px">
								<el-col :span="5">
									<div class="flex items-center">
										<span class="mr-2">描 述</span>
										<el-input v-model="queryRow.description" clearable placeholder="请输入描述" @change="fetchList(true)" />
									</div>
								</el-col>
								<el-col :span="4" class="flex">
									<div class="flex items-center">
										<span class="mr-2">地 区</span>
										<el-select v-model="queryRow.station" clearable placeholder="请选择地区" @change="fetchList(true)">
											<el-option v-for="item in stationOptions" :key="item" :label="item" :value="item" />
										</el-select>
									</div>
								</el-col>
								<el-col :span="4">
									<div class="flex items-center">
										<span class="mr-2">平 台</span>
										<el-select v-model="queryRow.platform" placeholder="请选择平台" @change="fetchList(true)">
											<el-option v-for="item in platformOptions" :key="item" :label="item" :value="item" />
										</el-select>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
					<el-divider />
					<vxe-grid ref="gridRef" class="z-0" v-bind="gridOptions" @radio-change="radioChangeEvent">
						<template #toolbar_buttons>
							<div class="flex gap-2">
								<PermissionButton v-if="hasPermission('ReviewCreate')" :icon="Plus" plain round type="primary" @click="handleCreate">
									新 增
								</PermissionButton>
								<VerticalDivider class="px-1" style="margin-left: 7px" />
							</div>
						</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 #radio="{ row }">
							<el-radio-group v-model="checkedId" @change="radioChangeEvent({ row })">
								<el-radio :value="row.id"/>
							</el-radio-group>
						</template>
					</vxe-grid>
				</el-card>
			</div>
		</el-drawer>
		<CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
	</div>
</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
	border-bottom: none;
	font-weight: 500;
}

.drawer-container :deep(.el-drawer__title) {
	font-size: 18px;
}

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