<template>
  <div class="demo-cascader-filter">
    <ui-cascader
      v-model="value"
      :options="options"
      :keymap="{
        children: 'sub',
        value: 'name_en',
        label: 'name_cn',
      }"
      clearable
      filterable>
    </ui-cascader>
  </div>
</template>
<script>
import { Cascader } from "amumu-ui"
export default {
  components: {
    "ui-cascader": Cascader,
  },
  data() {
    return {
      value: [],
      options: [
        {
          name_en: "zhinan",
          name_cn: "指南",
          sub: [
            {
              name_en: "shejiyuanze",
              name_cn: "设计原则",
              disabled: true,
              sub: [
                {
                  name_en: "yizhi",
                  name_cn: "一致",
                },
                {
                  name_en: "fankui",
                  name_cn: "反馈",
                },
                {
                  name_en: "xiaolv",
                  name_cn: "效率",
                },
                {
                  name_en: "kekong",
                  name_cn: "可控",
                },
              ],
            },
            {
              name_en: "daohang",
              name_cn: "导航",
              sub: [
                {
                  name_en: "cexiangdaohang",
                  name_cn: "侧向导航",
                },
                {
                  name_en: "dingbudaohang",
                  name_cn: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          name_en: "zujian",
          name_cn: "组件",
          sub: [
            {
              name_en: "basic",
              name_cn: "Basic",
              sub: [
                {
                  name_en: "layout",
                  name_cn: "Layout 布局",
                },
                {
                  name_en: "color",
                  name_cn: "Color 色彩",
                },
                {
                  name_en: "typography",
                  name_cn: "Typography 字体",
                },
                {
                  name_en: "icon",
                  name_cn: "Icon 图标",
                },
                {
                  name_en: "button",
                  name_cn: "Button 按钮",
                },
              ],
            },
            {
              name_en: "form",
              name_cn: "Form",
              sub: [
                {
                  name_en: "radio",
                  name_cn: "Radio 单选框",
                },
                {
                  name_en: "checkbox",
                  name_cn: "Checkbox 多选框",
                },
                {
                  name_en: "input",
                  name_cn: "Input 输入框",
                },
                {
                  name_en: "input-number",
                  name_cn: "InputNumber 计数器",
                },
                {
                  name_en: "select",
                  name_cn: "Select 选择器",
                },
                {
                  name_en: "cascader",
                  name_cn: "Cascader 级联选择器",
                },
                {
                  name_en: "switch",
                  name_cn: "Switch 开关",
                },
                {
                  name_en: "slider",
                  name_cn: "Slider 滑块",
                },
                {
                  name_en: "time-picker",
                  name_cn: "TimePicker 时间选择器",
                },
                {
                  name_en: "date-picker",
                  name_cn: "DatePicker 日期选择器",
                },
                {
                  name_en: "datetime-picker",
                  name_cn: "DateTimePicker 日期时间选择器",
                },
                {
                  name_en: "upload",
                  name_cn: "Upload 上传",
                },
                {
                  name_en: "rate",
                  name_cn: "Rate 评分",
                },
                {
                  name_en: "form1",
                  name_cn: "Form 表单",
                },
              ],
            },
            {
              name_en: "data",
              name_cn: "Data",
              sub: [
                {
                  name_en: "table",
                  name_cn: "Table 表格",
                },
                {
                  name_en: "tag",
                  name_cn: "Tag 标签",
                },
                {
                  name_en: "progress",
                  name_cn: "Progress 进度条",
                },
                {
                  name_en: "tree",
                  name_cn: "Tree 树形控件",
                },
                {
                  name_en: "pagination",
                  name_cn: "Pagination 分页",
                },
                {
                  name_en: "badge",
                  name_cn: "Badge 标记",
                },
              ],
            },
            {
              name_en: "notice",
              name_cn: "Notice",
              sub: [
                {
                  name_en: "alert",
                  name_cn: "Alert 警告",
                },
                {
                  name_en: "loading",
                  name_cn: "Loading 加载",
                },
                {
                  name_en: "message",
                  name_cn: "Message 消息提示",
                },
                {
                  name_en: "message-box",
                  name_cn: "MessageBox 弹框",
                },
                {
                  name_en: "notification",
                  name_cn: "Notification 通知",
                },
              ],
            },
            {
              name_en: "navigation",
              name_cn: "Navigation",
              sub: [
                {
                  name_en: "menu",
                  name_cn: "NavMenu 导航菜单",
                },
                {
                  name_en: "tabs",
                  name_cn: "Tabs 标签页",
                },
                {
                  name_en: "breadcrumb",
                  name_cn: "Breadcrumb 面包屑",
                },
                {
                  name_en: "dropdown",
                  name_cn: "Dropdown 下拉菜单",
                },
                {
                  name_en: "steps",
                  name_cn: "Steps 步骤条",
                },
              ],
            },
            {
              name_en: "others",
              name_cn: "Others",
              sub: [
                {
                  name_en: "dialog",
                  name_cn: "Dialog 对话框",
                },
                {
                  name_en: "tooltip",
                  name_cn: "Tooltip 文字提示",
                },
                {
                  name_en: "popover",
                  name_cn: "Popover 弹出框",
                },
                {
                  name_en: "card",
                  name_cn: "Card 卡片",
                },
                {
                  name_en: "carousel",
                  name_cn: "Carousel 走马灯",
                },
                {
                  name_en: "collapse",
                  name_cn: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          name_en: "ziyuan",
          name_cn: "资源",
          sub: [
            {
              name_en: "axure",
              name_cn: "Axure Components",
            },
            {
              name_en: "sketch",
              name_cn: "Sketch Templates",
            },
            {
              name_en: "jiaohu",
              name_cn: "组件交互文档",
              sub: [],
            },
          ],
        },
      ],
    }
  },
}
</script>
<style lang="scss">
.demo-cascader-filter {
  .mm-button {
    margin-right: 10px;
  }
}
</style>
