<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";

const steps = reactive([
  {
    label: "估算",
  },
  {
    label: "概算",
    children: [
      {
        label: "-概算1",
        children: [
          {
            label: "--建安费预算",
          },
          {
            label: "--二类非预算",
          },
        ],
      },
      {
        label: "-概算2",
        children: [
          {
            label: "--建安费预算",
          },
          {
            label: "--二类非预算",
          },
        ],
      },
    ],
  },
  {
    label: "预算",
    children: [
      {
        label: "-预算1",
        children: [
          {
            label: "--总体调整",
          },
          {
            label: "--暂估价审核",
          },
          {
            label: "--变更审核",
          },
        ],
      },
      {
        label: "-预算2",
        children: [
          {
            label: "--总体调整",
          },
          {
            label: "--暂估价审核",
          },
          {
            label: "--变更审核",
          },
        ],
      },
    ],
  },
  {
    label: "结算",
    children: [
      {
        label: "-结算1",
      },
      {
        label: "-结算2",
      },
      {
        label: "-二类非结算",
      },
    ],
  },
  {
    label: "决算",
  },
]);
</script>

<template>
  <article class="process-page">
    <!-- <header class="header">
      <ul class="tabs">
        <li class="tab">预算</li>
        <li class="tab active">过程预算</li>
        <li class="tab">过程结算</li>
        <li class="tab">结算</li>
        <li class="tab">决算</li>
      </ul>
      <el-button type="primary">台账审核</el-button>
    </header> -->
    <div class="wrap">
      <el-affix :offset="130">
        <el-card header="步骤" shadow="never" class="step">
          <el-tree
            :data="steps"
            default-expand-all
            :expand-on-click-node="false"
          />
        </el-card>
      </el-affix>
      <el-card shadow="never" class="preview">
        <div class="btns"><el-button type="primary">台账审核</el-button></div>
        <div class="area">表单/文件</div>
        <div class="btn-wrap">
          <el-button type="success">审核通过</el-button>
          <el-button type="danger">审核退回</el-button>
        </div>
      </el-card>
    </div>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
