<template>
	<el-tabs :tab-position="tabPosition" v-model="activeIndex" type="card" :stretch="true" class="menu-tabs"
		@tab-change="tabChange" :style="{ backgroundColor: color }">
		<el-tab-pane v-for="item in tabList" :key="item.title">
			<template #label>
				<span class="custom-tabs-label">
					<i :class="item.icon" style="font-size: 24px;margin-right: 10px;color: #fff;"></i>
					<span class="tabfont">{{ item.title }}</span>
				</span>
			</template>
			<component :is="item.template" :ref="item.template" @refresh="handleRefresh" @logChange="handleLogChange"
				@changeTab="handleChangeTab"></component>
		</el-tab-pane>
		<el-card>
			<!-- class="log-scroll" -->
			<div v-html="log" style="font-weight: 550;font-family: Times New Roman;display: flex;align-items: center;"></div>
		</el-card>
	</el-tabs>
</template>

<script>
import { defineComponent, ref, getCurrentInstance, onMounted } from 'vue'
import RFID from './RFID.vue'
import InTask from './InTask.vue'
import OutTask from './OutTask.vue'
import Query from './Query.vue'
import Setting from './Setting.vue'
import ChannelSetting from './ChannelSetting.vue'
import NoOrder from './NoOrder.vue'
import BasicData from './BasicData.vue'
export default defineComponent({
	components: { RFID, InTask, OutTask, Query, Setting, ChannelSetting, NoOrder, BasicData },
	setup() {
		const { proxy } = getCurrentInstance()
		const tabPosition = ref('bottom')
		const log = ref('')
		const activeIndex = ref('0')
		const color = ref('#1f8a36')
		const tabList = [
			{ title: '射频识别', icon: 'iconfont icon-tiaozhishibie', template: 'RFID' },
			// {title: '入库作业', icon: 'iconfont icon-rukuguanli-', template: 'InTask'},
			// {title: '出库作业', icon: 'iconfont icon-chukuguanli-', template: 'OutTask'},
			{ title: '手动设置', icon: 'iconfont icon-shezhi', template: 'Setting' },
			// {title: '无单据上报', icon: 'iconfont icon-tiaozhishibie', template: 'NoOrder'},
			{ title: '查询', icon: 'iconfont icon-chaxun', template: 'Query' },
			{ title: '通道配置', icon: 'iconfont icon-shezhi', template: 'ChannelSetting' },
			{ title: '基础信息', icon: 'iconfont icon-tiaozhishibie', template: 'BasicData' },
		]




		if (sessionStorage.getItem('bgColor')) {
			color.value = sessionStorage.getItem('bgColor')
		} else {
			sessionStorage.setItem('bgColor', '#1f8a36')
		}

		onMounted(() => {
			setTimeout(() => {
				changeBg()
			}, 200)
		});

		function changeBg() {
			for (var i = 0; i < document.getElementsByClassName('el-card__header').length; i++) {
				document.getElementsByClassName('el-card__header')[i].style.backgroundColor = color.value
			}
		}

		function tabChange(index) {
			if (index == 0) {
				return
			}
			proxy.$refs[tabList[index].template][0].loadData()
		}

		function handleRefresh() {
			console.log('刷新起点')
			setTimeout(() => {
				proxy.$refs.InTask[0].loadData()
				proxy.$refs.OutTask[0].loadData()
				proxy.$refs.NoOrder[0].getTableData()

			}, 500)
		}
		function handleLogChange(data) {
			log.value = data
		}
		function handleChangeTab() {
			activeIndex.value = '5'
		}
		return {
			activeIndex,
			tabPosition,
			tabList,
			log,
			color,
			tabChange,
			handleRefresh,
			handleLogChange,
			handleChangeTab
		}
	},
})
</script>

<style scope>
.tabfont {
	font-family: '微软雅黑';
	font-size: 30px;
	font-weight: 550;
	color: aliceblue;
}

.log-scroll {
	display: inline-block;
	white-space: nowrap;
	animation: scroll 20s linear infinite;
}

@keyframes scroll {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0%);
	}
}

.red {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: red;
	margin: 0 10px 0 10px;
}

.green {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: green;
	margin: 0 10px 0 10px;
}

.gray {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: gray;
	margin: 0 10px 0 10px;
}
</style>
