<template>
  <div class="mainBox w100">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="common-top mainBox">

      <button class="common-btn center-block mgT20" @click="pickerModel.activeShow=true">选择Button</button>
      <p>
        <span v-for="(item,index) in pickerModel.selectValue" :key="index">
          {{item.name}}
        </span>
      </p>
      <zgh-picker v-model="pickerModel"
                  v-on:sureHandle="onSureHandle"
                  v-on:changeSlide="onChangeSlide"
                  :pickerData="pickerData"
                  keyName="name"
                  keyValue="value"
      >
      </zgh-picker>
      <div class="highlight">
        <div class="wp fs14">
          用法：
          <div>1、pickerData：数据的集合
            <pre>
            [
              [{value:1,name:广州1}],
              [{value:1,name:广州1}],
              [{value:1,name:广州1}]
            ]
          </pre>
          </div>
          <p>2、keyName：数据键名称（name），keyValue值名称（value）</p>
          <div>3、v-modle绑定值为当前选中值的集合（可初始化选中的值）
            <pre>
          {
              activeShow:false,//代表是否显示/隐藏
              selectValue:[{//当前选中的值
              value:3,
              name:'广州3'
              },{
              value:6,
              name:'广州6'
              },{
              value:10,
              name:'广州10'
              }]
            }
          </pre>
          </div>
          <p>4、v-on:sureHandle 点击确认按钮触发回掉 </p>
          <p>5、v-on:changeSlide="onChangeSlide(index,item)" 切换结束时触发回掉（参数1：第index组切换的下标，参数2：切换完选中的值item） </p>
        </div>
        <pre>
          <code class="hljs language-html">
            {{code | htmlDecode}}
          </code>
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerModel: {
          activeShow: false,
          selectValue: [{
            value: 3,
            name: '广州3'
          }, {
            value: 6,
            name: '广州6'
          }, {
            value: 10,
            name: '广州10'
          }]
        },
        code: `
          <picker v-model="pickerModel"
            keyName="name"
            keyValue="value"
            v-on:sureHandle="onSureHandle"
            v-on:changeSlide="onChangeSlide"
            :pickerData="pickerData">
          </picker>
          `
      }
    },
    computed: {
      pickerData() {
        let attr = []
        for (let i = 0; i < 15; i++) {
          attr.push({
            value: i,
            name: '广州' + i
          })
        }
        return [attr, attr, attr]
      }
    },
    mounted() {

    },
    methods: {
      onChangeSlide(index, item) {
        console.log(index, item, 123123)
      },
      onSureHandle() {

      }
    }
  }
</script>

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

  a {

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