<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {GlobalStore} from '@/stores/index'
import TableBase from '@/components/TableBase/index.vue'
import {ColumnProps} from '@/components/TableBase/interface/index'
import {Purchase_Approval, Purchase_Audit_List, Purchase_Get} from '@/api/purchase/index'
import {PurchaseApproverInfoIn, useTablePublic} from '@/hooks/useTablePublic'

const TableRef = ref()
const globalStore = GlobalStore()
const initParam = {User_tokey: globalStore.GET_User_tokey}
const columns: ColumnProps[] = [{prop: 'T_uuid_name', label: '姓名'}]
const {tableRowClassName} = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.Id, userInfo.value.Id)
const gridData: any = ref([])
const userInfo: any = ref<PurchaseApproverInfoIn>({
	T_date: '',
	T_dept: '',
	T_uuid_name: '',
	T_State: 0,
	T_submit_name: '',
	T_approver_name: '',
	T_remark: '',
	T_Detail: '',
})


const getApproveParams = (row: any) => {
	userInfo.value.Id = ''
	// setTimeout(() => {
	//   userInfo.value = { ...row }
	// }, 100)

	nextTick(async () => {

		userInfo.value = {...row}
		// form.value.T_approver = row.T_approver_name
		// form.value.T_uuid = row.T_uuid_name
		const res: any = await Purchase_Get({T_id: row.Id})
		if (res.Code === 200) {
			userInfo.value = {...res.Data}
			// purchaseDetailRef.value?.setDetailData(res.Data.T_Detail)
		}

	})

}

const ApprovalPurchase = async (T_State: number) => {
	if (!userInfo.value.Id) return
	const params = {
		User_tokey: globalStore.GET_User_tokey,
		T_id: userInfo.value.Id,
		T_State
	}
	const res: any = await Purchase_Approval(params)
	if (res.Code === 200) {
		if (T_State) {
			ElMessage.success('审核通过！')
		} else {
			ElMessage.warning('审核不通过！')
		}
		nextTick(() => {
			TableRef.value.getTableList()
			userInfo.value = {} as PurchaseApproverInfoIn
		})
	}
}
</script>

<template>
	<div class="Overtime">
		<div style="width: 290px" class="Overtime-table">
			<TableBase
				ref="TableRef"
				:columns="columns"
				:requestApi="Purchase_Audit_List"
				:initParam="initParam"
				layout="prev, pager, next"
				:rowClick="getApproveParams"
				:tableRowClassName="tableRowClassNameHandle"
			>
				<template #table-header>
					<h3 class="title">待处理</h3>
				</template>
			</TableBase>
		</div>
		<transition
			leave-active-class="animate__animated animate__fadeOutRight"
			enter-active-class="animate__animated animate__fadeInLeft"
		>
			<el-row class="h-100 f-1 margin-left-3 Approver-container" v-if="userInfo.Id">
				<el-col :span="24" class="h-100" style="overflow: auto">
					<el-card class="m-b-3">
						<div class="Approver-content">
							<div>申请日期：{{ userInfo.T_date }}</div>
							<div>申请部门：{{ userInfo.T_dept }}</div>
							<div>申请人： {{ userInfo.T_uuid_name }}</div>
							<div>提交人： {{ userInfo.T_submit_name }}</div>
							<div>审批人： {{ userInfo.T_approver_name }}</div>
							<div>产品名称： {{ userInfo.T_product_name || '-' }}</div>
							<div>产品数量： {{ userInfo.T_product_quantity || '-' }}</div>
							<div>产品总价： {{ userInfo.T_total_price || '-' }}</div>
							<div>
								<span class="ml-3 w-35 text-gray-600 inline-flex items-center">备注：</span>
								{{ userInfo.T_remark }}
							</div>
							<div>采购明细：</div>

							<div>

								<el-table :data="userInfo.T_Detail" border max-height="100%">
									<el-table-column type="index" label="序号" width="80" align="center"/>
									<el-table-column property="T_name" label="名称" show-overflow-tooltip min-width="120"/>
									<el-table-column property="T_bit_number" label="位号" show-overflow-tooltip width="100"/>
									<el-table-column property="T_packaging" label="封装" show-overflow-tooltip width="100"/>
									<el-table-column property="T_model" label="型号" show-overflow-tooltip min-width="120"/>
									<el-table-column property="T_spec" label="规格" show-overflow-tooltip min-width="120"/>
									<el-table-column property="T_quantity" label="数量" width="80" align="center"/>
									<el-table-column property="T_demand" label="需求" show-overflow-tooltip min-width="140"/>
									<el-table-column property="T_unit_price" label="采购单价" width="100" align="center"/>
									<el-table-column property="T_amount" label="采购总价" width="100" align="center"/>
									<el-table-column label="参考网址" width="140" show-overflow-tooltip align="center">
										<template #default="{ row }">
											<a 
												v-if="row.T_reference_site" 
												:href="row.T_reference_site" 
												target="_blank" 
												style="color: #409eff; text-decoration: underline;"
											>
												{{ row.T_reference_site_title || '参考网址' }}
											</a>
														<!-- 如果没有链接地址但有标题，显示纯文本 -->
											<span v-else-if="row.T_reference_site_title">{{row.T_reference_site_title }}</span>
											<!-- 两者都没有，显示 - -->
											<span v-else>-</span>
										</template>
									</el-table-column>
									<el-table-column property="T_remark" label="备注" show-overflow-tooltip min-width="140"/>
									
								</el-table>
							</div>

						</div>
					</el-card>
					<div class="btn">
						<el-button type="primary" @click="ApprovalPurchase(1)">通过</el-button>
						<el-button type="danger" @click="ApprovalPurchase(4)">不通过</el-button>
					</div>
				</el-col>
			</el-row>
		</transition>
	</div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.Approver-container {
	z-index: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	.Approver-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: auto;
		// justify-content: space-between;
		margin-top: 20px;
		font-size: 16px;
		color: #8B8E94FF;
		div {
			margin-bottom: 10px;
		}
	}
}

.Overtime {
	display: flex;
	height: 100%;

	.Overtime-table {
		@include f-direction;
		z-index: 1;

		:deep(.table-header) {
			margin-bottom: 0;
		}
	}

	overflow: hidden;

	.img {
		width: 200px;
	}

	.b-show-0 {
		box-shadow: none;
		font-size: 16px;
		font-weight: 500;

		.el-row {
			margin-bottom: 10px;

			.el-col {
				padding: 15px;
			}
		}
	}

	:deep(.el-card .el-card__body) {
		font-weight: bold;
		// color: var(--el-text-color-secondary);
	}

	.f-1 {
		flex: 1;
	}

	.title {
		width: 100%;
		text-align: center;
	}

	.btn {
		margin-top: 1rem;
		display: flex;
		justify-content: center;

	}

	.info-content {
		display: flex;
		// color: #606266;

		.info-name {
			display: flex;
			// flex-direction: column;
			align-items: center;
			padding-left: 0.75rem;

			span:first-child {
				margin-right: 2rem;
			}
		}
	}
}
</style>
