<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import Awards from './components/awards/index.vue';
import BaseInfo from './components/base-info/detail.vue';
import Principal from './components/principal/index.vue';
import RoadCondition from './components/road-condition/index.vue';
import Scheduling from './components/scheduling/index.vue';
import Structure from './components/structure/index.vue';

const tabsValue = ref('base');
</script>

<template>
  <Page title="油站信息维护">
    <template #description>
      <!-- <div class="text-muted-foreground">
        <p>维护油站基础信息</p>
      </div> -->
      <ElTabs v-model="tabsValue">
        <ElTabPane label="基础信息" name="base" />
        <ElTabPane label="基本配置" name="config" />
        <ElTabPane label="辅助功能区" name="auxiliary" />
        <ElTabPane label="辅助生活区" name="auxiliaryLiving" />
        <ElTabPane label="其他信息" name="other" />
      </ElTabs>
    </template>
    <div class="flex flex-wrap">
      <ElCard v-if="tabsValue === 'base'" class="w-full">
        <template #header>
          <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >油站概况
              </span>
            </div>
            <ElButton type="primary" size="small" @click="openDrawer">
              编辑
            </ElButton>
          </div>
        </template>
        <BaseInfo />
      </ElCard>
      <ElCard v-if="tabsValue === 'base'" class="w-full">
        <template #header>
          <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
                >主要负责人/安管
              </span>
            </div>
            <ElButton type="primary" size="small" @click="openDrawer">
              新增
            </ElButton>
          </div>
        </template>
        <Principal />
      </ElCard>
      <ElCard v-if="tabsValue === 'base'" class="w-full">
        <template #header>
          <div class="flex items-center gap-4">
            <div
              style="width: 4px; height: 12px; background-color: #215acd"
            ></div>
            <span
              class="text-lg font-bold text-gray-800"
              style="font-size: 14px; font-weight: 600"
              >奖励证书
            </span>
          </div>
        </template>
        <Awards />
      </ElCard>
      <ElCard v-if="tabsValue === 'base'" class="w-full">
        <template #header>
          <div class="flex items-center gap-4">
            <div
              style="width: 4px; height: 12px; background-color: #215acd"
            ></div>
            <span
              class="text-lg font-bold text-gray-800"
              style="font-size: 14px; font-weight: 600"
              >道路条件
            </span>
          </div>
        </template>
        <RoadCondition />
      </ElCard>
      <ElCard v-if="tabsValue === 'base'" class="w-full">
        <template #header>
          <div class="flex items-center gap-4">
            <div
              style="width: 4px; height: 12px; background-color: #215acd"
            ></div>
            <span
              class="text-lg font-bold text-gray-800"
              style="font-size: 14px; font-weight: 600"
              >油站结构
            </span>
          </div>
        </template>
        <Structure />
      </ElCard>
      <ElCard v-if="tabsValue === 'base'" class="w-full">
        <template #header>
          <div class="flex items-center gap-4">
            <div
              style="width: 4px; height: 12px; background-color: #215acd"
            ></div>
            <span
              class="text-lg font-bold text-gray-800"
              style="font-size: 14px; font-weight: 600"
              >排班信息
            </span>
          </div>
        </template>
        <Scheduling />
      </ElCard>
      <!-- <ElCard v-if="tabsValue === 'images'">
        <ImagesComp />
      </ElCard>
      <ElCard v-if="tabsValue === 'files'">
        <FilesComp />
      </ElCard> -->
    </div>
  </Page>
</template>

<style scoped>
:deep(.el-card) {
  border: none !important;
  box-shadow: none !important;
  /* background: transparent !important; */
}
:deep(.el-card__header) {
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  padding-left: 0px !important;

  border-bottom: none !important;
}
:deep(.el-card__body) {
  padding-top: 0px !important;
}
</style>
