<script setup lang="ts">
import { ref } from 'vue';
import spTask from './SpTask.vue';
import RightTabs from '@/components/RightTabs/RightTabs.vue';
import { IconRemind } from '@computing/opendesign-icons';

const currentIdx = ref('0');
const tabList: any[] = [
  {
    index: '0',
    label: 'SP_TASK_OS_DEPLOYMENT',
    id: 'spTask0',
  },
  {
    index: '1',
    label: 'IBMC_MANUAL_UPGRADE',
    id: 'spTask1',
  },
  {
    index: '2',
    label: 'HARDWARE_DIAGNOSIS',
    id: 'spTask2',
  },
];

const handleSelect = (key: any) => {
  currentIdx.value = key;
};
</script>
<template>
  <div id="spTaskTypeBox" class="sp-task-box">
    <div id="spTaskTips" class="alert">
      <el-icon>
        <IconRemind />
      </el-icon>
      <span class="text">
        {{ $t('SP_TASK_TIP') }}
      </span>
    </div>
    <RightTabs
      :id="'spTaskTypeTabs'"
      :check-tab-index="currentIdx"
      :tab-list="tabList"
      @handle-select="handleSelect"
    />
    <spTask v-if="currentIdx === '0'" type="OS" />
    <spTask v-if="currentIdx === '1'" type="Update" />
    <spTask v-if="currentIdx === '2'" type="Diagnose" />
  </div>
</template>
<style lang="scss" scoped>
.sp-task-box {
  flex: 1;
  margin-right: 24px;
  display: flex;
  flex-direction: column;

  :deep(.el-table+.el-pagination) {
    margin-top: 16px;
  }
}
.alert {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--o-color-state-primary-secondary);
  border-radius: 4px;

  .el-icon {
    font-size: 16px;
    margin-right: 8px;
  }

  .text {
    color: var(--o-text-color-primary);
  }
}
</style>
