<script lang="ts" setup name="DbTypeIndex">
import { getBizRuleByList } from '@/api/biz/bizRuleApi'

const state = reactive({
  loading: false,
  // 表格是否自适应高度
  tableAutoHeight: false,
  // 搜索
  search: {
    keywords: '',
  },
  // 列表数据
  dataList: [],
})

const getDataList = async () => {
  state.loading = true
  const { data } = await getBizRuleByList(state.search)
  state.dataList = data
  state.loading = false
}

onMounted(() => {
  getDataList()
})
</script>

<template>
  <div class="absolute-container">
    <tool-header title="操作规则" />

    <page-main>
      <tool-bar>
        <template #right>
          <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
          <el-button type="primary" @click="getDataList">
            <template #icon>
              <el-icon>
                <svg-icon name="i-ep:search" />
              </el-icon>
            </template>
          </el-button>
        </template>
      </tool-bar>

      <el-table v-loading="state.loading" class="list-table" :data="state.dataList" size="small" border stripe highlight-current-row height="100%">
        <el-table-column type="index" label="序号" width="60" header-align="center" align="center" />

        <el-table-column prop="ruleTitle" label="名称" header-align="center" align="center" width="200">
          <template #default="scope">
            <span>{{ scope.row.ruleTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="ruleDesc" label="说明" header-align="center" align="left">
          <template #default="scope">
            <span>{{ scope.row.ruleDesc }}</span>
          </template>
        </el-table-column>
      </el-table>
    </page-main>
  </div>
</template>

<style lang="scss" scoped>
.absolute-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    margin-bottom: 0;
  }

  .page-main {
    // 让 page-main 的高度自适应
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .search-container {
      margin-bottom: 0;
    }
  }
}
</style>
