<template>
  <div class="page-popup">
    <co-popup v-model="visible" position="bottom" class="co-popup-4">
      <div class="picker-toolbar co-line-down">
        <span class="co-datetime-action co-datetime-cancel" @click="cancel()">取消</span>
        <span class="co-datetime-action co-datetime-confirm" @click="confirm()">确定</span>
      </div>
      <co-picker v-if="options.type != 'multi'" ref="pickerRef" valueKey="text" :slots="slots" @change="onPickerChange" :visible-item-count="5"></co-picker>
      <div class="picker-multi" v-if="options.type == 'multi'">
        <co-checklist
          @change="multiUpdate"
          v-model="multiValue"
          :options="multiOptions">
        </co-checklist>
      </div>
    </co-popup>
  </div>
</template>

<script type="es6">

  export default {
    name: 'cus-picker',
    data() {
      return {
        slots: [],
        options: {},
        multiOptions: [],
        multiValue: [],
        values: null,
        visible: false
      };
    },
    methods: {
      open(options) {
        this.options = options;
        if (options.type === 'multi') {
          // 多选
          this.multiValue = options.selected || [];
          this.multiOptions = options.datas.map(x => {
            return { 'label': x.text, 'value': x.value };
          });
        } else {
          // 单选
          if (options.level) {
            // 2级选择
            this.slots = [];
            options.datas.map((item, index) => {
              let defaultIndex = 0;
              item.map((x, xIndex) => {
                if (x.value === options.selected[index]) {
                  defaultIndex = xIndex;
                }
              });
              let data = {
                flex: 1,
                defaultIndex: defaultIndex,
                values: item
              };
              this.slots.push(data);
              if (index === 0) {
                this.slots.push({
                  divider: true,
                  content: '-'
                });
              }
            });
          } else {
            let defaultIndex = 0;
            options.datas.map((item, index) => {
              if (item.value === options.selected) {
                defaultIndex = index;
              }
            });
            this.slots = [
              {
                flex: 1,
                defaultIndex: defaultIndex,
                values: options.datas
              }
            ];
          }
          this.$refs.pickerRef.initSlots();
        }
        this.visible = true;
      },
      onPickerChange(picker, value) {
        this.values = value;
      },
      multiUpdate(results) {
        this.values = [];
        if (results && results.length > 0) {
          this.options.datas.map(x => {
            if (results.indexOf(x.value) > -1) {
              this.values.push(x);
            }
          });
        }
      },
      cancel() {
        this.values = null;
        this.visible = false;
      },
      confirm() {
        this.visible = false;
        let returnResult = this.values;
        if (!this.options.level && this.options.type !== 'multi') {
          returnResult = this.values ? this.values[0] : 'error';
        }
        this.$emit('confirm', returnResult);
      }
    }
  };
</script>
