<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import {
  priceDetailColumns,
  priceDetailData,
  stationStrategyColumns,
  stationStrategyData,
} from './config-data';

// 价格明细表格配置
const priceDetailGridOptions: VxeGridProps = {
  columns: priceDetailColumns,
  data: priceDetailData,
  border: true,
  showHeaderOverflow: true,
  showOverflow: true,
  size: 'medium',
  // 关闭分页组件
  pagerConfig: false as any,
  // height: 'auto',
  // toolbarConfig: {
  //   custom: true,
  //   refresh: false,
  //   zoom: false,
  // },
  proxyConfig: {
    autoLoad: false,
  },
};

// 油站策略表格配置
const stationStrategyGridOptions: VxeGridProps = {
  columns: stationStrategyColumns,
  data: stationStrategyData,
  border: true,
  showHeaderOverflow: true,
  showOverflow: true,
  size: 'medium',
  // 关闭分页组件
  pagerConfig: false as any,
  // height: 'auto',
  // toolbarConfig: {
  //   custom: true,
  //   refresh: false,
  //   zoom: false,
  // },
  proxyConfig: {
    autoLoad: false,
  },
};

// 创建价格明细表格
const [PriceDetailTable] = useVbenVxeGrid({
  gridOptions: priceDetailGridOptions,
});

// 创建油站策略表格
const [StationStrategyTable] = useVbenVxeGrid({
  gridOptions: stationStrategyGridOptions,
});
</script>

<template>
  <div class="task-detail">
    <!-- 页面标题和操作区 -->
    <div class="task-header">
      <div class="left">
        <div style="font-size: 14px; font-weight: 400">
          <span>我方油价：</span>
          <span style="font-size: 14px; font-weight: 500">未来路加油站</span>
        </div>
        <div class="price-survey-info">
          <span>调查时间：</span>
          <span style="font-weight: 500">2025-10-29</span>
        </div>
      </div>
      <div class="right">
        <el-button type="primary">打印</el-button>
      </div>
    </div>

    <!-- 价格明细表格 -->
    <div class="table-section">
      <h4>价格明细：</h4>
      <PriceDetailTable />
    </div>

    <!-- 油站策略表格 -->
    <div class="table-section">
      <h4>油站策略：</h4>
      <StationStrategyTable />
    </div>
  </div>
</template>

<style scoped>
.task-detail {
  /* padding: 20px; */

  /* background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.task-header .left h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.price-survey-info {
  font-size: 14px;
  font-weight: 400;
  color: #666;
}

.task-header .right {
  display: flex;
  gap: 10px;
}

.table-section {
  margin-bottom: 30px;
}

.table-section h4 {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

:deep(.vxe-grid) {
  margin-bottom: 0;
}

:deep(.vxe-table--border) {
  border-color: #e8e8e8;
}

:deep(.vxe-header--column) {
  font-weight: 500;
  background-color: #fafafa;
}

:deep(.vxe-cell) {
  padding: 8px 12px;
}
</style>
