<template>
  <div>
    <cms-page-form
      @save="save"
      :form-collapse-item="formCollapseItem"
      :form-rules="rules"
      :form-model="formModel">
      <template slot="baseInfo">
        <cms-form-item :column="3" label="金额" prop="amount">
          <cms-form-amount v-model="formModel.amount"/>
        </cms-form-item>
        <cms-form-item :column="3" label="选择图标">
          <cms-icon-font v-model="icon"></cms-icon-font>
        </cms-form-item>
        <cms-form-item :column="3" label="多选放大镜" prop="noticeUserName">
          <cms-user-magnifier
            v-model="formModel.noticeUserName"
            :placeholder="'选择用户'"
            :magnifier-title="'选择接收用户'"
            :multiple="true"
            :form-model="formModel"
            :dictionary-config="[]"
            :match-key="{
              noticeUserName: 'realName'
            }"
            :modal-height="'600'"
            :request-call="tableData"
          ></cms-user-magnifier>
        </cms-form-item>
        <cms-form-item :column="3" 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="3" label="弹窗放大镜">
          <cms-form-magnifier
            v-model="magnifierModel.text1"
            :show-search-form="true"
            :modal-title="'测试弹窗'"
            :show-footer="true"
            :form-model="magnifierModel"
            :request-call="this.$http.tables.dynamicTableUrl"
            :modal-width="'50%'"
            :modal-height="'50%'"
          />
        </cms-form-item>
        <cms-form-item :column="3" label="弹窗放大镜">
         <cms-cascader-select></cms-cascader-select>
        </cms-form-item>
<!--        <cms-form-item :column="3" label="视频播放">
          <cms-video></cms-video>
        </cms-form-item>-->
        <cms-form-item :column="1" label="评论组件">
          <cms-comment :comment-data="tableDataDown">
            <template slot="author">则是标题</template>
          </cms-comment>
        </cms-form-item>
        <cms-form-item :column="1" label="下拉框">
          <cms-form-editor
            v-model="messageContent"
            placeholder="11111111111111"
            :height="100"
          />
        </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"
          :modal-config="{
            resize: false,
            showClose: false,
            fullscreen: true,
            'show-close': false,
            'show-zoom': false,
          }"
        >
          <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 :fixed-height="true" :height="300"/>
      </template>
      <template slot="columns">
        <cms-button type="primary" @click="cmsDialogCardPageVisible = true">测试弹出框</cms-button>
        <cms-dialog-table-demo/>
        <cms-dialog-card-page
          @close="cmsDialogCardPageVisible=false"
          v-if="cmsDialogCardPageVisible"
          v-model="cmsDialogCardPageVisible"
          :modal-title="'选择'"
          :request-call="this.$http.tables.selectCmsCardPageUrl"
          :extra-data="{aaa: 1, bb: 1}"
          :modal-config="{
            'resize': true,
            'fullscreen': true,
            'show-close': true,
            'show-zoom': false,
          }"
        >
          <template slot-scope="{ row }">
            <img
              :src="row.image"
              class="image" alt="">
            <div style="padding: 14px;">
              <span>{{ row.remark }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ row.createTime }}</time>
                <el-button size="small" type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </template>
        </cms-dialog-card-page>
        <form-pull-down-demo/>
        <cms-card-page-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";
// import elTableInfiniteScroll from 'el-table-infinite-scroll';
import FormPullDownDemo from "@/views/form/form-pull-down-demo";
import CmsCardPageDemo from "@/views/table/CmsCardPageDemo";
import CmsDialogTableDemo from "@/views/table/cms-dialog-table-demo";

const exampleData = new Array(10).fill({
  date: '2016-05-02',
  name: '王小虎',
  author: '張三三',
  time: '2022-08-13 00:11:22',
  avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  content: '1234567898765阿斯利康登記卡老師大樓上的阿拉卡珊德拉深刻的驕傲開始的\
        1234567898765阿斯利康登記卡老師大樓上的阿拉卡珊德拉深刻的驕傲開始的\
        1234567898765阿斯利康登記卡老師大樓上的阿拉卡珊德拉深刻的驕傲開始的\
        1234567898765阿斯利康登記卡老師大樓上的阿拉卡珊德拉深刻的驕傲開始的\
        1234567898765阿斯利康登記卡老師大樓上的阿拉卡珊德拉深刻的驕傲開始的',
  dislikes: '1',
  likes: '22',
  action: 'liked',
  address: '上海市普陀区金沙江路 1518 弄'
});
export default {
  name: "Index",
  components: { CmsDialogTableDemo, CmsCardPageDemo, FormPullDownDemo, TreeTableDemo, EditTableSimple, draggable },
  mixins: [ mixTableConfig, mixTableConstants ],
  data() {
    return {
      tableDataDown: exampleData,
      selectValue: undefined,
      dragging: false,
      icon: undefined,
      magnifierModel: {
        text1: undefined,
      },
      cmsDialogCardPageVisible: false,
      remoteValue: undefined,
      dialogVisible: false,
      selectData: menu,
      messageContent: '',
      list: [
        {
          "name": "Joao",
          "id": 1
        },
        {
          "name": "John",
          "id": 0
        },
        {
          "name": "Jean",
          "id": 2
        }
      ],
      formModel: {
        amount: 123456,
        parentId: 'e8db8fedfc9042cc809b334072c19604',
        noticeUserName: [ "ccc", "aaaa" ],
      },
      rules: {
        amount: [
          {
            required: true,
            message: '1111',
            trigger: [ "blur", "change" ],
          }
        ],
        noticeUserName: [
          {
            required: true,
            message: '222222222222',
            trigger: [ "blur", "change" ],
          }
        ]
      }
    };
  },
  watch: {
    "messageContent": {
      handler(val) {
        console.log('messageContent', val);
      }
    }
  },
  methods: {
    save() {
      console.log('------------', this.formModel);
    },
    load() {
      this.$message.success('加载下一页');
      this.tableDataDown = this.tableDataDown.concat(exampleData);
    },
    /** 文本编辑器改变事件 */
    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: true,
        },
        {
          name: "dialogInfo",
          title: "弹窗面板",
          collapse: false,
        },
        {
          name: "tableTree",
          title: "表格树",
          collapse: false,
        },
        {
          name: "columns",
          title: "自定义表格列",
          collapse: false,
        },

      ];
    },

    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>
