<template>
	<page-container>
		<!-- 页面操作栏 -->
		<template #ops>
			<a-row>
				<a-col :span="18">
					<a-input-search
						v-model:value="searchKey"
						:placeholder="`请输入`"
						allow-clear
						enter-button
						@search="loadData()"
					></a-input-search>
					<a-button type="primary" @click="downloadData()">导出</a-button>
				</a-col>
			</a-row>
		</template>
		<!-- 页面表格内容 -->
		<div style="min-height: calc(100vh - 305px)">
			<!-- 表格行 -->
			<a-table
				:columns="columns"
				:data-source="pagedata?.records"
				bordered
				:pagination="pagination"
				:loading="loading"
				row-key="key"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'applyTypeInfo'">
						{{ record.applyTypeInfo.description }}
					</template>
					<template v-if="column.dataIndex === 'reviewResult'">
						<template v-if="record.reviewResult === 'PASS'"><span style="color: #52c41a">审核通过</span></template>
						<template v-if="record.reviewResult === 'REJECT'"><span style="color: #f5222d">审核不通过</span></template>
					</template>
					<template v-if="column.dataIndex === 'operation'">
						<a-button
							v-if="record.applyType === 'SCRAP_OUT' && !record.confirm && record.reviewer === userStore.userName"
							type="link"
							style="margin-left: 10px"
							@click="showResultModal(record.applyId)"
						>
							审核
						</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</page-container>
	<!-- 审核弹窗 -->
	<a-modal v-model:open="openResult" title="报废出库数据：" width="80%" :confirm-loading="confirmLoading" @ok="submit">
		<vxe-table border show-overflow max-height="500" size="medium" :data="reviewData">
			<vxe-column type="seq" width="70" />
			<vxe-column field="name" title="物料名称" />
			<vxe-column field="typeName" title="类型" />
			<vxe-column field="spec" title="规格" />
			<vxe-column field="price" title="价格" />
			<vxe-column field="applicant" title="申请人" />
			<vxe-column field="confirmQuantity" title="报废数量" />
			<vxe-column field="remark" title="报废原因" />
		</vxe-table>
		<a-form layout="vertical" style="margin-top: 20px">
			<a-form-item label="审核意见">
				<a-textarea v-model:value="remark" placeholder="请输入审核意见" :row="3" :maxlength="1000" />
			</a-form-item>

			<a-form-item label="审核结果">
				<a-radio-group v-model:value="reviewResult" button-style="solid">
					<a-radio-button value="PASS">审核通过</a-radio-button>
					<a-radio-button value="REJECT" style="margin-left: 20px">审核不通过</a-radio-button>
				</a-radio-group>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import api from '@/api'
	import { IPage } from '@/api/api'
	import { useUserStore } from '@/stores/user'
	import { http } from '@/settings/http'

	const searchKey = ref('')
	const pagedata = ref<IPage<material.ApplyDTO>>()
	const loading = ref(false)

	const userStore = useUserStore()
	// 加载数据的方法
	const loadData = async (page = 1, size = 10) => {
		loading.value = true
		api.materialApi.apply.searchPage(
			{
				page: page,
				size: size,
				applyType: 3,
				type: searchKey.value,
				code: searchKey.value,
				name: searchKey.value,
			},
			(data) => {
				pagedata.value = data
				loading.value = false
			},
		)
	}
	//初始加载
	loadData()

	//导出数据
	const downloadData = () => {
		// 调用后端接口下载excel文件
		const url = `${http.prefix}/apply/download-excel?applyType=3&type=${searchKey.value}&code=${searchKey.value}&name=${searchKey.value}`
		window.open(url)
	}

	//表格列
	const columns = [
		{
			title: '序号',
			dataIndex: 'key',
			customRender: ({ index }: { index: number }) => `${index + 1}`,
		},
		{
			title: '物料名称',
			dataIndex: 'name',
		},
		{
			title: '物料类型',
			dataIndex: 'typeName',
		},
		{
			title: '物料编码',
			dataIndex: 'code',
		},
		{
			title: '出库类型',
			dataIndex: 'applyTypeInfo',
		},

		{
			title: '申请数量',
			dataIndex: 'applyNum',
		},
		{
			title: '确认数量',
			dataIndex: 'confirmNum',
		},
		{
			title: '申请人',
			dataIndex: 'applicant',
		},
		{
			title: '审核人',
			dataIndex: 'reviewer',
		},
		{
			title: '审核状态',
			dataIndex: 'reviewResult',
		},
		{
			title: '申请日期',
			dataIndex: 'applyDate',
		},
		{
			title: '备注',
			dataIndex: 'remark',
		},
		{
			title: '操作',
			dataIndex: 'operation',
		},
	]

	//分页信息
	const pagination = computed(() => {
		return {
			current: pagedata.value?.current,
			pageSize: pagedata.value?.size,
			total: pagedata.value?.total,
			onChange: (page: number, pageSize: number) => {
				loadData(page, pageSize)
			},
		}
	})

	// 审核
	const openResult = ref<boolean>(false)
	const confirmLoading = ref(false)
	const reviewResult = ref<'PASS' | 'REJECT'>('PASS')
	const remark = ref('')
	const reviewData = ref<Array<material.ScrapOutApplyDTO>>([])
	const applyIdRef = ref(0)
	//点击审核
	const showResultModal = (applyId: number) => {
		openResult.value = true
		applyIdRef.value = applyId
		api.materialApi.apply.getScrapOutById(applyId, (data) => {
			reviewData.value = data
		})
	}

	// 审核提交
	const submit = () => {
		confirmLoading.value = true
		api.materialApi.apply.submitScrapOutReview(
			{
				applyId: applyIdRef.value.toString(),
				reviewResult: reviewResult.value,
				remark: remark.value,
			},
			() => {
				confirmLoading.value = false
				openResult.value = false
				loadData()
			},
		)
	}
</script>
