<template>
  <view v-if="isFromReadonly" class="ml-select-picker is-readonly">
    <view class="ml-select-picker-readonly-content">{{ selectLabel }}</view>
  </view>
  <picker v-else class="ml-select-picker" mode="selector" :value="selectIndex" :disabled="disabled" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
    <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border, 'is-clear': modelValue !== null}]">
      <view class="ml-select-picker-text">
        <view v-if="modelValue !== null" class="ml-select-picker-label">{{ selectLabel }}</view>
        <view v-else class="ml-select-picker-placeholder">{{ placeholder }}</view>
      </view>
      <view v-if="clearable && modelValue !== null" class="ml-select-picker-clear-icon" @click.stop="clearEvent">
        <ml-icon name="delete-filling"></ml-icon>
      </view>
      <view v-else class="ml-select-picker-icon">
        <ml-icon name="arrow-right" />
      </view>
    </view>
  </picker>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import XEUtils from 'xe-utils'

export default defineComponent({
  name: 'MlSelectPicker',
  options: {
    virtualHost: true
  },
  props: {
    modelValue: [Number, String],
    border: Boolean,
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: Boolean,
    clearable: Boolean,
    readonly: Boolean,
    options: Array as PropType<any[]>,
    optionProps: Object,
    width: String,
    isAll: Boolean,
    className: String
  },
  inject: {
    form: {
      from: 'mlForm',
      default: null
    }
  },
  data () {
    return {
      selectIndex: 0
    }
  },
  computed: {
    isFromReadonly () {
      const form: any = this.form
      if (this.readonly) {
        return true
      }
      return form ? form.readonly : false
    },
    optionList () {
      // #ifdef MP-ALIPAY
      if (!this.options || !this.options.length) {
        return [
          {
            [this.optLabelField]: '',
            [this.optValueField]: null
          }
        ]
      }
      // #endif

      if (this.isAll) {
        return [
          {
            [this.optLabelField]: '全部',
            [this.optValueField]: ''
          }
        ].concat(this.options)
      }
      return this.options
    },
    selectLabel () {
      const item = this.optionList.find(item => String(item[this.optValueField]) === String(this.modelValue))
      return XEUtils.toValueString(item ? item[this.optLabelField] : this.modelValue)
    },
    optOptions () {
      return Object.assign({}, this.optionProps)
    },
    optLabelField () {
      return this.optOptions.label || 'label'
    },
    optValueField () {
      return this.optOptions.value || 'value'
    }
  },
  watch: {
    modelValue () {
      this.updateSelectStatus()
    },
    optionList () {
      this.updateSelectStatus()
    }
  },
  created () {
    this.updateSelectStatus()
  },
  methods: {
    updateSelectStatus () {
      const index = XEUtils.findIndexOf(this.optionList, item => String(item[this.optValueField]) === String(this.modelValue))
      this.selectIndex = index === -1 ? 0 : index
    },
    changeEvent (e: any) {
      const index = e.detail.value
      const item = this.optionList[index]
      this.selectIndex = index
      let value = null
      if (item) {
        value = item[this.optValueField]
      }
      this.$emit('update:modelValue', value)
      if (this.modelValue !== value) {
        this.$emit('change', { value, option: item })
      }
    },
    clearEvent () {
      const value = null
      this.$emit('update:modelValue', value)
      this.$emit('clear', { value })
      this.$emit('change', { value, option: null })
    }
  }
})
</script>

<style lang="scss">
.ml-select-picker {
  display: block;
  font-size: $ml-base-font-size;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  user-select: none;
  flex-direction: row;
  align-items: center;
  width: 100%;
  color: #6a6a6a;
}
.ml-select-picker-readonly-content {
  padding: 20rpx;
}
.ml-select-picker-warpper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10rpx;
  height: 70rpx;
  border-radius: $ml-border-radius;
  &.is-border {
    border: 1px solid #e5e5e5;
    background: #fff;
  }
}
.ml-select-picker-text {
  flex-grow: 1;
  overflow: hidden;
  .ml-select-picker-label,
  .ml-select-picker-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ml-select-picker-placeholder {
    color: $ml-input-color-placeholder;
  }
}
.ml-select-picker-clear-icon {
  width: 34rpx;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: $ml-input-clear-icon-color;
  font-size: $ml-input-clear-icon-font-size;
  border-radius: 0 $ml-border-radius $ml-border-radius 0;
}
.ml-select-picker-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #6a6a6a;
}
</style>
