<template>
  <div>
    <!--    <cms-query-table
          ref="userTable"
          :tools-bar="toolsBarConfig"
          :query-params="queryForm"
          :columns="columnsConfig"
          :form-item-config="configItem"
          :request-call="staticdataSource"
          :search-method="searchClick"
        >

        </cms-query-table>-->
    <cms-button @click="open">打开表单</cms-button>
    <cms-button @click="open1">打开弹窗</cms-button>
    <cms-modal
      modal-title="弹窗标题"
      modal-width="60%"
      modal-height="60%"
      v-model="modalVisible1"
    ></cms-modal>
    <cms-dialog-form
      form-title="弹出框表单"
      :form-visible="modalVisible"
      @back="callbackFun"
      form-height="80%"
      form-width="50%"
      :form-model="dialogForm">
      <cms-form-item label="ccc">
        <cms-form-input v-model.trim="dialogForm.aa"/>
      </cms-form-item>
      <cms-form-item label="ccc">
        <cms-form-tree
          :group="false"
          :query-params="{}"
          :clearable="true"
          :props="{id: 'id', label: 'menuName'}"
          :option-label="{id: 'id', label: 'menuName'}"
          :data-source="selectData"
          :form-model="dialogForm"
        ></cms-form-tree>
      </cms-form-item>
    </cms-dialog-form>
    <!--  测试表单  -->
    <form-demo></form-demo>
  </div>
</template>

<script>
import {
  dictionaryMix,
  pageInitMix,
  mixTableConstants,
  mixTableConfig,
  formConfigMix,
} from "../../package";
import menu from './menu.json'
import FormDemo from "@/views/form/form-demo";

export default {
  name: "table-demo",
  components: { FormDemo },
  mixins: [ dictionaryMix, pageInitMix, mixTableConstants, mixTableConfig, formConfigMix ],
  data() {
    return {
      queryForm: {},
      dialogForm: {
        aa: undefined
      },
      modalVisible: false,
      modalVisible1: false,
      expandRowKeys: [],
      selectData: menu.data
    }
  },
  created() {
    console.log('menu===', menu)
  },
  methods: {
    open() {
      this.modalVisible = true;
    },
    open1() {
      this.modalVisible1 = true;
    },
    callbackFun(modalVisible) {
      this.modalVisible = modalVisible
    },
    searchClick() {
      console.log('点击了搜索')
    }
  },
  computed: {
    configItem() {
      return [
        {
          label: '登录账户',
          prop: "account",
        },
      ]
    },
    toolsBarConfig() {
      return []
    },
    columnsConfig() {
      return [ {
        title: 'a',
        field: 'a'
      }, {
        title: 'b',
        field: 'b'
      }, {
        title: 'c',
        field: 'c'
      }, {
        title: 'd',
        field: 'd'
      }, {
        title: 'e',
        field: 'e'
      } ]
    },
    staticdataSource() {
      return [ {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
      } ]
    }
  }
}
</script>

<style scoped>

</style>