<!--
  <multi-picker
    v-model="checked"
    :show-picker.sync="showMultiPick"
    :is-multiple="true"
    :options="options"
    @cancel="handleMutiPickCancel"
    @confirm="handleMutiPickConfirm"
    >
  </multi-picker>

  is-multiple: true-多选 false-单选
  show-picker: true or false
  checked:  is-multiple 为 true 类型为 Array, 否则 String
  options:  以 { key: '' , vlaue: '' } 的形式传入
--->

<template>
    <div v-transfer-dom>
      <popup v-model="show" >
          <popup-header
              :left-text="leftText"
              :right-text="rightText"
              :title="title"
              :show-bottom-border="false"
              @on-click-left="handleCancelClick"
              @on-click-right="handleConfirmClick">
          </popup-header>
          <group gutter="0" class="student-list" style="max-height: 300px;overflow-y: auto;">
              <template v-if="isMultiple">
                <checklist
                  type="plain"
                  :label-position="labelPosition"
                  :options="options"
                  v-model="checked"
                >
                </checklist>
              </template>
              <template v-else>
                <radio :options="options" v-model="checked" ></radio>
              </template>
          </group>
      </popup>
    </div>
</template>
<script>
import { TransferDom, Popup, PopupHeader, Group, Checklist, Radio } from 'vux'
export default {
    name: 'MultiPicker',
    props: {
    // 多选时传 Array, 单选时传 String
        value: [Array, String],

        showPicker: {
            type: Boolean,
            default: false
        },

        isMultiple: {
            type: Boolean,
            default: false
        },

        // 以 { key: '' , vlaue: '' } 的形式传入
        options: {
            type: Array,
            default: () => []
        },

        // left or right
        labelPosition: {
            type: String,
            default: 'left'
        },

        rightText: {
            type: String,
            default: '确定'
        },

        leftText: {
            type: String,
            default: '取消'
        },

        title: {
            type: String,
            default: '请选择'
        }
    },
    directives: {
        TransferDom
    },
    components: {
        Popup,
        PopupHeader,
        Group,
        Checklist,
        Radio
    },
    data () {
        return {}
    },
    computed: {
        show: {
            get () {
                return this.showPicker
            },
            set (val) {
                this.$emit('update:showPicker', val)
            }
        },
        checked: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        }
    },
    mounted () {
    },
    methods: {
        handleCancelClick () {
            this.$emit('update:showPicker', false)
            this.$emit('cancel')
        },
        handleConfirmClick () {
            this.$emit('confirm', this.checked)
        }
    }
}
</script>
<style lang="less" scoped>
    // /deep/.vux-popup-dialog {
    //   .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
    //     color: #FF9900;
    //   }
    // }
</style>
