<template>
  <view class="container">
    <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
      <view class="searchBox_add">
        <u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
      </view>
    </view>

    <view class="community">
      <view class="community_left">
        <image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"
          alt="" />
      </view>
      <view class="community_right" @click="changeShow">
        <view class="community_right_text">
          <view class="community_right_text1">{{ currentRoom.name }}</view>
          <view class="community_right_text2">{{ currentCommunityAddr }}</view>
        </view>
        <view class="community_right_more">
          <u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
        </view>
      </view>
    </view>

    <view class="tabList">
      <view class="tabItem" :class="active == 0 ? 'active' : ''" @click="changeTab(0)">
        账单
      </view>
      <view class="line"></view>
      <view class="tabItem" :class="active == 1 ? 'active' : ''" @click="changeTab(1)">
        缴费记录
      </view>
    </view>

    <view class="homeMoney" v-if="active == 0">
      <view class="homeMoney_box">
        <view class="homeMoney_box_left">
          <view class="homeMoney_box_left1">物业公积金</view>
          <view class="homeMoney_box_left2">可抵扣账户金额</view>
        </view>
        <view class="homeMoney_box_right">
          <view class="homeMoney_box_right1">
            <span>￥</span>{{ balanceMoney }}
          </view>
          <view class="homeMoney_box_right2" @click="more(currentRoom)">
            查看详情
            <view style="margin-left: 12rpx">
              <u-icon bold color="#894B11" size="30" name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="payList" v-if="active == 0">
      <view class="payItem" v-for="(item, index) in Bill" :key="index">
        <view class="payItem_tit">
          <view class="payItem_left">
            <checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
            <view style="margin-left: 24rpx">{{ item.order_date }}年</view>
          </view>
          <view class="payItem_right">
            <span>￥</span>
            <view class="payItem_money">{{ item.unpaid_amount }}</view>
            <p>未缴</p>

            <view style="margin-left: 40rpx" @click="changeCheck(item, index)">
              <u-icon bold color="#894B11" size="30" name="arrow-down" v-if="!item.more"></u-icon>
              <u-icon bold color="#894B11" size="30" name="arrow-up" v-if="item.more"></u-icon>
            </view>
          </view>
        </view>
        <view v-if="item.more">
          <view class="payItem_List" v-for="(items, indes) in item.community_order_rows" :key="items.order_id">
            <checkbox :checked="items.check" @click="itemsCheckChange(items, indes, index)"></checkbox>
            <view class="Item_time" v-if="items.billing_cycle == 1">
              {{ items.order_date }}年
            </view>
            <view class="Item_time" v-if="items.billing_cycle == 2">
              {{ items.order_datetime }}月
            </view>
            <view class="Item_type">
              {{ items.community_fee_type ? items.community_fee_type.type_name : '' }}
            </view>
            <view class="Item_money">￥{{ items.money }}</view>
            <view class="Item_status" v-if="items.status == 0">未付款</view>
            <view class="Item_status sucess" v-if="items.status == 1">
              已付款
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 选择支付类型 -->
    <view class="payTypeList" v-if="active == 0">
      <view class="PayTypeItem">
        <view class="PayTypeItem_left">
          <view class="PayTypeItem_img">
            <image mode="aspectFill"
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
          </view>
          <view class="PayTypeItem_con">
            <view class="PayTypeItem_con_tit">微信支付</view>
            <view class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</view>
          </view>
        </view>

        <view class="PayTypeItem_right">
          <radio :checked="payType == 1" @click="changePayType(1)"></radio>
        </view>
      </view>
      <view class="line3"></view>
      <view class="PayTypeItem">
        <view class="PayTypeItem_left">
          <view class="PayTypeItem_img">
            <image mode="aspectFill"
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
          </view>
          <view class="PayTypeItem_con">
            <view class="PayTypeItem_con_tit">物业公积金支付</view>
            <view class="PayTypeItem_con_msg">
              可用公积金：<span>￥</span>{{ balanceMoney }}
              <view class="PayTypeItem_con_msg2" @click="changeShow2">
                可组合支付
              </view>
            </view>
          </view>
        </view>

        <view class="PayTypeItem_right">
          <radio :checked="payType == 2" @click="changePayType(2)"></radio>
        </view>
      </view>
    </view>

    <view class="bottom" v-if="active == 0">
      <view class="bottom_left">
        <span>合计</span>
        <p>￥</p>
        {{ currentMoney }}
      </view>
      <view class="bottom_right" @click="createPay">立即支付</view>
    </view>

    <view class="payHisList" v-if="active == 1">
      <view class="payHisItem" v-for="item in payOrderList" :key="item.id">
        <view class="row">
          <view class="row_label">缴费金额</view>
          <view class="row_con1">￥{{ item.money }}</view>
        </view>
        <view class="row">
          <view class="row_label2"></view>
          <view class="row_con2">{{ item.pay_time }}支付</view>
        </view>
        <view class="line4"></view>
        <view class="row">
          <view class="row_label">绑定房源</view>
          <view class="row_con3">
            <view class="row_con3_1">
              {{ item.community_order.length }}个账单
            </view>
            <view class="row_con3_2">明细可从收据查看</view>
          </view>
        </view>

        <view class="row">
          <view class="row_label">应缴费金额</view>
          <view class="row_con4">￥{{ item.money }}</view>
        </view>

        <view class="row">
          <view class="row_label">物业费公积金抵扣金额</view>
          <view class="row_con4">-￥{{ item.reduction_money }}</view>
        </view>

        <view class="row">
          <view class="row_label">缴费单号</view>
          <view class="row_con4">{{ item.order_pay_no }}</view>
        </view>
        <view class="line4"></view>
        <view class="Receipt">收据</view>
      </view>
    </view>

    <view class="boxshadow" v-if="show" @click="changeShow">
      <view class="boxshadowCon">
        <view class="boxshadowCon_Tit">
          选择房源
          <view class="cancel" @click.stop="show = false">取消</view>
        </view>
        <view class="lines"></view>
        <view class="communityList" v-if="roomList.length > 0">
          <view class="communityItem" v-for="item in roomList" :key="item.room_id" @click="selectRoom(item)">
            <view class="communityItem_text">
              {{ item.facility_name }}{{ item.floor }} {{ item.number }}
            </view>
            <view class="communityItem_radio">
              <radio :checked="selectedRoomId === item.room_id"></radio>
            </view>
          </view>
        </view>
        <view class="communityList" v-else>
          <view class="communityItem">
            <view class="communityItem_text">暂无房源</view>
          </view>
        </view>
      </view>
    </view>

    <view class="boxshadow" v-if="show2" @click="changeShow2">
      <view class="boxshadowCon">
        <view class="boxshadowCon_Tit">
          付款总金额
          <view class="cancel" @click.stop="show2 = false">取消</view>
        </view>
        <view class="boxshadowCon_subTit">
          <p>￥</p>
          {{ currentMoney }}
        </view>
        <view class="lines"></view>

        <view class="BanlenceList">
          <view class="banlenceItem">
            <view class="banlenceItem_left">
              <image mode="aspectFill"
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
              微信支付
            </view>
            <view class="banlenceItem_right">
              <span>￥</span>{{ (currentMoney - balanceMoney).toFixed(2) }}
            </view>
          </view>
          <view class="line3"></view>
          <view class="banlenceItem">
            <view class="banlenceItem_left">
              <image mode="aspectFill"
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
              物业公积金支付
            </view>
            <view class="banlenceItem_right">
              <span>￥</span>{{ balanceMoney }}
            </view>
          </view>
        </view>

        <view class="btn" @click="createPay">
          物业公积金+微信支付 <span>￥</span>{{ currentMoney }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  uniqueByField,
  menuButtonInfo,
  formatDate,
  NavgateTo,
} from "../../../utils";
import { apiArr } from "../../../api/community";

export default {
  data() {
    return {
      top: "",
      localHeight: "",
      active: 0,
      show: false,
      show2: false,
      roomList: [],
      currentRoom: {},
      selectedRoomId: "", // 选中的房源ID
      currentCommunity: "", //当前房源
      currentCommunityAddr: "", //当前房源地址
      Bill: "", //账单
      balanceMoney: 0, //公积金

      currentMoney: 0, //所选金额

      payType: "1",
      payInfoId: "", //支付信息id
      page_size: 10,
      page_num: 1,
      payOrderList: [],
      flag: false,
    };
  },
  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    // this.top = meun.height + meun.top;
    this.localHeight = meun.height;
    this.currentCommunity = uni.getStorageSync("changeCommData");
    this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr");
    this.getRoomSelect();
    this.getUserGovenmentMoney();
  },

  methods: {
    changeTab(index) {
      this.active = index;
      if (index == 1) {
        this.page_num = 1;
        this.getPayList();
      }
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    changeShow() {
      this.show = !this.show;
    },
    changeShow2() {
      if (this.currentMoney == 0) {
        uni.showToast({
          title: "请选择账单",
          icon: "none",
        });
        return;
      }
      this.show2 = !this.show2;
    },
    //获取房源
    getRoomSelect() {
      request(apiArr.getCommunityRoomList, "POST", {
        community_id: this.currentCommunity.id,
        page_num: 1,
        page_size: 50,
      }).then((res) => {
        this.roomList = res.rows;
        this.currentRoom = this.roomList[0];
        this.selectedRoomId = this.currentRoom.room_id;
        this.getOrderList();
      });
    },

    // 选择房源
    selectRoom(item) {
      // 更新选中的房源ID
      this.selectedRoomId = item.room_id;
      // 在控制台输出选中的数据
      console.log("选中的房源数据:", item);

      this.currentRoom = item;
      this.getOrderList();
    },

    //获取用户公积金
    async getUserGovenmentMoney() {
      request(apiArr.getUserGovenmentMoney, "POST", {}).then((res) => {
        console.log(res, "公积金");
        this.balanceMoney = res.balance_after;
      });
    },

    //获取账单
    async getOrderList() {
      await request(apiArr.getOrderList, "POST", {
        room_id: this.currentRoom.room_id,
        page_num: 1,
        page_size: 50,
      }).then((res) => {
        console.log(res, "账单");
        res.rows.forEach((item) => {
          item.check = false;
          item.more = false;
          item.community_order_rows.forEach((ite) => {
            ite.check = false;
          });
        });
        this.Bill = res.rows;
      });
    },
    //账单详情切换展示显示
    changeCheck(e, index) {
      this.Bill[index].more = !this.Bill[index].more;
    },
    //整体选择
    checkChange(e, index) {
      this.Bill[index].check = !this.Bill[index].check;
      this.Bill[index].community_order_rows.forEach((item) => {
        if (this.Bill[index].check) {
          item.check = true;
        } else {
          item.check = false;
        }
      });

      // 重新计算选中金额
      let money = 0;
      this.Bill.forEach((item) => {
        item.community_order_rows.forEach((ite) => {
          if (ite.check) {
            money += ite.money;
          }
        });
      });
      this.currentMoney = money;
    },
    //具体选择
    itemsCheckChange(e, indes, index) {
      this.Bill[index].community_order_rows[indes].check =
        !this.Bill[index].community_order_rows[indes].check;
      //判断是否全部选中
      let isAll = this.Bill[index].community_order_rows.every((item) => {
        return item.check;
      });
      if (isAll) {
        this.Bill[index].check = true;
      } else {
        this.Bill[index].check = false;
      }
      //帮我计算所有Bill的的community_order_rows 所选中的金额  现在取消选择金额没有减
      let money = 0;
      this.Bill.forEach((item) => {
        item.community_order_rows.forEach((ite) => {
          if (ite.check) {
            money += ite.money;
          }
        });
      });
      this.currentMoney = money;
    },
    //切换支付方式
    changePayType(e) {
      this.payType = e;
    },
    //创建支付订单
    async createPay() {
      let order_ids = [];
      this.Bill.forEach((item) => {
        item.community_order_rows.forEach((items) => {
          if (items.check) {
            order_ids.push(items.order_id);
          }
        });
      });
      let name_mini = "";
      if (this.payType == 1) {
        name_mini = "微信";
      } else if (this.payType == 2) {
        name_mini = "物业公积金";
      } else {
        name_mimi = "微信 + 物业公积金";
      }
      if (!this.currentMoney) {
        return uni.showToast({
          title: "请选择账单",
          duration: 2000,
        });
      }
      await request(apiArr.createPayOrder, "POST", {
        order_ids: order_ids,
        community_id: this.currentCommunity.id,
        room_id: this.currentRoom.room_id,
        pay_user_id: uni.getStorageSync("userId"),
        user_name: uni.getStorageSync("nickName"),
        pay_user_name: uni.getStorageSync("nickName"),
        //格式化年月日 时分秒
        pay_time: formatDate(new Date()),
        money: this.currentMoney,
        name_mini,
      }).then((res) => {
        console.log(res);
        this.payInfoId = res.id;
        this.OrderPay();
      });
    },
    //根据支付订单查询交易信息
    async getPayInfo() {
      await request(apiArr.getPayOrderInfo, "POST", { order_pay_id: 6 }).then(
        (res) => {
          this.OrderPay();
        }
      );
    },
    //预下单
    async OrderPay() {
      // this.payInfoId
      await request(apiArr.OrderPay, "POST", { order_pay_id: this.payInfoId }).then(
        async (res) => {
          const params = {
            order_pay_id: this.payInfoId,
          }
          await request(apiArr.OrderPay, "POST", params).then(
            (res) => {
            }
          );
        }
      );
    },

    //支付记录
    getPayList() {

      request(apiArr.getPayOrderList, "POST", {
        room_id: this.currentRoom.room_id,
        page_num: this.page_num,
        page_size: this.page_size,
      }).then((res) => {
        console.log(res);
        let flag = false;
        if (res.rows && res.rows.length == this.page_size) {
          flag = true;
        } else {
          flag = false;
        }
        this.flag = flag;
        this.payOrderList = res.rows;
      });
    },

    //物业公积金详情
    more(item) {
      NavgateTo(`../providentFund/index?item=${JSON.stringify(item)}`);
    },
  },
};
</script>

<style>
@import url("./index.css");
</style>