<template>
  <van-popup
    :value="value"
    :overlay="overlay"
    :duration="duration"
    :lock-scroll="lockScroll"
    :get-container="getContainer"
    :close-on-popstate="closeOnPopstate"
    :close-on-click-overlay="closeOnClickOverlay"
    :safe-area-inset-bottom="safeAreaInsetBottom"
    position="bottom"
    class="toolbar-sheet-br van-share-sheet"
    @input="toggle"
  >
    <div class="van-share-sheet__header">
      <h2 v-if="title" class="van-share-sheet__title">{{ title }}</h2>
      <span v-if="description" class="van-share-sheet__description">{{ description }}</span>
    </div>
    <div class="van-share-sheet__options" :class="{ border: border }">
      <div
        v-for="(el,i) in newOptions "
        :key="'options'+i"
      >
        <div class="toolbar-sheet-wrapper">
          <div
            v-for="item in el "
            :key="item.index"
            class="toolbar-sheet-option van-share-sheet__option"
            @click="()=>{
              onSelect(item.data, item.index)
            }"
          >
            <ibps-avatar
              :icon="item.data.icon"
              :type="item.data.type||'primary'"
              :icon-prefix="iconPrefix"
              round
              class="van-share-sheet__icon"
            />
            <span v-if="item.data.name" class="van-share-sheet__name">{{ item.data.name | inputBtnText }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="van-share-sheet__options" :class="{ border: border }">
      <div
        v-for="(option,index) in options "
        :key="index"
        class="toolbar-sheet__option van-share-sheet__option"
        @click="()=>{
          onSelect(option, index)
        }"
      >
        <ibps-avatar
          :icon="option.icon"
          :type="option.type||'primary'"
          :icon-prefix="iconPrefix"
          round
          class="van-share-sheet__icon"
        />
        <span v-if="option.name" class="van-share-sheet__name">{{ option.name | inputBtnText }}</span>
      </div>
    </div> -->

    <button type="button" class="van-share-sheet__cancel" @click="onCancel">
      {{ cancelText }}
    </button>
  </van-popup>
</template>
<script>
import IbpsAvatar from '@/components/ibps-avatar'
export default {
  name: 'ibps-toolbar-sheet',
  components: {
    IbpsAvatar
  },
  filters: {
    inputBtnText(value) {
      if (value && value.length > 4) {
        return value.substring(0, 4) + '...'
      }
      return value
    }
  },
  props: {
    value: Boolean,
    overlay: {
      type: Boolean,
      default: true
    },
    duration: {
      type: [Number, String],
      default: 0.3
    },
    overlayStyle: Object,
    overlayClass: String,
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    lazyRender: {
      type: Boolean,
      default: true
    },
    title: String,
    cancelText: String,
    description: String,
    options: {
      type: Array,
      default: () => []
    },
    closeOnPopstate: {
      type: Boolean,
      default: true
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: true
    },
    getContainer: {
      type: String,
      default: 'body'
    },
    border: {
      type: Boolean,
      default: true
    },
    iconPrefix: {
      type: String,
      default: 'ibps-icon'
    }
  },
  data() {
    return {
      newOptions: []
    }
  },
  created() {
    this._getNewOptions()
  },
  methods: {
    _getNewOptions() { // 将数据转换成双行
      this.newOptions = []
      if (!(this.options && this.options.length > 0)) return
      let fTemps = []
      let temp = {}
      this.options.forEach((el, i) => {
        temp = { data: el, index: i }
        fTemps.push(temp)
        if (((i + 1) % 6 === 0) || i === this.options.length - 1) {
          this.newOptions.push(fTemps)
          fTemps = []
        }
      })
    },
    onCancel() {
      this.toggle(false)
      this.$emit('cancel')
    },
    onSelect(option, index) {
      this.$emit('select', option, index)
    },

    toggle(val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="scss">
  .toolbar-sheet-br{
    border-radius: 6px 6px 0 0;
  }
  .toolbar-sheet__option{
    min-width: 125px;
    min-height: 100px;
    justify-content: center;
  }
  .toolbar-sheet-wrapper{
    // height: 200px;
    width: calc(100vw - 8px);
    display: flex;
    flex-wrap: wrap;
    .toolbar-sheet-option{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 100px;
    }
  }

</style>
