<template>
    <div class="mixin-components-container">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Buttons</span>
          </div>
          <div style="margin-bottom:50px;">
            <el-col :span="4" class="text-center">
              <router-link class="pan-btn blue-btn" to="/documentation/index">
                Documentation
              </router-link>
            </el-col>
            <el-col :span="4" class="text-center">
              <router-link class="pan-btn light-blue-btn" to="/icon/index">
                Icons
              </router-link>
            </el-col>
            <el-col :span="4" class="text-center">
              <router-link class="pan-btn pink-btn" to="/excel/export-excel">
                Excel
              </router-link>
            </el-col>
            <el-col :span="4" class="text-center">
              <router-link class="pan-btn green-btn" to="/table/complex-table">
                Table
              </router-link>
            </el-col>
            <el-col :span="4" class="text-center">
              <router-link class="pan-btn tiffany-btn" to="/example/create">
                Form
              </router-link>
            </el-col>
            <el-col :span="4" class="text-center">
              <router-link class="pan-btn yellow-btn" to="/theme/index">
                Theme
              </router-link>
            </el-col>
          </div>
        </el-card>
      </el-row>
  
      <el-row :gutter="20" style="margin-top:50px;">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>Material Design 的input</span>
            </div>
            <div style="height:100px;">
              <el-form :model="demo" :rules="demoRules">
                <el-form-item prop="title">
                  <md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
                    标题
                  </md-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
  
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>图片hover效果</span>
            </div>
            <div class="component-item">
              <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
                vue-element-admin
              </pan-thumb>
            </div>
          </el-card>
        </el-col>
  
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>水波纹 waves v-directive</span>
            </div>
            <div class="component-item">
              <el-button v-waves type="primary">
                水波纹效果
              </el-button>
            </div>
          </el-card>
        </el-col>
  
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>hover text</span>
            </div>
            <div class="component-item">
              <mallki class-name="mallki-text" text="vue-element-admin" />
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <el-row :gutter="20" style="margin-top:50px;">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>Share</span>
            </div>
            <div class="component-item" style="height:420px;">
              <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import PanThumb from '@/components/PanThumb'
  import MdInput from '@/components/MDinput'
  import Mallki from '@/components/TextHoverEffect/Mallki'
  import DropdownMenu from '@/components/Share/DropdownMenu'
  import waves from '@/directive/waves/index.js' // 水波纹指令
  
  export default {
    name: 'ComponentMixinDemo',
    components: {
      PanThumb,
      MdInput,
      Mallki,
      DropdownMenu
    },
    directives: {
      waves
    },
    data() {
      const validate = (rule, value, callback) => {
        if (value.length !== 6) {
          callback(new Error('请输入六个字符'))
        } else {
          callback()
        }
      }
      return {
        demo: {
          title: ''
        },
        demoRules: {
          title: [{ required: true, trigger: 'change', validator: validate }]
        },
        articleList: [
          { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
          { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
          { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
          { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
          { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
          { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .mixin-components-container {
    background-color: #f0f2f5;
    padding: 30px;
    min-height: calc(100vh - 84px);
  }
  .component-item{
    min-height: 100px;
  }
  </style>