<template>
  <uni-popup ref="msPicker" type="bottom">
    <picker-view style="width: 100%;height: 300rpx;background-color: #FFFFFF;" @change="valueRangeChange">
      <picker-view-column>
        <view style="text-align: center;" v-for="item in valueRangeList">{{item.name}}</view>
      </picker-view-column>
    </picker-view>
    <view>
      <view class="btn cancel" :style="{'color': cancelTextColor}" @click="handleCancel">{{cancelText}}</view>
      <view class="btn confirm" :style="{'color': confirmTextColor}" @click="handleConfirm">{{confirmText}}</view>
    </view>
  </uni-popup>
</template>

<script>
  export default {
    props: {
      // 取消按钮文字
      cancelText: {
        type: String,
        default: '取消'
      },
      // 确定按钮文字
      confirmText: {
        type: String,
        default: '确定'
      },
      // 取消按钮文字颜色
      cancelTextColor: {
        type: String,
        default: '#666'
      },
      // 确定按钮文字颜色
      confirmTextColor: {
        type: String,
        default: '#5999FF'
      },
      valueRangeList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        value: this.valueRangeList[0]
      }
    },
    methods: {
      valueRangeChange(e) {
        this.value = this.valueRangeList[e.detail.value].value;
        console.log("===valueRangeChange===="+this.value)
      },
      showModal() {
        this.$refs['msPicker'].open();
      },
      handleCancel() {
        this.$refs['msPicker'].close();
        this.$emit('onClickCancel', 'cancel')
      },
      handleConfirm() {
        this.$refs['msPicker'].close();
        this.$emit('onClickConfirm', this.value)
      }
    }
  }
</script>

<style scoped>
  .btn {
    width: 50%;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    float: left;
    background-color: #FFFFFF;
    border-top: 1rpx solid #ddd;
  }
</style>

this.$refs['msPicker'].showModal();

pickConfirm(value) {
  console.log('===value==' + value);
}