<template>
  <picker
    :range="pickerList"
    :range-key="props?.key || 'label'"
    :disabled="props?.disabled"
    @change="onChange"
  >
    <view
      class="picker_select_btn"
      :style="{
        borderTop: props.borderTop ? borderStyle : '',
        padding: props?.padding || paddingStyle
      }"
    >
      <view :style="props.titleStyle" class="title">
        {{ props?.title || '标题' }}
        <text v-if="required"> * </text>
      </view>
      <view :style="props.rightStyle" class="right_value">
        <view class="label" v-if="selectValue">{{ selectValue }}</view>
        <view v-else class="placeholder_style">
          {{ props?.placeholder || '请选择' }}
        </view>
        <uni-icons type="right" color="#333" size="12" />
      </view>
    </view>
  </picker>
</template>
<script setup lang="ts">
const borderStyle = '1rpx solid #eee'
const paddingStyle = '15rpx 0'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { onMounted, ref, watch } from 'vue'
import { Apis } from '@/gen/Apis'
const props = defineProps([
  'Enums',
  'title',
  'pickerIndex',
  'value',
  'borderTop',
  'required',
  'disabled',
  'tip',
  'key',
  'des',
  'padding',
  'valueModel',
  'placeholder',
  'titleStyle',
  'rightStyle',
  'defaultValue'
])
const pickerList = ref<any>([])
const selectValue = ref('')
const emit = defineEmits(['change', 'update:valueModel'])
const onChange = (e: any) => {
  let selectData: any = pickerList.value[e?.detail.value]
  selectValue.value = selectData?.label
  emit('update:valueModel', selectData?.value || '')
  emit('change', selectData)
}

watch(
  () => props.defaultValue,
  newVal => {
    selectValue.value = newVal
  }
)

const getPickerList = () => {
  getApiLoading(Apis.Emergency.EmergencyEventLevels.Select, {}).then(res => {
    pickerList.value = res?.data
    console.log(res)
  })
}

onMounted(() => {
  getPickerList()
})
</script>

<style lang="scss" scoped>
.picker_select_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
  .title {
    color: #333;
    font-size: 30rpx;
    text {
      color: #f00;
    }
  }
  .right_value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 15rpx 0 15rpx 10rpx;
    font-size: 28rpx;
    .placeholder_style {
      color: #ccc;
    }
  }
}
</style>
