<template>
  <div>
    <h1>Card 卡片</h1>
    <p class="fbg-text">将信息聚合在卡片容器中展示。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseCardStr">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </demo>
    <h3 class="fbg-title">简单卡片</h3>
    <demo :code="simpleCardStr">
      <el-card class="box-card">
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </demo>
    <h3 class="fbg-title">带图片</h3>
    <demo :code="imageCardStr">
      <el-row>
        <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">2019-08-09 00:00:00</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </demo>
    <h3 class="fbg-title">卡片阴影</h3>
    <demo :code="shadowCardStr">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always">
            总是显示
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            鼠标悬浮时显示
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            从不显示
          </el-card>
        </el-col>
      </el-row>
    </demo>
    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>header</td>
          <td>设置 header，也可以通过 slot#header 传入 DOM</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>body-style</td>
          <td>设置 body 的样式</td>
          <td>object</td>
          <td>--</td>
          <td>{ padding: '20px' }</td>
        </tr>
        <tr>
          <td>shadow</td>
          <td>设置阴影显示时机</td>
          <td>String</td>
          <td>always | hover | never</td>
          <td>always</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: '',
      loading: true,
      baseCardStr: `
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>`,
      simpleCardStr: `
      <el-card class="box-card">
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>`,
      imageCardStr: `
      <el-row>
        <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">2019-08-09 00:00:00</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      `,
      shadowCardStr: `      
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="always">
            总是显示
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            鼠标悬浮时显示
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            从不显示
          </el-card>
        </el-col>
      </el-row>`,
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleClose() {
      alert('点击关闭');
    }
  }
}
</script>
<style lang="scss" scoped>
.marigin-bottom10 {
  margin-bottom: 10px;
}
</style>