<template>
  <admin-layout>
    <admin-todo-list filters title="筛选条件" icon="filter">
      <template slot="options">
        <a-button type="primary">按钮</a-button>
      </template>
      <h-search-form label="字段">
        <a-input placeholder="请输入字段值"></a-input>
      </h-search-form>
      <h-search-form label="字段">
        <a-input placeholder="请输入字段值"></a-input>
      </h-search-form>
      <h-search-form label="字段">
        <a-input placeholder="请输入字段值"></a-input>
      </h-search-form>
      <h-search-form label="字段">
        <a-input placeholder="请输入字段值"></a-input>
      </h-search-form>
    </admin-todo-list>

    <admin-todo-list title="数据列表" icon="table">
      <template slot="options">
        <a-button type="primary" @click="handleAdd">创建</a-button>
      </template>
      <a-table :columns="columns" :data-source="dataSource" size="middle">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </admin-todo-list>

    <admin-todo-list title="富文本编辑器">
      <h-editor ref="editor" v-model="tinymceHtml" />
      <div class="d-flex justify-center mt-4">
        <a-button type="primary" @click="handleTinymceSubmit">提交</a-button>
      </div>
    </admin-todo-list>

    <CreateModal ref="createModalRef" />
  </admin-layout>
</template>

<script>
import HSearchForm from '@/components/hrhx/form/HSearchForm'
import HEditor from '@/components/hrhx/rich-text/HEditor'
import CreateModal from '@/views/dashboard/modules/CreateModal'

export default {
  name: 'Demo',
  components: { CreateModal, HEditor, HSearchForm },
  data: () => ({
    tinymceHtml: '',
    columns: Object.freeze([
      {
        title: 'Name',
        key: 'name',
        dataIndex: 'name',
        align: 'center',
        width: 150,
        scopedSlots: { customRender: 'name' }
      },
      {
        title: 'Age',
        key: 'age',
        dataIndex: 'age',
        align: 'center',
        width: 80
      },
      {
        title: 'Address',
        key: 'address 1',
        dataIndex: 'address',
        align: 'center',
        ellipsis: true
      },
      {
        title: 'Long Column Long Column Long Column',
        key: 'address 2',
        dataIndex: 'address',
        align: 'center',
        ellipsis: true
      },
      {
        title: 'Long Column Long Column',
        key: 'address 3',
        dataIndex: 'address',
        align: 'center',
        ellipsis: true
      },
      {
        title: 'Long Column',
        key: 'address 4',
        dataIndex: 'address',
        align: 'center',
        ellipsis: true
      }
    ]),
    dataSource: [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
        tags: ['nice', 'developer']
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 2 Lake Park, London No. 2 Lake Park',
        tags: ['loser']
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher']
      }
    ]
  }),
  created() {
    setTimeout(() => {
      this.tinymceHtml =
        '<p data-mce-style="text-align: center;" style="text-align: center;"><em><span data-mce-style="font-size: 36pt;" style="font-size: 36pt;"><strong>Matrix标题</strong></span></em></p><p data-mce-style="text-align: left;"><span data-mce-style="font-size: 14pt;" style="font-size: 14pt;">发生&nbsp;<span data-mce-style="color: #e03e2d; background-color: #f1c40f;" style="color: rgb(224, 62, 45); background-color: rgb(241, 196, 15);">重大失误﻿<span data-mce-style="color: #000000; background-color: #ffffff;" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">，记大过一次！</span></span></span></p>'
    }, 300)
  },
  methods: {
    /**
     * 创建
     * @author Matrix
     * @since 2022/09/14
     */
    handleAdd() {
      this.$refs.createModalRef.openModal()
    },

    /**
     * 提交富文本
     * @author Matrix
     * @since 2022/09/14
     */
    handleTinymceSubmit() {
      console.log(this.tinymceHtml)
    }
  }
}
</script>

<style lang="scss" scoped>
.h-scroll {
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  overflow: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  background-color: pink;

  .h-unit {
    width: 100px;
    height: 30px;
    color: #ffffff;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #76bbf8;
  }
}
</style>
