<template>
  <div class="mainBox w100 wp ">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="common-top h100">
      <h6 class="mgT10 mgB10">class：zgh-checkbox-button</h6>
      <zgh-select-button type="checkbox" :list="radioList" v-model="radioSelect1" name="name1" cls="zgh-checkbox-button">
      </zgh-select-button>
      <h6 class="mgT30 mgB10">class：zgh-checkbox-box</h6>
      <zgh-select-button type="radio" :list="radioList2" v-model="radioSelect2" name="name2"
                     cls="zgh-radio-box m-mgR20 m-pd10">
        <i v-for="(item,index) in radioList" :slot="'slot'+index" class="l iconfont color9 fs16 mgR5">&#xe608;</i>
      </zgh-select-button>
      <h6 class="mgT30 mgB10">class：zgh-checkbox-bar</h6>
      <zgh-select-button type="radio" :list="radioList3" v-model="radioSelect3" name="name3" cls="zgh-radio-bar pd10 borderB">
        <i v-for="(item,index) in radioList" :slot="'slot'+index" class="iconfont color9 fs14">&#xe68e;</i>
      </zgh-select-button>
      <div class="highlight mgB20">
        <div class="wp fs14">
          用法：
          <p>:slot="'slot'+index"   扩展内容  需要for循环list（类似第三展示的右边钩钩）</p>
        </div>
        <pre>
          <code class="hljs language-html">
            {{code | htmlDecode}}
          </code>
        </pre>
        <zgh-table :tbody="tbody"></zgh-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        taggleActive: true,
        radioList: [{
          value: 1,
          name: '广州'
        }, {
          value: 2,
          name: '上海'
        }, {
          value: 3,
          name: '深圳'
        },{
          value: 5,
          name: '广州'
        }, {
          value: 6,
          name: '上海'
        }, {
          value: 7,
          name: '深圳'
        }],
        radioList2: [{
          value: 1,
          name: '广州'
        }, {
          value: 2,
          name: '上海'
        }, {
          value: 3,
          name: '深圳'
        }],
        radioList3: [{
          value: 1,
          name: '广州'
        }, {
          value: 2,
          name: '上海'
        }, {
          value: 3,
          name: '深圳'
        }],
        radioSelect1: [{
          value: 1,
          name: '广州'
        }],
        radioSelect2: [{
          value: 1,
          name: '广州'
        }],
        radioSelect3: [{
          value: 1,
          name: '广州'
        }],
        tbody: [
          {name: 'type', explain: '类型radio/checkbox', type: 'String', default: 'radio'},
          {name: 'v-model', explain: '控制显示/隐藏值', type: 'Boolean', default: 'false'},
          {name: 'list', explain: '数据', type: 'Array', default: "[{value:1,name:'name'}]"},
          {name: 'keyName', explain: '数据键名称', type: 'String', default: 'name'},
          {name: 'keyValue', explain: '数据值名称', type: 'String', default: 'value'},
          {name: 'name', explain: 'input name属性', type: 'String', default: 'SelectButton'},
          {name: 'cls', explain: '为按钮添加的class', type: 'Object', default: 'false'}
        ],
        code: `
        <zgh-select-button type="radio" :list="radioList" v-model="radioSelect"  name="name1" cls="zgh-radio-bar pd10 borderB">
          <i v-for="(item,index) in radioList" :slot="'slot'+index" class="iconfont color9 fs14">&#xe68e;</i>
        </zgh-select-button>
        `
      }
    },
    computed: {},
    mounted() {

    },
    methods: {}
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  h3 {
    background: #eee;
  }
</style>
