<template>
  <veiw>
    <view
      class="picker_select_btn"
      :style="{
        borderTop: props.borderTop ? borderStyle : '',
        padding: props?.padding || paddingStyle
      }"
      @click="show = true"
    >
      <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>
    <up-cascader
      v-model:show="show"
      v-model="selectValueModel"
      mode="mutil-column-auto"
      :data="pickerList"
      label-key="name"
      value-key="id"
      children-key="children"
      @confirm="onConfirm"
    ></up-cascader>
  </veiw>
</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 show = ref(false)
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 selectValueModel = ref([])
const emit = defineEmits(['change', 'update:valueModel'])
const onConfirm = (e: any) => {
  pickerList.value?.map((res: any) => {
    if (res?.id === e?.[0]) {
      selectValue.value = res?.name
      res?.children?.map((child: any) => {
        if (child?.id === e?.[1]) {
          selectValue.value += `/${child?.name}`
        }
      })
    }
  })
  emit('update:valueModel', e)
  emit('change', e)
}

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

const getPickerList = () => {
  getApiLoading(Apis.Emergency.EmergencyEventCategories.SelectTree, {}).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>
