<template>
    <view class="container">
        <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
            <view class="searchBox_add" @click="addCommunity">
                <image class="top-image"
                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrder_community_2.svg">
                </image>
                <view class="emptyCommunity">
                    {{ communityVal }}
                </view>
            </view>
        </view>
        <!-- 背景图片区域 -->
        <!-- <view class="bg-image-container">
            <image class="bg-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrderDashboardImg.png" mode=""></image>
        </view> -->
        <view class="walletBox">
            <view class="walletBox_top">钱包</view>
            <view class="walletBox_content">
                <view class="walletBox_item"
                    @click="goWallet(1, walletInfo.receivable ? walletInfo.receivable.toFixed(2) : '0.00')">
                    <view>{{ walletInfo.receivable ? walletInfo.receivable.toFixed(2) : "0.00" }}元</view>
                    <view class="walletBox_item_text">应收</view>
                </view>
                <view class="walletBox_item"
                    @click="goWallet(2, walletInfo.received ? walletInfo.received.toFixed(2) : '0.00')">
                    <view>{{ walletInfo.received ? walletInfo.received.toFixed(2) : "0.00" }}元</view>
                    <view class="walletBox_item_text">已收</view>
                </view>
                <view class="walletBox_item"
                    @click="goWallet(3, walletInfo.pending ? walletInfo.pending.toFixed(2) : '0.00')">
                    <view>{{ walletInfo.pending ? walletInfo.pending.toFixed(2) : "0.00" }}元</view>
                    <view class="walletBox_item_text">待收物业费</view>
                </view>
                <!-- <view class="walletBox_item" @click="goWallet(4, walletInfo.handling_fee.toFixed(2))">
                    <view>{{ walletInfo.handling_fee ? walletInfo.handling_fee.toFixed(2) : "0.00" }}元</view>
                    <view class="walletBox_item_text">手续费</view>
                </view> -->
            </view>
        </view>
        <view class="work-order-section">
            <view v-for="(item, index) in 9" :key="index">
                <view class="work-order-card" v-if="index == 1 && showWorkOrderSection"
                    @click="navigateToWorkOrderDashboard">
                    <image class="work-order-icon"
                        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrder_2.svg" mode="aspectFill" />
                    <text class="work-order-text">工单台</text>
                </view>
                <view class="work-order-card" v-if="index == 0" @click="navigateToRoutingInspection">
                    <image class="work-order-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/polling_2.svg"
                        mode="aspectFill" />
                    <text class="work-order-text">巡更巡检</text>
                </view>
                <view class="work-order-card" v-else></view>
            </view>
        </view>
    </view>
</template>

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

import { apiArr } from "../../../api/community";
import { apiArr as walletApi } from '../../../api/wallet';

export default {
    data() {
        return {
            communityVal: "切换小区",
            showWorkOrderSection: false,
            communityList: [],
            walletInfo: {},
        }
    },
    async onLoad() {
    },
    async onShow() {
        const changeCommData = uni.getStorageSync('changeWorkOrderData');
        this.communityVal = changeCommData ? changeCommData.name : "切换小区";

        if (changeCommData) {
            const params = {
                community_id: changeCommData.id,
            }
            const res = await request(apiArr.communityInfo, "POST", params);
            uni.setStorageSync('allow_grab_order', res.allow_grab_order == 1 ? true : false);
        }
        const workOrderPermission = uni.getStorageSync('work_order_permission');
        const orderDispatchPermission = uni.getStorageSync('order_dispatch_permission');
        this.showWorkOrderSection = !(workOrderPermission === false && orderDispatchPermission === false);

        // 获取小区列表并设置默认选中第一个
        await request(apiArr.workCommunityList, "POST", {
            user_id: uni.getStorageSync('userId'),
        }).then(res => {
            res.rows.forEach(item => {
                item.pic = item.pic.startsWith('http') ? item.pic : picUrl + item.pic
            });
            this.communityList = res.rows;

            const changeCommData = uni.getStorageSync('changeWorkOrderData');
            // 检查本地存储的小区是否存在于返回的列表中
            if (changeCommData) {
                const exists = res.rows.some(item => item.community_id === changeCommData.id);
                // 如果不存在，则清除数据并设置为第一个
                if (!exists && res.rows.length > 0) {
                    uni.setStorageSync('changeWorkOrderData', { id: res.rows[0].community_id, name: res.rows[0].name });
                    this.communityVal = res.rows[0].name;
                } else if (!exists) {
                    // 如果列表为空，则清除数据
                    uni.removeStorageSync('changeWorkOrderData');
                    this.communityVal = "切换小区";
                }
            } else if (res.rows.length > 0) {
                // 如果没有选中的小区且有小区列表，则默认选中第一个
                uni.setStorageSync('changeWorkOrderData', { id: res.rows[0].community_id, name: res.rows[0].name });
                this.communityVal = res.rows[0].name;
            }
            // 获取钱包信息
            this.getWalletInfo();
        });
    },
    methods: {
        // 获取钱包信息
        getWalletInfo() {
            const changeCommData = uni.getStorageSync('changeWorkOrderData');
            if (!changeCommData) {
                return;
            }
            const params = {
                community_id: changeCommData.id,
            }
            request(walletApi.walletList, 'POST', params, { silent: false }).then(res => {
                this.walletInfo = res;
            })
        },
        goWallet(type, amount) {
            const changeCommData = uni.getStorageSync('changeWorkOrderData');
            if (!changeCommData) {
                uni.showToast({
                    title: '请先选择小区',
                    icon: 'none'
                });
                return;
            }
            // if (type == 2) {
            //     return
            // }
            NavgateTo('/packages/workOrderDashboard/wallet/index?type=' + type + '&community_id=' + changeCommData.id + '&amount=' + amount);
        },
        addCommunity() {
            NavgateTo("/packages/workOrderDashboard/myCommunity/index");
        },

        // 跳转到工单台
        navigateToWorkOrderDashboard() {
            const changeCommData = uni.getStorageSync('changeWorkOrderData');
            if (!changeCommData) {
                uni.showToast({
                    title: '请先选择小区',
                    icon: 'none'
                });
                return;
            }

            uni.navigateTo({
                url: '/packages/workOrderDashboard/index/index?communityId=' + changeCommData.id
            });
        },

        // 跳转到巡更巡检
        navigateToRoutingInspection() {
            const changeCommData = uni.getStorageSync('changeWorkOrderData');
            if (!changeCommData) {
                uni.showToast({
                    title: '请先选择小区',
                    icon: 'none'
                });
                return;
            }

            uni.navigateTo({
                url: '/packages/workOrderDashboard/routingInspection/index?communityId=' + changeCommData.id
            });
        }
    }
}
</script>

<style scoped>
/* 引入外部CSS文件 */
@import url("./index.css");
</style>