<template>
  <Breadcrumb />
  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :xs="24">
      <el-card
        shadow="always"
        class="custom-card"
        style="margin-bottom: 0"
        :body-style="{ paddingTop: '16px', paddingBottom: '0' }"
      >
        <template #header>
          <span style="">{{ title }}</span>
        </template>
        <el-tabs
          v-model="activeName"
          type="border-card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="tab in tabList"
            :key="tab.name"
            :name="tab.name"
          >
            <template #label>
              <el-icon><component :is="tab.icon" /></el-icon>
              <span style="margin-left: 4px">{{ tab.label }}</span>
            </template>
            <template v-if="tab.src && activeName === tab.name">
              <CustomIframe :src="tab.src" minHeight="calc(100vh - 300px)" />
            </template>
            <template v-else-if="tab.name === 'abnormal-record'">
              異常紀錄
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import Breadcrumb from "../components/Common/Breadcrumb.vue";
import CustomIframe from "../components/Common/CustomIframe.vue";
import {
  Odometer,
  Postcard,
  ScaleToOriginal,
  Document,
  Coin,
  Warning,
  Operation,
} from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();
const title = computed(() => {
  if (route.params.id === "1") return "四磺子坪";
  if (route.params.id === "2") return "宜蘭大清水";
  if (route.params.id === "3") return "宜蘭小清水";
  return "";
});

const siteId = computed(() => {
  if (route.params.id === "1") return "J022270001";
  if (route.params.id === "2") return "J033110001";
  if (route.params.id === "3") return "J033110002";
  return "";
});

const activeName = ref("system-status");
const handleClick = (tab, event) => {
  console.log("tab", tab, event);
};

const tabList = computed(() => [
  {
    name: "system-status",
    label: "系統狀態",
    icon: Odometer,
    src: `/ord/station:|slot:/${siteId.value}/PID|view:?fullScreen=true`,
  },
  {
    name: "realtime-info",
    label: "即時資訊",
    icon: Postcard,
    src: `/ord/station:|slot:/${siteId.value}/RealTimeInformation|view:?fullScreen=true`,
  },
  {
    name: "basic-info",
    label: "基本資料",
    icon: ScaleToOriginal,
    src: `/ord/station:|slot:/${siteId.value}/Information|view:?fullScreen=true`,
  },
  // {
  //   name: "device-info",
  //   label: "設備資訊",
  //   icon: Document,
  //   src: `/ord/station:|slot:/${siteId.value}/DeviceInformation|view:?fullScreen=true`,
  // },
  {
    name: "history-data",
    label: "歷史資料",
    icon: Coin,
    src: `/ord/station:|slot:/${siteId.value}/History|view:?fullScreen=true`,
  },
  {
    name: "abnormal-record",
    label: "異常紀錄",
    icon: Warning,
    src: null,
  },
]);
</script>

<style scoped>
:deep(.el-tabs__header) {
  background-color: transparent;
}

.el-tabs--border-card {
  border: none;
}

:deep(.el-tabs__item) {
  margin-top: 0px !important;
  margin-left: 0px !important;
  font-size: 1rem;
}

:deep(.el-tabs__item.is-active) {
  border-top-color: var(--el-border-color);
}

:deep(.el-tabs--border-card) > .el-tabs__content {
  padding: 10px 0px;
}
</style>
