<template>
  <view class="monthly_bill_content">
    <view class="monthly_bill_header">
      <view class="header_left_content" @click="handleCollapseAllCheckedBtn">
        <uni-icons
          v-if="props?.item?.checked"
          type="checkbox-filled"
          size="20"
          color="#2A7EFB"
        ></uni-icons>
        <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
        <text> {{ props?.item?.display_text }} </text>
      </view>
      <view class="header_right_content" @click="billsShow = !billsShow">
        <text> ¥{{ props?.item?.pending_amount }} </text>
        <uni-icons type="down" size="15" color="#666"></uni-icons>
      </view>
    </view>
    <view class="items_body" v-if="billsShow">
      <view v-for="(i, index) in props?.item?.bills" :key="`fid_items_${index}`" class="items_cell">
        <view class="items_cell_left" @click="handleCalculatePrice(i, index)">
          <uni-icons v-if="i?.checked" type="checkbox-filled" size="20" color="#2A7EFB"></uni-icons>
          <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
          <hs-enum-tag :value="i?.type" :Enums="HouseBillsTypeEnum" />
        </view>
        <view> ¥{{ i?.total_payable_amount }} </view>
      </view>

      <!-- <view class="bill_to_detail">
        <view class="btn" @click="toDetail">
          查看账单详情
          <uni-icons type="right" size="13" color="#999"></uni-icons>
        </view>
      </view> -->
    </view>
  </view>
</template>
<script setup lang="ts">
import { HouseBillsTypeEnum } from '@/gen/Enums'
import { ref } from 'vue'
import useModel from '../model'
import method from '../method'
const props = defineProps(['item', 'index'])
const billsShow = ref(false)

const handleCollapseAllCheckedBtn = () => {
  let checked = props?.item?.checked
  useModel.houseBillsData.value[props?.index].checked = !checked
  useModel?.houseBillsData?.value[props?.index]?.bills?.map((i: any) => {
    i.checked = !checked
  })
  method?.setCalculateTotalPrice()
}

const handleCalculatePrice = (res: any, index: number) => {
  let checked = res?.checked
  useModel.houseBillsData.value[props?.index].bills[index].checked = !checked
  if (checked) {
    useModel.houseBillsData.value[props?.index].checked = false
  } else {
    let allChecked = useModel.houseBillsData.value[props?.index].bills?.every(
      (item: { checked: boolean }) => item?.checked
    )
    useModel.houseBillsData.value[props?.index].checked = allChecked
    console.log(allChecked)
  }
  method?.setCalculateTotalPrice()
}

const toDetail = () => {
  uni.navigateTo({
    url: '/BILL/bill_details/index'
  })
}
</script>
<style lang="scss" scoped>
.monthly_bill_content {
  background-color: #f7f8fc;
  padding: 30rpx 20rpx;
  margin: 30rpx 30rpx 0 30rpx;
  border-radius: 10rpx;
  position: relative;
  .monthly_bill_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header_left_content {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333;
  }
  .header_right_content {
    color: #df3600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    text {
      padding-right: 5rpx;
    }
  }
  .items_body {
    background-color: #fff;
    padding: 30rpx 30rpx 0 30rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    .items_cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 30rpx;
      font-size: 28rpx;
      color: #333;
      .items_cell_left {
        display: flex;
        align-items: center;
      }
    }
  }
}
.bill_to_detail {
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23rpx;
  text-align: center;
  padding-bottom: 30rpx;
  .btn {
    border: 1rpx solid #666;
    border-radius: 100rpx;
    padding: 10rpx 10rpx 10rpx 20rpx;
    display: flex;
    align-items: center;
  }
}
</style>
