<template>
  <picker
    :range="pickerList"
    :range-key="props?.key || 'text'"
    @change="onChange"
    :disabled="props?.disabled"
  >
    <view
      class="cell_content"
      :style="{
        borderTop: props.borderTop ? borderStyle : '',
        padding: props?.padding || paddingStyle
      }"
    >
      <view class="title">
        {{ props?.title || '标题' }}
        <text v-if="required"> * </text>
      </view>
      <view :class="valueEd ? 'valueStyle' : 'valueStyle placeholderStyle'">
        {{ valueEd || placeholder }} <uni-icons type="right" size="15" color="#999"></uni-icons>
      </view>
    </view>
  </picker>
</template>
<script setup lang="ts">
const borderStyle = '1rpx solid #eee'
const paddingStyle = '10rpx 0'
import { onMounted, ref, watch } from 'vue'

interface EnumItem {
  text?: string
  value?: string
  type?: string
}
const props = defineProps([
  'Enums',
  'title',
  'pickerIndex',
  'value',
  'borderTop',
  'required',
  'tip',
  'key',
  'des',
  'padding',
  'valueModel',
  'disabled'
])
const placeholder = '请选择'
const valueEd = ref('')
const pickerList = ref<any>([])
const emit = defineEmits(['change', 'update:valueModel'])
const onChange = (e: any) => {
  let selectData: any = pickerList.value[e?.detail.value]
  valueEd.value = selectData?.text
  emit('update:valueModel', selectData?.value)
  emit('change', selectData)
}

const getEnums = (): any => {
  let list: EnumItem[] = Object.entries(props?.Enums as Record<string, EnumItem>).map(
    ([key, value]) => ({
      text: value.text,
      value: value.value,
      type: value?.type || ''
    })
  )
  pickerList.value = list
}
watch(
  () => props?.Enums,
  () => {
    getEnums()
  }
)
onMounted(() => {
  getEnums()
})
</script>
<style lang="scss" scoped>
.cell_content {
  padding: 16rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    color: #333333;
    font-size: 29rpx;
    padding: 25rpx 0;
    text {
      color: #f00;
    }
  }
  .valueStyle {
    font-size: 28rpx;
  }
  .placeholderStyle {
    color: #ccc;
  }
}
</style>
