<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.png" mode="aspectFill"></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="work-order-section">
            <view v-for="(item, index) in 9" :key="index">
                <view class="work-order-card" v-if="index == 0 && showWorkOrderSection"
                    @click="navigateToWorkOrderDashboard">
                    <image class="work-order-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/workOrder.png" 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";

export default {
    data() {
        return {
            communityVal: "切换小区",
            showWorkOrderSection: false,
            communityList: []
        }
    },
    async onLoad() {
        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;
            
            // 如果没有选中的小区且有小区列表，则默认选中第一个
            if (!uni.getStorageSync('changeWorkOrderData') && res.rows.length > 0) {
                uni.setStorageSync('changeWorkOrderData', { id: res.rows[0].community_id, name: res.rows[0].name });
                this.communityVal = res.rows[0].name;
            }
        });
    },
    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);
        }
    },
    methods: {
        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
            });
        }
    }
}
</script>

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