<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
const searchKey = ref("");
const projectType = ref("");
const projectTypeOptions = reactive([
  {
    label: "房建",
    value: "house",
  },
  {
    label: "市政",
    value: "city",
  },
]);

const projectList = reactive([
  {
    name: "市妇幼保健医院新址配套市政道路工程",
    process: "预算",
    step: "(2) 收件员预审项目",
    submit: "0.00",
    increase: "0.00",
    decrease: "0.00",
    offset: "0.00",
  },
  {
    name: "梧桐路（石花西路）电力改迁工程",
    process: "结算",
    step: "(1) 建设单位报审项目",
    submit: "0.00",
    increase: "0.00",
    decrease: "0.00",
    offset: "0.00",
  },
  {
    name: "珠海城市职业技术学院机电学院、航空与海洋工程珠海城市职业技术学院机电学院、航空与海洋工程",
    process: "预算",
    step: "(1) 建设单位报审项目",
    submit: "0.00",
    increase: "0.00",
    decrease: "0.00",
    offset: "0.00",
  },
  {
    name: "珠海城市职业技术学院机电学院、航空与海洋工程",
    process: "预算",
    step: "(5) 主审人编制审核方案",
    submit: "0.00",
    increase: "0.00",
    decrease: "0.00",
    offset: "0.00",
  },
]);
</script>

<template>
  <article class="project-list-page">
    <header class="header">投资项目</header>

    <!-- 过滤栏 -->
    <ul class="filter-bar">
      <li class="item search">
        <el-input v-model="searchKey" placeholder="搜索项目">
          <template #prefix>
            <iconfont class="dsk-search" />
          </template>
        </el-input>
      </li>
      <li class="item">
        <el-select v-model="projectType" placeholder="工程类型">
          <el-option
            v-for="item in projectTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <li class="item">
        <el-select v-model="process" placeholder="项目流程">
          <el-option
            v-for="item in processOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <li class="item check-step">
        <el-select v-model="checkStep" placeholder="审核步骤">
          <el-option
            v-for="item in checkStepOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>

      <li class="item time-order">
        <el-select v-model="timeOrder" placeholder="按流程时间排序">
          <el-option
            v-for="item in timeOrderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <li class="item setting">
        <iconfont class="dsk-config" />
      </li>
    </ul>

    <!-- 列表 -->
    <el-table :data="projectList">
      <el-table-column prop="name" label="项目名称" :min-width="310">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="process" label="项目流程" :min-width="85" />
      <el-table-column prop="step" label="当前步骤" :min-width="160" />
      <el-table-column
        prop="submit"
        label="送审金额(元)"
        align="center"
        :min-width="128"
      />
      <el-table-column
        prop="increase"
        label="审增金额(元)"
        align="center"
        :min-width="128"
      />
      <el-table-column
        prop="decrease"
        label="审减金额(元)"
        align="center"
        :min-width="128"
      />
      <el-table-column
        prop="offset"
        label="品迭金额(元)"
        align="center"
        :min-width="128"
      />
      <template #empty>
        <el-empty :image-size="120" description="暂无项目" />
      </template>
    </el-table>
  </article>
</template>

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