<template>
  <view class="outstanding_fee_add">
    <view class="page_title"> 催缴方式 <text> * </text> </view>
    <MyCollectionMethods v-model:valueModel="useModel.formData.value.channel" />
    <view class="page_title"> 催缴时间 <text> * </text> </view>
    <picker @change="handleChange" mode="date">
      <view class="select_day">
        <view class="select_day_content">
          <up-icon name="calendar" color="#C4C4C4" size="26"></up-icon>
          <text v-if="useModel.formData.value.notified_time">
            {{ useModel.formData.value.notified_time || '请选择通知时间' }}
          </text>
          <text v-else class="placeholder"> 请选择通知时间 </text>
        </view>
        <uni-icons type="right" size="15" color="#333"></uni-icons>
      </view>
    </picker>
    <view class="page_title"> 催缴结果 <text> * </text> </view>
    <MyCollectionResult v-model:valueModel="useModel.formData.value.collection_result" />
    <view class="page_title"> 催缴内容 </view>
    <view class="add_textarea">
      <textarea
        placeholder="请详细描述催缴过程和沟通内容"
        v-model="useModel.formData.value.collection_content"
      ></textarea>
    </view>

    <hs-footer btnParimaryName="提交" @handleParmaryClick="handleSubmit" />
  </view>
</template>
<script setup lang="ts">
import { showToastBack } from '@/common/libraries/naviHelper'
import { onLoad } from '@dcloudio/uni-app'
import MyCollectionMethods from '../components/CollectionMethods.vue'
import MyCollectionResult from '../components/CollectionResult.vue'
import useModel from './model'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'

const onShowToast = (label: string) => {
  uni.showToast({
    title: label || '',
    icon: 'none'
  })
  return
}

const handleChange = (e: any) => {
  useModel.formData.value.notified_time = e?.detail?.value
  console.log(e)
}

const handleSubmit = () => {
  let data = useModel.formData.value
  if (!data?.channel) {
    return onShowToast('请选择催缴方式！')
  }
  if (!data?.notified_time) {
    return onShowToast('请选择催缴时间！')
  }
  if (!data?.collection_result) {
    return onShowToast('请选择催缴结果！')
  }
  getApiLoading(Apis.Collection.HouseCollectionRecords.Store, useModel.formData.value).then(res => {
    showToastBack('提交成功', 1, true)
  })
  console.log(data)
}

onLoad(e => {
  useModel.formData.value = { total_unpaid_amount: e?.amount, asset_houses_id: e?.id }
})
</script>
<style lang="scss">
@import './style.scss';
</style>
