<template>
  <view>
    <hs-popup :show="show" mode="center" :round="15" :closeable="true" @close="handleSubmitClick">
      <view class="popup_content">
        <view class="popup_title"> 确认提交 </view>
        <view class="popup_subtitle"> 发送摘要 </view>
        <view class="popup_card">
          <view class="popup_card_cell">
            发送房屋数量
            <text> {{ props?.formData?.houses?.length }}户 </text>
          </view>
        </view>
        <!-- <view class="popup_subtitle"> 短信内容预览 </view>
        <view class="popup_card popup_card_primary">
          【XX物业】尊敬的住户：您有待缴物业账单，请点击xxxxxxxx及时缴纳。如已缴费请忽略。
        </view> -->
        <view class="popup_subtitle"> 公众号/小程序通知内容预览 </view>
        <view class="popup_card popup_card_primary">
          【XX物业】您名下房产存在待缴账单，可点击详情缴纳。如已缴费请忽略。
        </view>
        <view class="popup_subtitle"> 企微批量发送内容预览 </view>
        <view class="enterprise_wechat_content enterprise_wechat_content_popup">
          <view class="enterprise_wechat">
            <view class="cover_img">
              <image
                class=""
                src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K5B5RY2TQQAJ1GT2RZSK426V.jpg"
                mode="heightFix"
                lazy-load="false"
              />
            </view>
            <view class="label"> 您的物业费账单已生成，请点击此处进行缴费！ </view>
          </view>
        </view>

        <view class="popup_footer_value">
          <hs-button
            label="确认提交"
            size="md"
            type="primary"
            @click="handleSubmitHouseCollectionTasks"
          />
        </view>
      </view>
    </hs-popup>
    <hs-footer btnParimaryName="提交" @handleParmaryClick="handleSubmitClick" />

    <hs-popup :show="show_submit" mode="center" :round="15">
      <view class="popup_content">
        <view class="popup_title"> 提交成功 </view>
        <view class="popup_icon">
          <image
            src="https://jyw-dev-1322946948.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K2KMD0BCXFS2BW4STQAYRZC4.png"
            mode="heightFix"
          />
        </view>
        <view class="popup_submit_name"> 提交成功，任务正在处理中！ </view>
        <view class="popup_submit_path"> 您可随时前往【首页 > 催缴记录】查看任务。 </view>
        <view class="popup_footer">
          <view class="btn">
            <hs-button label="返回欠费列表" size="md" type="default" @click="handleBack" />
          </view>
          <view class="btn">
            <hs-button label="查看任务详情" size="md" @click="handleQuery" />
          </view>
        </view>
      </view>
    </hs-popup>
  </view>
</template>
<script setup lang="ts">
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import { ref } from 'vue'
const props = defineProps(['formData', 'type'])
const show = ref(false)
const show_submit = ref(false)
const handleSubmitClick = () => {
  console.log(props?.type, 'type')
  if (!props?.type?.length) {
    uni.showToast({
      title: '请选择通知方式!',
      icon: 'none'
    })
    return
  }
  show.value = !show.value
}

const handleBack = () => {
  uni.navigateBack({ delta: 1 })
}

const handleSubmitHouseCollectionTasks = () => {
  getApiLoading(Apis.Collection.HouseCollectionTasks.Store, {
    ...props.formData,
    channel: props.type
  }).then(res => {
    show.value = false
    show_submit.value = true
  })
}

const handleQuery = () => {
  uni.redirectTo({
    url: '/BILL/collection_record/index/index'
  })
}
</script>
<style lang="scss" scoped>
.popup_content {
  background-color: #fff;
  width: 94vw;
  border-radius: 15px;
  overflow: hidden;
  padding-bottom: 30rpx;
  .popup_title {
    padding: 30rpx 0;
    text-align: center;
    font-size: 38rpx;
  }
  .popup_subtitle {
    color: #333;
    padding: 40rpx 30rpx 20rpx 30rpx;
    font-size: 30rpx;
    font-weight: 550;
  }
  .popup_card {
    background-color: #f9fafb;
    padding: 30rpx 30rpx 10rpx 30rpx;
    margin: 0 30rpx;
    border-radius: 10rpx;
    .popup_card_cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;
      color: #333;
      font-size: 30rpx;
    }
  }
  .popup_card_primary {
    color: #333;
    font-size: 28rpx;
    padding-bottom: 30rpx;
  }
  .popup_icon {
    width: 100%;
    text-align: center;
    padding: 30rpx 0;
    image {
      width: 284rpx;
      height: 200rpx;
    }
  }
  .popup_submit_name {
    text-align: center;
    color: #3d3d3d;
    font-size: 32rpx;
  }
  .popup_submit_path {
    text-align: center;
    color: #666;
    font-size: 28rpx;
    padding: 10rpx 0 30rpx 0;
  }
}
.popup_footer_value {
  padding: 40rpx 30rpx 10rpx 30rpx;
}
.popup_footer {
  padding: 30rpx 30rpx 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx 20rpx 30rpx;
  .btn {
    width: 48%;
  }
}

.enterprise_wechat_content_popup {
  margin: 0 30rpx;
}
</style>
