<template>
  <div>
    <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="弹出框表单"
      @back="callbackFun"
      :form-visible="modalVisible"
      :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-form-item label="下拉树选择">
        <cms-form-select-tree
          v-model="dialogForm.parentId"
          group-name="sortNum"
          :clearable="true"
          :request-call="selectData"
          :form-model="dialogForm"
          :filterable="true"
          :default-props="{
            value: 'id', // ID字段名
            label: 'menuName', // 显示名称
            children: 'children' // 子级字段名
          }">
        </cms-form-select-tree>
      </cms-form-item>
      <cms-form-item label="树形结构">

      </cms-form-item>
    </cms-dialog-form>
  </div>
</template>

<script>
import {
  dictionaryMix,
  pageInitMix,
  mixTableConstants,
  mixTableConfig,
  formConfigMix,
} from "../../package";
import menu from '../table/menu.json'

export default {
  name: "form-modal-demo",
  mixins: [ dictionaryMix, pageInitMix, mixTableConstants, mixTableConfig, formConfigMix ],
  data() {
    return {
      queryForm: {},
      dialogForm: {
        parentName: undefined,
        parentId: undefined
      },
      modalVisible: false,
      modalVisible1: false,
      expandRowKeys: [],
      selectData: menu.data
    }
  },
  methods: {
    open() {
      this.modalVisible = true;
    },
    open1() {
      this.modalVisible1 = true;
    },
    callbackFun(modalVisible) {
      alert(1)
      this.modalVisible = modalVisible
    },
    // 自定义render
    _renderFun(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <i class="el-icon-paperclip" v-show="data.children.length > 0"></i>
          <i class="el-icon-paperclip" v-show="!data.children || data.children.length === 0"></i>
          <span style="padding-left: 6px">{ node.label }</span>
        </span>
      );
    },
  },
  computed: {
  }
}
</script>

<style scoped>

</style>