<script setup lang="ts">
import { ElCard } from 'element-plus';

import { useVbenForm } from '#/adapter/form';

import { formSchema } from './config-data';

const [BaseForm] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 在label后显示一个冒号
    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 180,
  },
  fieldMappingTime: [['rangePicker', ['startTime', 'endTime'], 'YYYY-MM-DD']],
  // 提交函数
  handleSubmit: onSubmit,
  showDefaultActions: false,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: formSchema(),
  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
});

async function onSubmit(): Promise<void> {
  //
}
</script>

<template>
  <ElCard class="mb-5 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>
    <BaseForm />
  </ElCard>
</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>
