<!-- *******************  单个下拉选择  *******************  -->
<template>
  <view class="xh-specifications" :style="{ width: fieldsWidth }">
    <view
      class="u-flex u-row-between picker-common"
      @click="$u.throttle(handleClick, 500)"
    >
      <view>{{ text || '请选择' }}</view>
      <u-icon class="input-icon" color="#2272FF" name="arrow-down"></u-icon>
    </view>
  </view>
</template>

<script>
import stringMixin from './stringMixin'
export default {
  name: 'XhSpecifications',
  components: {},
  mixins: [stringMixin],
  props: {
    placeholder: {
      type: String,
      default: '请选择',
    },
    width: {
      // 例如：454rpx
      type: String,
      default: '100%',
    },
    type: {
      type: String,
      default: 'text',
    },
  },
  data() {
    return {}
  },
  computed: {
    fieldsWidth() {
      // 后台返回宽度就用后台的
      return this.item.fieldsWidth ? this.item.fieldsWidth + 'rpx' : '100%'
    },
    text() {
      // 根据选中的key显示
      let option = this.item.fieldsOptions.find((a) => {
        return a.key === this.dataValue
      })
      return option ? option.label : ''
    },
  },
  watch: {},
  mounted() {},
  methods: {
    handleClick() {
      if (this.disabled) return
      var pages = getCurrentPages()
      if (pages.length >= 1) {
        var page = pages[pages.length - 1]
        page.info = this.item // 给下个页面传递数据
      }
      uni.navigateTo({
        // 把选中的key传给下个页面
        url: 'pages/order/specification?selectedId=' + this.dataValue,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.xh-specifications {
  position: relative;
  .input-icon {
    position: absolute;
    right: 20rpx;
    top: 26rpx;
    color: #2272ff;
  }
}
.picker-common {
  min-height: 35px;
  background-color: #f4f5f7;
  border-radius: 6px;
  color: #333333;
  padding-left: 10px;
  padding-right: 12px;
  width: 100%;
  height: 38px;
  .txt {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
