<!--求购时限选择-->

<template>

  <div class="customSelectWrapper" @click="showPicker">
    <div class="customSelectTextWrapper" >
      <span class="leftText">求购期限：</span>
      <div class="rightWrapper">
        <span class="rightText">{{currentOption || '7天'}}</span>
        <i class="cubeic-arrow" ></i>
      </div>
    </div>
  </div>

</template>

<script>

import {Select} from 'cube-ui';

export default {
  name: 'DayChoose',
  props: {
    options: {
      type: Array,
      default: [],
    },
    chooseDay: {
      type: String,
      default: '7天',
    },
    choose: {
      type: Function,
      default: ()=>{},
    }
  },
  components: {Select},

  computed: {

    currentOption: {
      get() {
        return this.current || this.chooseDay;
      },

      set(val) {
        this.current = val;
      }
    }
  },

  data() {
    return {
      // value: '7天',
      title: '选择求购时限',
      current: '',
    };
  },
  methods: {
    change(value, index, text) {
      // console.log('change', value, index, text);
      this.choose && this.choose(value[0]);
      this.current = value[0];
    },

    showPicker() {

      console.log(this.options);
      this.$createPicker({
        title: '选择求购时限',
        data: [this.options],
        onSelect: this.change,
        selectedIndex: [2],
        onCancel: () => {

        }

      }).show();
    }
  }

};
</script>

<style lang="scss" scoped>
  .customSelectWrapper {
    position: relative;
    height: 60px;
    padding-top: 10px;
  }

  .customSelectTextWrapper {
    position: absolute;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

  }

  .leftText {
    font-family: PingFang-SC-Regular;
    font-size: 14*2px;
    color: #000000;
    letter-spacing: 0;
  }

  .rightWrapper {

  }

  .rightText {
    font-family: PingFang-SC-Regular;
    font-size: 14*2px;
    color: #000000;
    letter-spacing: 0;
  }

  .customSelect {
    position: relative;
    opacity: 1 !important;
    z-index: 1;
  }

</style>