<template>
  <div class="bottom-content">
    <div class="tabs">
      <div class="tabs-content">
        <div :class="tabActive === '0' ? 'tab tab-active' : 'tab'" @click="handleClickTab('0')">事件信息</div>
        <div :class="tabActive === '1' ? 'tab tab-active' : 'tab'" @click="handleClickTab('1')">任务指令</div>
      </div>
      <EventInfo v-show="tabActive === '0'" :eventId="eventId" />
      <TaskCommand v-show="tabActive === '1'" :eventId="eventId" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import EventInfo from './EventInfo.vue'
import {ref} from "vue";
import TaskCommand from "@/views/mobileControl/TaskCommand.vue";

defineProps({
  eventId: String
});
// 底部信息栏
let tabActive = ref('0');

const handleClickTab = (index) => {
  tabActive.value = index;
};

</script>

<style lang="scss" scoped>
.bottom-content {
  width: 100%;
  height: 304px;
  background-color: #fff;
  border: 0.5px solid #EAEDF7;
  box-shadow: 0 0 4px 0 #4554661a;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  .tabs {
    width: 100%;
    height: 41px;
    background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
    border-radius: 2px 2px 0 0;
    //padding: 0 13px;
    .tabs-content {
      width: 100%;
      border-bottom: 1px solid #F6F6F6;
      display: flex;
    }
    .tab {
      flex: 1;
      height: 41px;
      line-height: 41px;
      text-align: center;
      color: #414f64;
    }
    .tab-active {
      position: relative;
      color: #2c81ff;
      &::before {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 2px;
        background: #2C81FF;
      }
    }
  }
}
</style>
