<template>
  <!-- 业务配置页面 -->
  <DialogComponent :style="{ resize: 'both', overflow: 'auto' }" title="业务配置" width="1800" :draggable="true" :modal="false" @close="close">
    <div class="tabs-container">
        <el-tabs v-model="type" tab-position="left" class="tabs">
            <el-tab-pane v-for="item in tabs"
                :key="item.value"
                :label="item.label"
                :name="item.value">
                <template #label>
                    <span class="custom-tabs-label">
                    <span>{{item.label}}</span>
                    <el-icon v-if="type == item.value"><CaretRight /></el-icon>
                    </span>
                </template>
            </el-tab-pane>
        </el-tabs>
        <CCTVComponent v-if="type === 'cctv'"/>
    </div>
  </DialogComponent>
</template>
<script setup>
import { CaretRight } from '@element-plus/icons-vue'
import DialogComponent from '@/components/Dialog/screen.vue'
import CCTVComponent from './monitor/index.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const tabs = ref([
  {
    value: 'cctv',
    label: 'CCTV'
  },
  {
    value: 'UAV',
    label: '无人机'
  }
])
const type = ref('cctv')

const close = () => {
  router.push('/')
}

</script>
<style scoped lang="scss">
.tabs-container{
    display: flex;
    width: 100%;
}
.el-tabs {
  box-sizing: border-box;
  :deep(.el-tabs__header){
    &.is-left{
        margin-right: 20px !important;
    }
    .el-tabs__nav-wrap::after {
      background-color: rgba(0, 192, 255, 0.2) !important;
    }
    .el-tabs__item {
      width: 200px;
      color: rgba(68, 165, 255, 1);
      justify-content: center;
      &.is-active{
        color: #00C0FF;
        background: rgba(10, 169, 255, 0.15);
        .el-icon{
            position: absolute;
            right: 0;
        }
      }
    }
    .el-tabs__item.is-disabled {
      cursor: not-allowed;
    }
    .el-tabs__active-bar {
      background-color: #00C0FF;
    }
  }
}
.content{
  width: calc(100% - 220px);
}
</style>
