<template>
  <picker :range="pickerList" :range-key="props?.key || 'name'" :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 { Apis } from '@/gen/Apis'
import { onMounted, ref } from 'vue'
const props = defineProps([
  'title',
  'required',
  'borderTop',
  'isLink',
  'tip',
  'value',
  'url',
  'isPlaceholder',
  'padding',
  'des',
  'rightStyle',
  'titleStyle',
  'disabled',
  'key',
  'placeholder',
  'params'
])
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?.name
  emit('update:valueModel', selectData?.id || '')
  emit('change', selectData)
}

const getPickerList = () => {
  getApiLoading(Apis.Company.CompanyProjectReceiptAccounts.List, props?.params || {}).then(res => {
    res?.data?.map((i: any) => {
      i.name = `${i?.receipt_account?.company_name}/${i?.receipt_account?.company_bank}/${i?.receipt_account?.company_account ? i?.receipt_account?.company_account?.slice(-4) : ''}`
    })
    pickerList.value = res?.data
    console.log(res)
  })
}

const get_default_receipt_accounts = () => {
  getApiLoading(
    Apis.Company.CompanyProjectReceiptAccounts.GetDefaultReceiptAccounts,
    props?.params || {}
  ).then(res => {
    if (res?.data?.length) {
      let json = res?.data[0]
      selectValue.value = `${json?.receipt_account?.company_name}/${json?.receipt_account?.company_bank}/${json?.receipt_account?.company_account ? json?.receipt_account?.company_account?.slice(-4) : ''}`
      emit('update:valueModel', json?.id || '')
      emit('change', json)
    }
    console.log(res)
  })
}

onMounted(() => {
  getPickerList()
  // get_default_receipt_accounts()
})
</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>
