<template>
  <div>
    <div class="cus-select" @click="changeVisible">
      <slot>
        <span class="cus-select-text">{{value}}</span>
        <i class="icon coicon co-fr coicon-unfold" :class="{'coicon-packup': visible, 'coicon-unfold': !visible}"></i> 
      </slot>
    </div>
    <cus-popup class="cus-select-popup" v-model="visible" position="bottom">
      <cus-picker show-toolbar :slots="valueSlots" @change="onValueChange" :visible-item-count="5">
        <span class="co-datetime-action co-datetime-cancel" @click="cancel">{{ cancelText }}</span>
        <span class="co-datetime-action co-datetime-confirm" @click="confirm">{{ confirmText }}</span>
      </cus-picker>
    </cus-popup>
  </div>
</template>

<script>
/**
 * btn-tab-item
 * @module components/select
 * @desc 选择数据
 * @param {String} value - 选中后的返回值
 *
 * @example
 * <cus-select v-model="value2" @confirm="handleChange2" :value-slots="priority">
 * </cus-select>
 */
import { Picker, Popup } from 'coui';
export default {
  name: 'cus-select',
  data() {
    return {
      visible: false,
      currentValue: ''
    };
  },
  props: {
    valueSlots: {
      type: Array
    },
    visibleItemCount: {
      type: Number,
      default: 5
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    value: {
      type: String,
      default: ''
    }
  },
  components: {
    'cus-picker': Picker,
    'cus-popup': Popup
  },
  methods: {
    changeVisible() {
      this.visible = !this.visible;
    },
    confirm() {
      this.visible = false;
      if (!this.currentValue) {
        let slot = this.valueSlots;
        let index = slot.defaultIndex || 0;
        this.currentValue = slot.values[index];
        console.log(this.currentValue);
      }
      this.$emit('confirm', this.currentValue);
    },
    cancel() {
      this.$emit('cancel');
      this.visible = false;
    },
    onValueChange(el, val) {
      this.$emit('change', el, val);
      this.currentValue = val[0];
    }
  }
  // activated() {
  //   var slot = this.valueSlots;
  //   var index = slot.defaultIndex || 0;
  //   this.currentValue = slot.values[index];
  //   console.log(this.currentValue);
  // }
};
</script>
<style lang="less" ref="stylesheet/less">
  .cus-select{
    min-height: 100%;
    min-width: 40px;
  }
  .cus-select-popup{
    width: 100%;
    .picker-toolbar {
      border-bottom: solid 0.05rem #eaeaea;
    }
  }
</style>
