<template>
  <div>
    <h1>Dropdown 下拉菜单</h1>
    <p class="fbg-text">将动作或菜单折叠到下拉菜单中。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseDowndropStr">
      <el-dropdown v-model="value">
        <el-dropdown-item v-for="(item, index) in list" :key="index" :value="item.value" :label="item.label"/>
      </el-dropdown>
    </demo>
    <h3 class="fbg-title">禁用</h3>
    <demo :code="disabledDowndropStr">
      <el-dropdown v-model="disbaledDropdownValue">
        <el-dropdown-item :value="1" label="测试1" />
        <el-dropdown-item :value="2" label="测试2" disabled/>
        <el-dropdown-item :value="3" label="测试3" />
      </el-dropdown>
    </demo>
    <h3 class="fbg-title">DoropdownItem 插槽</h3>
    <demo :code="slotDowndropStr">
      <el-dropdown v-model="slotDropdownValue">
        <el-dropdown-item v-for="(item, index) in list" :key="index" :value="item.value"  :label="item.label">
          <i class="fbg-icon-star-off" />
          <span>{{item.label}}</span>
        </el-dropdown-item>
      </el-dropdown>
    </demo>
    <h3 class="fbg-title">DropdownItem 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>label</td>
          <td>标题</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>disbaled</td>
          <td>禁用状态</td>
          <td>boolean</td>
          <td>true | false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>value</td>
          <td>值</td>
          <td>String | Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Dropdown 事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>change</td>
          <td>选中状态变化</td>
          <td>参数1: 选中状态，参数2: 选中项的value</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">DropdownItem 事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>change</td>
          <td>选中状态变化</td>
          <td>参数1: 选中值</td>
        </tr>
        <tr>
          <td>click</td>
          <td>点击事件</td>
          <td>参数1: 点击项的值</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      allChecked: false,
      value: 1,
      disbaledDropdownValue: 1,
      slotDropdownValue: 1,
      list: [{label: '测试1', value: 1}, {label: '测试2', value: 2},  {label: '测试3', value: 3}],
      baseDowndropStr: `
        <template>
          <el-dropdown v-model="value">
            <el-dropdown-item v-for="(item, index) in list" disabled :key="index" :value="item.value" :label="item.label"/>
          </el-dropdown>
        </template>
        <script>
          export default {
            data() {
              return {
                list: [{label: '测试1', value: 1}, {label: '测试2', value: 2},  {label: '测试3', value: 3}],
                value: 1
              }
            }
          }
        <\/script>
      `,
      disabledDowndropStr: `
      <el-dropdown v-model="value">
        <el-dropdown-item :value="1" label="测试1" />
        <el-dropdown-item :value="2" label="测试2" disabled/>
        <el-dropdown-item :value="3" label="测试3" />
      </el-dropdown>
        <script>
          export default {
            data() {
              return {
                value: 1
              }
            }
          }
        <\/script>
      `,
      slotDowndropStr: `
        <el-dropdown v-model="value">
          <el-dropdown-item v-for="(item, index) in list" :key="index" :value="item.value"  :label="item.label">
            <i class="fbg-icon-star-off" />
            <span>{{item.label}}</span>
          </el-dropdown-item>
        </el-dropdown>
        <script>
          export default {
            data() {
              return {
                list: [{label: '测试1', value: 1}, {label: '测试2', value: 2},  {label: '测试3', value: 3}],
                value: 1
              }
            }
          }
        <\/script>
      `
    }
  },
  methods: {

  },
  mounted() {
    hljs.highlightCode();
  }
}
</script>

<style lang="scss" scoped>

</style>