<template>
  <div class="picker-wrap">
    <div
      class="picker-wrap-txt"
      :class="{ placeholder: !String(pickerValShow) }"
      @click="show = true"
    >
      <span>{{ pickerValShow || placeholder }}</span>
      <svg-icon icon-class="triangle-right" slot="button" />
    </div>
    <cr-popup v-model="show" position="bottom" get-container="body">
      <cr-picker
        ref="picker"
        :columns="pickerData"
        value-key="title"
        show-toolbar
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </cr-popup>
  </div>
</template>

<script>
// TODO 目前没有用到的业务场景，默认值还未做处理
import popupPickerMixin from "../mixins/popupPicker.mixin.js";
export default {
  name: "PopupPicker",
  mixins: [popupPickerMixin],
  methods: {
    handleResult(res) {
      this.pickerValShow = res[0].title;
      this.pickerVal = res[0].value;
    },
    setDefaultVal() {
      setTimeout(() => {
        const $picker = this.$refs.picker;
        $picker.setColumnIndex(0, this.pickerData.indexOf(this.value));
      });
    }
  }
};
</script>
<style lang="less">
.picker-wrap {
  width: 100%;
  &-txt {
    height: 24px;
    color: #333;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .svg-icon {
    height: 16px;
    width: 16px;
  }
  .placeholder {
    color: #ccc;
  }
}
</style>
