<template>
	<div>
		<el-dialog v-model="show" title="预警信息" width="900px" append-to-body :close-on-click-modal="false" destroy-on-close center>
			<div class="warning_information_container">
				<div class="nav">
					<div class="nav_item" v-for="item in tabs" :key="item.key" :class="{ select_item: tabKey === item.key }" @click="tabKey = item.key">
						{{ item.name }}
					</div>
				</div>
				<!-- 有效期监测 -->
				<el-table v-show="tabKey==='inventory'" :data="inventoryDatas" size="mini" :height="400" stripe>
					<el-table-column label="序号" type="index" width="80"></el-table-column>
					<el-table-column label="药品名称" prop="ypmc"></el-table-column>
					<el-table-column label="规格" prop="gg"></el-table-column>
					<el-table-column label="批号" prop="rkph"></el-table-column>
					<el-table-column label="有效日期" prop="xq"></el-table-column>
					<el-table-column label="有效期(天)" prop="day_xqdq"></el-table-column>
					<el-table-column label="供应商" prop="gys" show-overflow-tooltip></el-table-column>
					<el-table-column label="生产厂家" prop="scs" show-overflow-tooltip></el-table-column>
				</el-table>
                <div v-show="tabKey==='inventory'" class="count_msg">
                    您有 <span class="blur_color">{{ inventoryDatas.length }}</span> 条药品有效期低于预警天数
                </div>
				<!-- 库存监测 -->
                <el-table v-show="tabKey==='validity'"  :data="validityDatas" size="mini" :height="400" stripe>
					<el-table-column label="序号" type="index" width="80"></el-table-column>
					<el-table-column label="药品名称" prop="ypmc"></el-table-column>
					<el-table-column label="规格" prop="gg"></el-table-column>
					<el-table-column label="库存" prop="kc"></el-table-column>
					<el-table-column label="单位" prop="dw"></el-table-column>
					<el-table-column label="预警值" prop="yjz"></el-table-column>
				</el-table>
                <div v-show="tabKey==='validity'" class="count_msg">
                    您有 <span class="blur_color">{{ validityDatas.length }}</span> 条药品低于库存监测数量
                </div>
			</div>
            <template #footer>
                <el-button @click="show=false">关闭</el-button>
            </template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useStore } from '/@/store';
import { listHisKcjcApi, listHisyxqjcApi } from '/@/api/fee/index';
export default defineComponent({
	name: 'InventoryMonitoring',
	setup() {
		const store = useStore();

		const show = ref(false);
		const loading = ref(false);
		const inventoryDatas = ref([]);
		const validityDatas = ref([]);
		const tabKey = ref<'inventory' | 'validity'>('validity'); // inventory库存 validity有效期
		const tabs = ref([
			{ key: 'validity', name: '库存监测' },
			{ key: 'inventory', name: '有效期监测' },
		]);

		const clientCode = computed(() => {
			// @ts-ignore
			return store.state.userInfos.userInfos.client.code;
		});

		/** 剩余库存低于预警值 */
		const getInventoryFun = async () => {
			const { data } = await listHisKcjcApi(clientCode.value);
			return data;
		};

		/** 有效期低于预警天数 */
		const getValidityFun = async () => {
			const { data } = await listHisyxqjcApi(clientCode.value);
			return data;
		};

		const init = async () => {
			loading.value = true;
			try {
				const result = await Promise.all([getInventoryFun(), getValidityFun()]);

				if (result[0] && result[0].length > 0) {
					validityDatas.value = result[0];
					tabKey.value = 'inventory';
				}
				if (result[1] && result[1].length > 0) {
					inventoryDatas.value = result[1];
					tabKey.value = 'validity';
				}
				if (inventoryDatas.value.length > 0 || validityDatas.value.length > 0) {
					show.value = true;
				}
			} finally {
				loading.value = false;
			}
		};

		return {
			show,
			tabs,
			tabKey,
			inventoryDatas,
			validityDatas,
			init,
		};
	},
});
</script>

<style lang="scss" scoped>
.warning_information_container {
	.nav {
		display: flex;
		align-items: center;
		.nav_item {
			background: #fff;
			color: #333;
			padding: 8px 14px;
			font-size: 14px;
			border-radius: 5px 5px 0 0;
			box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.12);
			transition: 0.3s;
			&:hover {
				cursor: pointer;
			}
			&.select_item {
				background: #6babfa;
				color: #fff;
			}
		}
	}
    .count_msg {
        line-height: 34px;
        font-size: 14px;
        padding-left: 20px;
        text-align: right;
        .blur_color {
            color: #409eff;
        }
    }
}
</style>