<template>
  <el-tabs :tab-position="tabPosition" 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"></component>
    </el-tab-pane>
    <el-card>
      <!-- class="log-scroll" -->
      <div v-html="log" style="display: flex;align-items: center;"></div>
    </el-card>
  </el-tabs>
</template>

<script>
import { defineComponent, ref, getCurrentInstance } 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'
export default defineComponent({
  components: { RFID, InTask, OutTask, Query, Setting, ChannelSetting },
  setup() {
    const { proxy } = getCurrentInstance()
    const tabPosition = ref('bottom')
    const log = ref('')
    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-chaxun', template: 'Query'},
      {title: '通道配置', icon: 'iconfont icon-shezhi', template: 'ChannelSetting'},
    ]

    if (sessionStorage.getItem('bgColor')) {
      color.value = sessionStorage.getItem('bgColor')
    }

    console.log(color.value)
    
    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() {
      proxy.$refs.InTask[0].loadData()
      proxy.$refs.OutTask[0].loadData()
    }
    function handleLogChange(data) {
      log.value = data
    }
    return {
      tabPosition,
      tabList,
      log,
      color,
      tabChange,
      handleRefresh,
      handleLogChange
    }
  },
})
</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>
