<!-- *******************  单个下拉选择  *******************  -->
<template>
  <view class="xh-select" :style="{ width: fieldsWidth }">
    <!-- <u-input :value="text" disabled @click="show=true" :placeholder="placeholder" :placeholder-style="placeholderStyle"
		:custom-style="customStyle" :clearable="false"></u-input>
		<u-select :list="settings" v-model="show" @confirm="actionSheetCallback" safe-area-inset-bottom></u-select>
		<u-icon class="input-icon" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon> -->

    <view class="u-flex u-row-between picker-common">
      <picker
        mode="selector"
        :value="index"
        range-key="label"
        :range="settings"
        @click="show = true"
        @change="pickerChange"
        class="u-flex-1"
        :disabled="disabled"
      >
        <view class="txt">{{ text || '请选择' }}</view>
      </picker>
      <u-icon
        class="input-icon"
        color="#2272FF"
        :name="show ? 'arrow-up' : 'arrow-down'"
      ></u-icon>
    </view>
  </view>
</template>

<script>
import stringMixin from './stringMixin'
export default {
  name: 'XhSelect',
  components: {},
  mixins: [stringMixin],
  props: {
    placeholder: {
      type: String,
      default: '请选择',
    },
    width: {
      // 例如：454rpx
      type: String,
      default: '100%',
    },
  },
  data() {
    return {
      show: false,
      index: '',
    }
  },
  computed: {
    type() {
      if (this.item && this.item.fieldsType == 'password') {
        return this.item.fieldsType
      } else {
        return 'text'
      }
    },
    settings() {
      let result = []
      let settings = this.item.fieldsOptions || []
      result = settings.map((item) => {
        return {
          label: item.label,
          value: item.key,
          color: '#333333',
          fontSize: 26,
        }
      })
      return result
    },
    text() {
      let option = this.item.fieldsOptions.find((a) => {
        return a.key === this.dataValue
      })
      return option ? option.label : ''
    },
    placeholderStyle() {
      return 'color:#999999;font-size:26rpx'
    },
    customStyle() {
      return {
        'background-color': '#F4F5F7',
        'border-radius': '12rpx',
        color: '#333333',
        'padding-left': '20rpx',
        'padding-right': '60rpx',
        width: this.width,
        'font-size': '26rpx',
        height: '76rpx',
      }
    },
    fieldsWidth() {
      return this.item.fieldsWidth ? this.item.fieldsWidth + 'rpx' : '100%'
    },
  },
  watch: {},
  mounted() {},
  methods: {
    actionSheetCallback(event) {
      const id = event[0].value
      this.dataValue = id
      this.valueChange(id)
    },
    pickerChange(data) {
      this.index = data.detail.value
      const id = this.item.fieldsOptions[this.index].key
      this.dataValue = id
      this.valueChange(id)
    },
  },
}
</script>

<style lang="scss" scoped>
.xh-select {
  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>
