<template>
  <div>
    <cms-page-form :form-collapse-item="formCollapseItem" :form-model="formModel">
      <template slot="baseInfo">
        <cms-form-item :column="1" label="多选放大镜">
          <cms-user-magnifier
            v-model="formModel.noticeUserName"
            :placeholder="$t('notice.prompt.noticeUserName')"
            :magnifier-title="'选择接收用户'"
            :multiple="true"
            :form-model="formModel"
            :dictionary-config="[]"
            :match-key="{
              noticeUserName: 'realName'
            }"
            :fixed-height="true" :height="495"
            :modal-height="'600'"
            :request-call="tableData"
          ></cms-user-magnifier>
        </cms-form-item>
        <cms-form-item label="下拉框">
          <cms-form-select-tree
            v-model.trim="selectValue"
            placeholder="下拉框"
            :form-model="formModel"
            :request-call="selectData"
            :default-props="{
              value: 'id',
              label: 'menuName',
              children: 'children',
            }"
            :match-key="{
              parentId: 'id',
            }"
          >
          </cms-form-select-tree>
        </cms-form-item>
        <cms-form-item :column="1" label="下拉框">
          <cms-form-editor
            v-model="messageContent"
            placeholder="11111111111111"></cms-form-editor>
        </cms-form-item>
      </template>
      <template slot="dialogInfo">
        <cms-button @click="dialogVisible = true">打开弹窗表单</cms-button>
        <cms-dialog-form
          :form-visible="dialogVisible"
          :form-title="'弹窗表单'"
          @back="formCallback"
          :form-height="'60%'"
          :modal-callback="formCallback"
          :form-model="formModel">
          <cms-form-item label="下拉框">
            <cms-form-select-tree
              v-model.trim="formModel.parentId"
              placeholder="下拉框"
              :form-model="formModel"
              :request-call="selectData"
              :default-props="{
                value: 'id',
                label: 'menuName',
                children: 'children',
              }"
              :match-key="{
                parentId: 'id',
              }">
            </cms-form-select-tree>
          </cms-form-item>
        </cms-dialog-form>
      </template>
      <template slot="tableTree">
        <tree-table-demo />
      </template>
    </cms-page-form>
  </div>
</template>

<script>
import menu from "./table/menu.json";
import { mixTableConfig, mixTableConstants } from '../package'
import EditTableSimple from "@/views/form/EditTableSimple";
import draggable from 'vuedraggable'
import TreeTableDemo from "@/views/table/tree-table-demo";

export default {
  name: "Index",
  components: { TreeTableDemo, EditTableSimple, draggable },
  mixins: [ mixTableConfig, mixTableConstants ],
  data() {
    return {
      selectValue: undefined,
      dragging: false,
      dialogVisible: false,
      selectData: menu,
      messageContent: '',
      list: [
        {
          "name": "Joao",
          "id": 1
        },
        {
          "name": "John",
          "id": 0
        },
        {
          "name": "Jean",
          "id": 2
        }
      ],
      formModel: {
        parentId: 'e8db8fedfc9042cc809b334072c19604',
        noticeUserName: [ "ccc", "aaaa" ],
      },
    };
  },
  watch: {
    "messageContent": {
      handler(val) {
        console.log('messageContent', val);
      }
    }
  },
  methods: {
    /** 文本编辑器改变事件 */
    handleChange(html, text) {
      console.log(html, "text===", text);
      this.messageContent = html;
    },
    formCallback(v) {
      this.dialogVisible = v;
    },
    checkMove: function(e) {
      window.console.log("Future index: " + e.draggedContext.futureIndex);
    }
  },
  computed: {
    draggingInfo() {
      return this.dragging ? "under drag" : "";
    },
    formCollapseItem() {
      return [
        {
          name: "baseInfo",
          title: "基本信息",
          collapse: false,
        },
        {
          name: "dialogInfo",
          title: "弹窗面板",
          collapse: false,
        },
        {
          name: "tableTree",
          title: "表格树",
          collapse: true,
        },
      ];
    },

    tableData() {
      return {
        "code": 200,
        "msg": "操作成功!",
        "rows": [ {
          "account": "zhangsan",
          "cardType": 1,
          "createTime": "2020-08-07 06:21:50",
          "createUserId": "33e7a2431c434655ba9498405e6929e8",
          "dataStatus": 1,
          "email": "h_y_12@163.com",
          "id": "444554ba5e8e536be2720edef97c5086",
          "idCard": "110101198803077479",
          "lastLoginTime": "2022-05-06 23:13:56",
          "locked": 0,
          "mobile": "15200092812",
          "order": "desc",
          "page": 1,
          "password": "e10adc3949ba59abbe56e057f20f883e",
          "realName": "张三",
          "rows": 2147483647,
          "sort": "createTime",
          "startUse": 1,
          "tenantId": "default",
          "updateTime": "2021-05-19 21:44:11",
          "updateUserId": "444554ba5e8e536be2720edef97c5086",
          "userSource": 1,
          "userType": 1,
          "version": 288
        } ],
        "total": 1
      }
    }

  },
};
</script>

<style lang="scss">
.w-e-text-container p {
  margin: 5px 0 !important;
  padding: 0 5px;
}

.w-e-modal button {
  background-color: var(--w-e-modal-button-bg-color);
  border: 1px solid var(--w-e-modal-button-border-color);
  border-radius: 4px;
  color: var(--w-e-toolbar-color);
  cursor: pointer;
  font-weight: 400;
  height: 40px;
  padding: 0 15px;
  text-align: center;
  touch-action: manipulation;
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.w-e-text-placeholder {
  font-style: italic;
  left: 0;
  padding: 0 10px;
  top: 0;
  width: 100%;
}

</style>
