<template>
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template #title>
              <span class="collapse-title">顶部数据配置</span>
            </template>
            <el-form-item label="字号：" class="font-size-class">
              <el-input-number v-model="form.headerFontSize" style="width: 100%;" size="mini" placeholder="请输入" :controls="false" />
            </el-form-item>
            <el-table :data="form.headerColumns" row-key="column" style="width: 100%" class="data-table" size="mini" border :header-cell-class-name="headerCellStyle">
              <el-table-column prop="column" label="字段名称" align="center">
                <template #default="scope">
                  <span>{{ scope.row.column }}</span>
                </template>
              </el-table-column>
              <el-table-column label="启用" align="center" width="90">
                <template #default="scope">
                  <el-switch v-model="scope.row.checked" :active-value="activeValue" :inactive-value="inActiveValue" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="排序" align="center">
                <Sort class="custom-icon-sort" />
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template #title>
              <span class="collapse-title">表单数据配置</span>
            </template>
            <el-form-item label="字号：" class="font-size-class">
              <el-input-number v-model="form.tableFontSize" style="width: 100%;" size="mini" placeholder="请输入" :controls="false" />
            </el-form-item>
            <el-form-item label="行高：" class="font-size-class">
              <el-input-number v-model="form.tableHeight" style="width: 100%;" size="mini" placeholder="请输入" :controls="false" />
            </el-form-item>
            <el-form-item label="默认条数：" class="font-size-class">
              <el-input-number v-model="form.defaultCount" style="width: 100%;" size="mini" placeholder="请输入" :controls="false" />
            </el-form-item>
            <el-table :data="form.tableColumns" style="width: 100%" class="data-table" size="mini" border :header-cell-class-name="headerCellStyle">
              <el-table-column prop="column" label="字段名称" align="center">
                <template #default="scope">
                  <span>{{ scope.row.column }}</span>
                </template>
              </el-table-column>
              <el-table-column label="启用" align="center" width="90">
                <template #default="scope">
                  <el-switch v-model="scope.row.checked" :active-value="activeValue" :inactive-value="inActiveValue" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="表格横宽" align="center">
                <template #default="scope">
                  <el-input-number v-model="scope.row.width" style="width: 80px;" size="mini" placeholder="请输入" :controls="false" />
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template #title>
              <span class="collapse-title">底部数据配置</span>
            </template>
            <el-form-item label="字号：" class="font-size-class">
              <el-input-number v-model="form.footerFontSize" style="width: 100%;" size="mini" placeholder="请输入" :controls="false" />
            </el-form-item>
            <el-table :data="form.footerColumns" row-key="column" style="width: 100%" class="data-table" size="mini" border :header-cell-class-name="headerCellStyle">
              <el-table-column prop="column" label="字段名称" align="center">
                <template #default="scope">
                  <span>{{ scope.row.column }}</span>
                </template>
              </el-table-column>
              <el-table-column label="启用" align="center" width="90">
                <template #default="scope">
                  <el-switch v-model="scope.row.checked" :active-value="activeValue" :inactive-value="inActiveValue" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="排序" align="center">
                <i class="el-icon-s-order icon-large" />
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
</template>
<script setup>
import { ref } from 'vue'
import { ElCollapse, ElCollapseItem, ElFormItem, ElInputNumber, ElTable, ElTableColumn, ElSwitch } from 'element-plus'
import { Sort } from '@element-plus/icons-vue';
const activeNames = ref(['1', '2', '3', '4']) 
const activeValue = ref(1)
const inActiveValue = ref(0)
const form = ref({
        headerFontSize: 12,
        headerColumns: [
            { column: '姓名', checked: 1 },
            { column: '性别', checked: 1 },
            { column: '年龄', checked: 1 }
        ],
        tableColumns: [],
        footerColumns: []
})
</script>
<style lang="less" scoped>
.collapse-title, .font-size-class {
  margin-left: 10px;
}
.font-size-class {
  margin-right: 10px;
}
.custom-icon-sort {
  height: 24px;
  width: 24px;
}
</style>