<template>
  <div class="gallery">
    <h1>{{ mode }}</h1>

    <!-- ============ FORM: checkbox / radio ============ -->
    <section>
      <h2>Checkbox</h2>
      <div class="row">
        <span class="lbl">default</span>
        <jsk-checkbox v-model="cb.a">未选中</jsk-checkbox>
        <jsk-checkbox v-model="cb.b">已选中</jsk-checkbox>
      </div>
      <div class="row">
        <span class="lbl">bordered</span>
        <jsk-checkbox v-model="cb.c" is-border>有边框未选</jsk-checkbox>
        <jsk-checkbox v-model="cb.d" is-border>有边框已选</jsk-checkbox>
      </div>
      <div class="row">
        <span class="lbl">sizes</span>
        <jsk-checkbox v-model="cb.e" checkbox-size="mini" is-border>mini</jsk-checkbox>
        <jsk-checkbox v-model="cb.f" checkbox-size="small" is-border>small</jsk-checkbox>
        <jsk-checkbox v-model="cb.g" checkbox-size="medium" is-border>medium</jsk-checkbox>
        <jsk-checkbox v-model="cb.h" checkbox-size="large" is-border>large</jsk-checkbox>
      </div>
    </section>

    <section>
      <h2>Radio</h2>
      <div class="row">
        <span class="lbl">default</span>
        <jsk-radio v-model="r1" label="a">选项 A</jsk-radio>
        <jsk-radio v-model="r1" label="b">选项 B</jsk-radio>
      </div>
      <div class="row">
        <span class="lbl">bordered/sizes</span>
        <jsk-radio v-model="r2" label="a" is-border>有边框</jsk-radio>
        <jsk-radio v-model="r3" label="s" radio-size="small" is-border>small</jsk-radio>
        <jsk-radio v-model="r3" label="l" radio-size="large" is-border>large</jsk-radio>
      </div>
    </section>

    <!-- ============ LEAF: button / link / tag / alert / badge / avatar / divider ============ -->
    <section>
      <h2>Button</h2>
      <div class="row">
        <jsk-button>默认</jsk-button>
        <jsk-button type="primary">primary</jsk-button>
        <jsk-button type="success">success</jsk-button>
        <jsk-button type="warning">warning</jsk-button>
        <jsk-button type="danger">danger</jsk-button>
        <jsk-button type="text">text</jsk-button>
      </div>
      <div class="row">
        <jsk-button size="small">small</jsk-button>
        <jsk-button disabled>disabled</jsk-button>
        <jsk-button round>round</jsk-button>
        <jsk-button plain>plain</jsk-button>
      </div>
    </section>

    <section>
      <h2>Tag</h2>
      <div class="row">
        <jsk-tag>默认</jsk-tag>
        <jsk-tag is-type="success">success</jsk-tag>
        <jsk-tag is-type="warning">warning</jsk-tag>
        <jsk-tag is-type="danger">danger</jsk-tag>
        <jsk-tag is-size="small">small</jsk-tag>
      </div>
    </section>

    <section>
      <h2>Alert</h2>
      <jsk-alert is-type="success"><template slot="title">成功提示文案</template></jsk-alert>
    </section>

    <section>
      <h2>Link / Badge / Avatar / Divider</h2>
      <div class="row">
        <jsk-link>默认链接</jsk-link>
        <jsk-link type="primary">primary</jsk-link>
        <jsk-badge :value="12"><jsk-button>消息</jsk-button></jsk-badge>
        <jsk-avatar>U</jsk-avatar>
      </div>
      <jsk-divider />
    </section>

    <!-- ============ FORM: input / number / select / switch / slider / rate ============ -->
    <section>
      <h2>Input / InputNumber</h2>
      <div class="row">
        <jsk-input v-model="text1" placeholder="请输入" style="width:200px" />
        <jsk-input v-model="text2" disabled placeholder="禁用" style="width:200px" />
        <jsk-input-number v-model="num1" />
      </div>
    </section>

    <section>
      <h2>Select / Switch</h2>
      <div class="row">
        <jsk-select v-model="sel1" placeholder="请选择" style="width:200px">
          <jsk-option label="选项一" value="1" />
          <jsk-option label="选项二" value="2" />
        </jsk-select>
        <jsk-switch v-model="sw1" />
      </div>
    </section>

    <section>
      <h2>Slider / Rate / Progress</h2>
      <div class="row"><jsk-slider v-model="sliderVal" style="width:240px" /></div>
      <div class="row"><jsk-rate v-model="rateVal" /></div>
      <div class="row"><jsk-progress :percentage="60" style="width:240px" /></div>
    </section>

    <!-- ============ CONTAINER: card / steps / tabs / collapse ============ -->
    <section>
      <h2>Card</h2>
      <jsk-card style="width:260px">
        <div slot="header">卡片标题</div>
        卡片正文内容
      </jsk-card>
    </section>

    <section>
      <h2>Steps</h2>
      <jsk-steps :active="1" style="width:420px">
        <jsk-step title="第一步" />
        <jsk-step title="第二步" />
        <jsk-step title="第三步" />
      </jsk-steps>
    </section>

    <section>
      <h2>Tabs</h2>
      <jsk-tabs v-model="tabVal">
        <jsk-tab label="标签一" name="a">内容一</jsk-tab>
        <jsk-tab label="标签二" name="b">内容二</jsk-tab>
      </jsk-tabs>
    </section>

    <section>
      <h2>Collapse</h2>
      <jsk-collapse v-model="collapseVal">
        <jsk-collapse-item title="折叠面板一" name="1">面板内容一</jsk-collapse-item>
        <jsk-collapse-item title="折叠面板二" name="2">面板内容二</jsk-collapse-item>
      </jsk-collapse>
    </section>

    <section>
      <h2>Pagination</h2>
      <jsk-pagination :total="100" layout="prev, pager, next" />
    </section>

    <!-- ============ TELEPORT triggers: tooltip / popover / cascader / date / dialog ============ -->
    <section>
      <h2>Tooltip / Popover</h2>
      <div class="row">
        <jsk-tooltip content="这是提示内容">
          <jsk-button>悬停显示 tooltip</jsk-button>
        </jsk-tooltip>
        <jsk-popover placement="top" title="气泡标题" content="气泡内容">
          <jsk-button slot="reference">点击显示 popover</jsk-button>
        </jsk-popover>
      </div>
    </section>

    <section>
      <h2>Cascader / DatePicker</h2>
      <div class="row">
        <jsk-cascader v-model="casVal" :options="casOptions" style="width:240px" />
        <jsk-date-picker v-model="dateVal" />
      </div>
    </section>

    <!-- ============ DATA: table / tree ============ -->
    <section>
      <h2>Table</h2>
      <jsk-table :data="tableData" style="width:420px">
        <jsk-table-column prop="name" label="名称" />
        <jsk-table-column prop="age" label="年龄" />
      </jsk-table>
    </section>

    <section>
      <h2>Tree</h2>
      <jsk-tree :data="treeData" :props="treeProps" />
    </section>

    <section>
      <h2>Dialog (open)</h2>
      <jsk-dialog :visible="dialogVisible" title="对话框标题" :append-to-body="false" width="320px">
        对话框正文内容
      </jsk-dialog>
    </section>

    <!-- ============ SUB-PARTS coverage: breadcrumb / form / timeline / carousel ============ -->
    <section>
      <h2>Breadcrumb</h2>
      <jsk-breadcrumb separator="/">
        <jsk-breadcrumb-item>首页</jsk-breadcrumb-item>
        <jsk-breadcrumb-item>列表页</jsk-breadcrumb-item>
        <jsk-breadcrumb-item>详情页</jsk-breadcrumb-item>
      </jsk-breadcrumb>
    </section>

    <section>
      <h2>Form</h2>
      <jsk-form label-width="80px" style="width:380px">
        <jsk-form-item label="名称">
          <jsk-input v-model="text1" />
        </jsk-form-item>
        <jsk-form-item label="数量">
          <jsk-input-number v-model="num1" />
        </jsk-form-item>
      </jsk-form>
    </section>

    <section>
      <h2>Timeline</h2>
      <jsk-timeline>
        <jsk-timeline-item timestamp="2026-06-01">事件一</jsk-timeline-item>
        <jsk-timeline-item timestamp="2026-06-02">事件二</jsk-timeline-item>
      </jsk-timeline>
    </section>

    <section>
      <h2>Upload</h2>
      <jsk-upload action="#" :auto-upload="false">
        <jsk-button>选择文件</jsk-button>
      </jsk-upload>
    </section>

    <section>
      <h2>Dropdown (trigger)</h2>
      <jsk-dropdown>
        <span class="el-dropdown-link">下拉菜单 ▾</span>
        <jsk-dropdown-menu slot="dropdown">
          <jsk-dropdown-item>选项一</jsk-dropdown-item>
          <jsk-dropdown-item>选项二</jsk-dropdown-item>
        </jsk-dropdown-menu>
      </jsk-dropdown>
    </section>

    <section>
      <h2>Jellies custom icons (el-icon-j-*)</h2>
      <div class="row" style="font-size:26px; gap:20px; color:#606266;">
        <i class="el-icon-j-arrow-down" title="j-arrow-down"></i>
        <i class="el-icon-j-arrow-up"></i>
        <i class="el-icon-j-arrow-left"></i>
        <i class="el-icon-j-arrow-right"></i>
        <i class="el-icon-j-angle-down"></i>
        <i class="el-icon-j-caret-down"></i>
        <i class="el-icon-j-times"></i>
        <i class="el-icon-j-check"></i>
        <i class="el-icon-j-bell"></i>
        <i class="el-icon-j-book"></i>
        <i class="el-icon-j-calendar"></i>
        <i class="el-icon-j-camera"></i>
        <i class="el-icon-j-clock"></i>
        <i class="el-icon-j-code"></i>
        <i class="el-icon-j-comment"></i>
        <i class="el-icon-j-bars"></i>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Gallery',
  props: {
    mode: { type: String, default: 'gallery' }
  },
  data() {
    return {
      cb: { a: false, b: true, c: false, d: true, e: true, f: true, g: true, h: true },
      r1: 'b', r2: 'a', r3: 'l',
      text1: '已输入文本', text2: '禁用文本', num1: 3,
      sel1: '1', sw1: true, sliderVal: 40, rateVal: 3,
      tabVal: 'a', collapseVal: ['1'],
      casVal: [], dateVal: '', dialogVisible: true,
      casOptions: [
        { value: '1', label: '一级 A', children: [{ value: '11', label: '二级 A-1' }] },
        { value: '2', label: '一级 B', children: [{ value: '21', label: '二级 B-1' }] }
      ],
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 22 }
      ],
      treeData: [
        { label: '节点一', children: [{ label: '子节点 1-1' }] },
        { label: '节点二' }
      ],
      treeProps: { children: 'children', label: 'label' }
    };
  }
};
</script>

<style>
.gallery {
  padding: 28px 36px 120px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #303133;
}
.gallery h1 {
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: 16px;
  margin: 0 0 20px;
  padding: 8px 14px;
  background: #399af4;
  color: #fff;
  border-radius: 6px;
}
.gallery h2 {
  font-size: 14px;
  color: #909399;
  margin: 24px 0 10px;
  border-bottom: 1px dashed #e4e7ed;
  padding-bottom: 4px;
}
.gallery .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
  min-height: 30px;
}
.gallery .lbl {
  width: 96px;
  font-size: 13px;
  color: #c0c4cc;
  flex: none;
}
</style>
