<template>
  <div>
    <cms-page-form
      :form-model="formModel"
      :form-collapse-item="formCollapseItem">
      <template slot="baseInfo">
        <cms-form-item label="账户名称">
          <cms-form-input v-model.trim="formModel.name" placeholder="请输入名称"></cms-form-input>
        </cms-form-item>
        <cms-form-item label="账户名称">
          <cms-form-select-tree
            v-model="formModel.field103"
            requestCall="https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData"
            placeholder="请选择选择下拉树"
            filterable clearable
            :form-model="formModel"
            :style="{width: '100%'}"
          />
        </cms-form-item>
      </template>
      <template slot="tableInfo">
        <form-table-demo/>
      </template>
      <template slot="modalInfo">
        <form-modal-demo/>
      </template>
      <template slot="treeInfo">
        <form-tree-demo/>
      </template>
      <template slot="dynamicTable">
        <dynamic-table-demo :fixed-height="true" height="400px"/>
      </template>
    </cms-page-form>
  </div>
</template>

<script>
import FormTableDemo from "@/views/form/form-table-demo";
import FormModalDemo from "@/views/form/form-modal-demo";
import FormTreeDemo from "@/views/form/form-tree-demo";
import DynamicTableDemo from "@/views/table/dynamic-table-demo";

export default {
  name: "form-demo",
  components: { DynamicTableDemo, FormTreeDemo, FormModalDemo, FormTableDemo },
  data() {
    return {
      formModel: {
        name: undefined,
        field103: undefined,
      }
    }
  },
  computed: {
    formCollapseItem() {
      return [ {
        name: 'baseInfo',
        title: '基本信息',
        collapse: false
      }, {
        name: 'tableInfo',
        title: '表格信息',
        collapse: false
      }, {
        name: 'modalInfo',
        title: '弹窗信息',
        collapse: false
      }, {
        name: 'treeInfo',
        title: '树形结构',
        collapse: false
      }, {
        name: 'dynamicTable',
        title: '动态加载表格',
        collapse: true
      } ]
    }
  }
}
</script>

<style scoped>

</style>