<script setup lang="ts">
import {validation_Stat, validation_User_List} from '@/api/storehouse'
import {reactive, ref} from 'vue'
import {UserFilled} from '@element-plus/icons-vue'
import TableBase from '@/components/TableBase/index.vue'
import {useTablePublic} from '@/hooks/useTablePublic'
import {ColumnProps} from '@/components/TableBase/interface/index'

interface UserInfoIn {
	LendUser: string
	TotalCount: number
}

const userInfo = ref<UserInfoIn>({
	LendUser: '',
	TotalCount: 0,
})
const columns: ColumnProps[] = [{prop: 'LendUser', label: '姓名'}]
const columnsStat: ColumnProps[] = [
	{type: 'index', label: '序号', width: 80},
	{prop: 'LendUser', label: '借出人'},
	{prop: 'T_project', label: '借出项目'},
	{prop: 'T_state', label: '状态', name: 'T_state'},
	{prop: 'TotalCount', label: '数量'},
]
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const {tableRowClassName, globalStore,} = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, userInfo.value.LendUser)
const initParam = reactive({User_tokey: globalStore.GET_User_tokey, LendUser: userInfo.value.LendUser, page_z: 99})
const getUserParams = (row: any) => {
	userInfo.value.LendUser = ''
	setTimeout(() => {
		userInfo.value = {...row}
		initParam.LendUser = userInfo.value.LendUser
	}, 100)
}
</script>
<template>
	<div class="project">
		<div style="width: 290px" class="project-table">
			<TableBase
				:columns="columns"
				:requestApi="validation_User_List"
				:initParam="{ User_tokey: globalStore.GET_User_tokey }"
				layout="prev, pager, next"
				:rowClick="getUserParams"
				: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"
		>
			<div class="project-container" v-if="userInfo.LendUser">
				<el-card class="box-card">
					<h3 class="text title m-b-5">员工基本信息</h3>
					<div class="info-content">
						<el-avatar shape="square" size="large" :icon="UserFilled"/>
						<div class="info-name">
							<h4>借出人：{{ userInfo.LendUser }}</h4>
							<h4>借出总数量： {{ userInfo.TotalCount }}</h4>
						</div>
					</div>
				</el-card>
				<TableBase
					ref="TableRef"
					:columns="columnsStat"
					:requestApi="validation_Stat"
					:initParam="initParam"
					:displayHeader="true"
					:pagination="false"
				>
					<template #T_state="{ row }">
						<el-tag v-if="row.T_state == 1" type="success" effect="dark"> 已出库</el-tag>
						<el-tag v-if="row.T_state == 2" effect="dark">未出库</el-tag>
						<el-tag v-if="row.T_state == 3" effect="dark" type="warning">维修中</el-tag>
						<el-tag v-if="row.T_state == 4" effect="dark" type="danger">已报废</el-tag>
						<el-tag v-if="row.T_state == 5" effect="dark" type="info">已损坏</el-tag>
						<el-tag v-if="row.T_state == 6" effect="light" type="warning">转移中</el-tag>
					</template>
				</TableBase>
			</div>
		</transition>
	</div>
</template>

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

.project {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;

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

	.project-container {
		@include f-direction;
		width: calc(100% - 290px);
		z-index: 0;
		margin-left: 12px;

		.box-card {
			border-radius: 8px;
		}

		:deep(.el-table .cell) {
			white-space: normal !important;
		}

		.text {
			text-align: left;
		}

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

			.info-name {
				flex: 1;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-left: 0.75rem;
			}
		}
	}

	:deep(.table-header),
	:deep(.card) {
		margin: 0;
		border-radius: 8px;
	}

	.title {
		width: 100%;
		text-align: center;
		line-height: 1.7em;
		font-size: 20px;
		color: #707b84;
	}
}
</style>
