<template>
  <view class="card flex flex-col justify-center items-center my-20">
    <view class="flex justify-between items-center mb-15 w-100p">
      <view class="flex justify-start items-center">
        <text class="text-25 font-bold">{{ item.month }}</text>
      </view>
      <view class="flex justify-end items-center">
        <text class="text-orange text-28 font-bold mr-10">￥{{ item.totalAmount }}</text>
      </view>
    </view>
    <view class="p-20 bg-gray-light rounded w-85p p-15 flex flex-col justify-center items-center"
          v-if="item.show">
      <view class="flex flex-col justify-center items-center w-100p mb-20" v-for="(bill, billIndex) in item.bills"
            :key="billIndex">
        <view class="flex justify-between items-center w-100p mb-15 text-25">
          <text class="font-bold">{{ bill.feeItemName }}</text>
          <text class="font-bold text-orange">￥{{ bill.billAmount }}</text>
        </view>
        <view class="flex justify-between items-center w-100p mb-15 text-25 text-gray">
          <text>{{ bill.feeStandardExplain }}</text>
        </view>
        <view class="flex justify-between items-center w-100p mb-15 text-25 text-gray">
          <text>{{ bill.billName }}</text>
        </view>
        <view class="flex justify-between items-center w-100p mb-15 text-25 ">
          <text class="text-gray">缴费数量({{ bill.amount }})*单价({{ bill.feeStandardValue }})</text>
          <text>￥{{ bill.billAmount }}</text>
        </view>
        <template v-if="bill.feeStandardExplain.includes('电费') || bill.feeStandardExplain.includes('水费')">
          <view class="flex justify-between items-center w-100p mb-15 text-25 text-gray">
            <text class="text-gray">上期抄表数:</text>
            <text>{{ bill.lastMeterNum }}</text>
          </view>
          <view class="flex justify-between items-center w-100p mb-15 text-25 text-gray">
            <text class="text-gray">本期抄表数:</text>
            <text>{{ bill.nowMeterNum }}</text>
          </view>
        </template>
        <view class="flex justify-between items-center w-100p mb-15 text-25 text-green" v-if="!!bill.payItem">
          <text>支付时间:</text>
          <text>{{ dayjs(bill.payItem.payTime).format('YYYY-MM-DD HH:mm:ss') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "BillItem",
  props: {
    item: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {}
  },
  methods: {}
}
</script>