<template>
  <div class="h100 w100">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="common-top mainBox wp">
      <!------------强大的分割线-------------->
      <button class="common-btn mg20" @click="actionsheetT=true">actionsheet 上弹出</button>
      <zgh-actionsheet direction="top" v-model="actionsheetT">
        <div class="bgf" slot="content">
          <zgh-select-button type="radio" :list="radioList3" v-model="radioSelect3" name="name3" cls="zgh-radio-box pd10">
            <i v-for="(item,index) in radioList3" :slot="'slot'+index" class="iconfont color9 fs14 r">&#xe68e;</i>
          </zgh-select-button>
        </div>
      </zgh-actionsheet>
      <!------------强大的分割线-------------->
      <button class="common-btn mg20" @click="actionsheetR=true">actionsheet 右弹出</button>
      <zgh-actionsheet direction="right" v-model="actionsheetR">
        <div class="bgf" slot="content">
          <div class="m-pd30" v-for="i in 20" :key="i">{{i}}</div>
        </div>
      </zgh-actionsheet>
      <!------------强大的分割线-------------->
      <button class="common-btn mg20" @click="actionsheetB=true">actionsheet 下弹出</button>
      <zgh-actionsheet direction="bottom" v-model="actionsheetB">
        <div class="bgf" slot="content">
          <zgh-select-button type="radio" :list="radioList3" v-model="radioSelect3" name="name3" cls="zgh-radio-bar pd10">
            <i v-for="(item,index) in radioList3" :slot="'slot'+index" class="iconfont color9 fs14 r">&#xe68e;</i>
          </zgh-select-button>

        </div>
      </zgh-actionsheet>
      <!------------强大的分割线-------------->
      <button class="common-btn mg20" @click="actionsheetL=true">actionsheet 左弹出</button>
      <zgh-actionsheet direction="left" v-model="actionsheetL">
        <div class="bgf" slot="content">
          <div class="m-pd30" v-for="i in 20" :key="i">{{i}}</div>
        </div>
      </zgh-actionsheet>
      <div class="highlight mgB20">

        <div class="wp fs14">
          用法：
          <p>引入 import {ActionSheet} from 'zgh'</p>
        </div>

        <pre>
          <code class="hljs language-html">
            {{code | htmlDecode}}
          </code>
        </pre>
        <zgh-table :tbody="tbody"></zgh-table>

      </div>
    </div>
  </div>
</template>

<script>

  import SelectButton from "../../components/SelectButton/main";

  export default {
    components: {SelectButton},
    data() {
      return {
        actionsheetT: false,
        actionsheetR: false,
        actionsheetB: false,
        actionsheetL: false,
        radioList3: [{
          value: 1,
          name: '广州'
        }, {
          value: 2,
          name: '上海'
        }, {
          value: 3,
          name: '深圳'
        }],
        radioSelect3: [{
          value: 1,
          name: '广州'
        }],
        tbody: [
          {name: 'direction', explain: '控制进场方向（top,right,bottom,left）', type: 'String', default: 'bottom'},
          {name: 'v-model', explain: '绑定值控制显示/隐藏', type: 'Boolean', default: 'false'},
          {name: 'isMaskClick', explain: '点击遮罩是否隐藏', type: 'Object', default: 'false'}
        ],
        code: `
      <zgh-actionsheet name="top" v-model="actionsheetT">
        <div slot="content">
          <zgh-select-button type="radio" :list="radioList3" v-model="radioSelect3" name="name3" cls="zgh-radio-box pd10">
            <i v-for="(item,index) in radioList3" :slot="'slot'+index" class="iconfont color9 fs14 r">&#xe68e;</i>
          </zgh-select-button>
        </div>
      </zgh-actionsheet>`
      }
    },
    computed: {},
    mounted() {
    },
    methods: {}
  }
</script>

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

  a {
    display: block;
    text-align: center;
    .lh(70);
  }
</style>
