<!--
  @name 公用组件：一、二维层级动态选择器
  @desc 基于 vant-ui picker
  @param {String} [title]    - 标题文本
  @param {String} [confirmtext] - 确认按钮文本
  @param {String} [defaultIndex] - 初始选中值索引
  @function 外部方法调用：
    in-开启：open（） -- this.$refs.modle.open()
    in-初始值设置： setValue（list） -- this.$refs.modle.setValue(list)
    out-确认事件：onConfirm（value）；
    
    list数据模型：
      let array = ["选项值"，"选项值"，"选项值"]  // 一维数据
      let Object = {                            // 二维数据
          选项一: ["选项值"，"选项值"，"选项值"]，
          选项二: ["选项值"，"选项值"，"选项值"]
      }
  @example 调用示例
    <modle ref="modle" :title="title" :confirmtext="confirmtext"  @confirm="handleSelect"></modle>
  @time 2020年4月28日23:24:53 -- design by Yj_cHen
-->
<template>
  <van-popup
    v-model="showPicker"
    position="bottom"
    get-container="body"
    class="handtype-popup"
  >
    <van-picker
      show-toolbar
      :columns="columns"
      :default-index="defaultIndex"
      :title="title"
      :confirm-button-text="confirmtext"
      @cancel="showPicker = false"
      @confirm="onConfirm"
      @change="onChange"
    />
  </van-popup>
</template>

<script>
export default {
  name: "lj_pricker",
  data() {
    return {
      showPicker: false,
      listSave: {},
      columns: [],
    };
  },
  props: {
    confirmtext: {
      type: String,
      default: "确认"
    },
    defaultIndex: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ""
    }
  },
  methods: {
    onChange(picker, values) {
      if (Object.prototype.toString.call(this.listSave) === "[object Object]") {
        picker.setColumnValues(1, this.listSave[values[0]]);
      }
    },
    setValue(list) {
        if (!list) {
            this.$toast({
                position: "bottom",
                message: "数据获取失败",
            });
            return false;
        }
        if (Object.prototype.toString.call(list) === "[object Array]" || Object.prototype.toString.call(list) === "[object Object]") {
            if (Object.prototype.toString.call(list) === "[object Array]") {
                this.columns = list;
                console.log("pop this.columns=>", this.columns);
            } else {
                this.listSave = list;
                this.columns = [{ values: Object.keys(list) }, { values: list[Object.keys(list)[0]] }];
            }
            
            this.showPicker = true;
        } else {
            alert("picker数据传输错误");
        }
    },
    open() {
      this.showPicker = true;
    },
    onConfirm(value, index) {
      this.showPicker = false;
      this.$emit("confirm", value, index);
    },
  }
}
</script>