<template>
  <view v-if="useModel.tabsCurrent.value < 1" class="footer_view">
    <template v-if="useModel.tabsCurrent.value === 0">
      <template v-if="useModel?.houseBillsData?.value?.length">
        <view class="select_fee">
          <view class="label"> 您已选待缴金额： </view>
          <view class="fee"> ¥{{ useModel?.total_amount?.value || '0.00' }} </view>
        </view>
        <view class="btn_group">
          <view class="btn_group_left">
            <hs-button label="二维码收款" size="md" type="ghost" @click="method?.handleQRCode" />
          </view>
          <view class="btn_group_right">
            <hs-button type="primary" size="md" label="分享账单" @click="method?.handleSelectExternalContact" />
          </view>
        </view>
      </template>
      <!-- <template v-else>
        <view class="btn_group">
          <view class="btn_group_left">
            <hs-button label="分享托收" size="md" type="ghost" />
          </view>
          <view class="btn_group_right">
            <hs-button type="primary" size="md" label="分享预缴" />
          </view>
        </view>
      </template> -->
    </template>
  </view>
</template>
<script setup lang="ts">
import method from '../method';
import useModel from '../model';
</script>
<style lang="scss" scoped>
.footer_view {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 100;
  padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(15rpx + env(safe-area-inset-bottom));

  .select_fee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #edf6ff;
    padding: 25rpx 30rpx;
    font-size: 28rpx;

    .label {
      color: #555;
    }

    .fee {
      color: #df3600;
      font-size: 33rpx;
      font-weight: 550;
    }
  }

  .btn_group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx 0 30rpx;

    &_left,
    &_right {
      width: 48%;
    }
  }

  .new_add_collection_fee {
    padding: 20rpx 30rpx 0 30rpx;
  }
}
</style>
