<template>
    <view>
        <!-- pages/resiAndHouse/resiAndHouse.wxml -->
        <view class="group_1">
            <view class="block_1">
                <view class="navigation" :style="'height: ' + navigationHeight + 'px; top: ' + statusHeight + 'px;'">
                    <image src="/static/images/work2/Header.png" class="back" @tap="back" mode="" />
                    <text lines="1" class="header_text_1" :style="' top: ' + statusHeight + 'px;width: 50rpx;height: 50rpx;'">{{ agencyName }}</text>
                </view>
                <!-- <view class="box_15"  style="height: {{navigationHeight}}px; top: {{statusHeight}}px;">
            <text lines="1" class="text_1" style=" top: {{statusHeight}}px;width: 50rpx;height: 50rpx;">{{agencyName}}</text>
        </view> -->
                <view class="text-wrapper_30">
                    <view @tap="handelClickSearchType" data-type="resi">
                        <text lines="1" :class="'text_3  ' + (selectVale === 'resi' ? 'font_bold' : '')">查居民</text>
                        <image src="/static/images/work/select.png" mode="" v-if="selectVale == 'resi'" />
                    </view>
                    <view @tap="handelClickSearchType" data-type="house">
                        <text lines="1" :class="'text_3 ' + (selectVale === 'house' ? 'font_bold' : '')">查房屋</text>
                        <image src="/static/images/work/select.png" mode="" v-if="selectVale == 'house'" />
                    </view>
                    <view>
                        <text lines="1" :class="'text_3  ' + (selectVale === 'car' ? 'font_bold' : '')">查车辆</text>
                        <image src="/static/images/work/select.png" mode="" v-if="selectVale == 'car'" />
                    </view>
                </view>
                <view class="inout_box">
                    <image src="/static/images/work/search.png" mode="" class="search_img" />
                    <input
                        type="text"
                        :placeholder="selectVale === 'resi' ? '姓名/手机/身份证' : '小区/楼栋/单元'"
                        @input="handelBlurKeyWord"
                        @blur="handelBlurKeyWord"
                        :value="keyWord"
                    />
                    <view class="btn_box" @tap="handelClickSearch">
                        <image src="/static/images/cardIcon.png" mode="" v-if="selectVale == 'resi'" class="OCR_img" @tap="handelClickToOcr" />
                        <text>搜索</text>
                    </view>
                </view>
            </view>
            <view v-if="selectVale === 'resi'" class="tag">
                <view :data-label="item.label" @tap="handelClickResiHot" style="margin-right: 10rpx" v-for="(item, index) in resiSearch" :key="index">
                    {{ item.label }} （{{ item.count }}）
                </view>
            </view>
            <view v-if="selectVale === 'house'" class="tag">
                <view style="margin-right: 10rpx" @tap="handelClickHouseHot" :data-label="item.label" v-for="(item, index) in houseSearch" :key="index">
                    {{ item.label }} （{{ item.count }}）
                </view>
            </view>
        </view>

        <view class="group_2" v-if="selectVale === 'resi'">
            <view class="section_2">
                <view class="box_16">
                    <text lines="1" class="text_4">{{ cascaderName }}</text>
                    <view class="image-text_9">
                        <image src="/static/images/swapHorizontal.png" class="image_8"></image>
                        <text lines="1" class="text_5" @tap="handelClickShowTree">切换</text>
                    </view>
                </view>
                <view class="box_17">
                    <view class="tabs">
                        <view
                            :class="'tab_item ' + (activeType === index ? 'border_bto' : '')"
                            @tap="handelClickTab"
                            :data-index="index"
                            :data-category="item.category"
                            v-for="(item, index) in tabList"
                            :key="index"
                        >
                            <view class="num">{{ item.categoryCount }}</view>

                            <view class="name" :style="'color:' + (activeType === index ? '#3974f6' : '#666666')">{{ item.categoryName }}</view>
                        </view>
                    </view>
                </view>

                <scroll-view class="scroll" :scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="onScrollToLower">
                    <view class="form_item" :wx:key="index" @tap="toResiDetail" :data-resiId="item.resiId" v-for="(item, index) in tableData" :key="index">
                        <view class="updata1">
                            <view class="box_18">
                                <view style="display: flex; align-items: center; max-width: 390rpx; overflow: hidden">
                                    <view style="display: flex">
                                        <image
                                            style="width: 40rpx; height: 40rpx; margin-right: 16rpx"
                                            v-if="item.gender == '1' && item.age > 18 && item.age < 60"
                                            src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/1e21790833b04e9abe61e2a8f40446cb.png"
                                            mode=""
                                        />
                                        <image
                                            style="width: 40rpx; height: 40rpx; margin-right: 16rpx"
                                            v-if="item.gender == '1' && item.age < 18"
                                            src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/62c2b6a1ce834f8dae081b562b2579b9.png"
                                            mode=""
                                        />
                                        <image
                                            style="width: 40rpx; height: 40rpx; margin-right: 16rpx"
                                            v-if="item.gender == '1' && item.age >= 60"
                                            src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/bd586a4e7d0f4b3aa68c79067dfe1428.png"
                                            mode=""
                                        />
                                        <image
                                            style="width: 40rpx; height: 40rpx; margin-right: 16rpx"
                                            v-if="item.gender == '2' && item.age > 18 && item.age < 60"
                                            src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/3b44e3495dcd4d96a3c07baad1bd7c5e.png"
                                            mode=""
                                        />
                                        <image
                                            style="width: 40rpx; height: 40rpx; margin-right: 16rpx"
                                            v-if="item.gender == '2' && item.age < 18"
                                            src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/0c38251bba644a6b8e4a925aea74c9a7.png"
                                            mode=""
                                        />
                                        <image
                                            style="width: 40rpx; height: 40rpx; margin-right: 16rpx"
                                            v-if="item.gender == '2' && item.age >= 60"
                                            src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/2465ff7633a94413bf4ed2aa778c2765.png"
                                            mode=""
                                        />
                                        <image
                                            style="width: 40rpx; height: 40rpx; margin-right: 16rpx"
                                            v-if="item.gender == '0'"
                                            src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/1e21790833b04e9abe61e2a8f40446cb.png"
                                            mode=""
                                        />
                                        <text lines="1" class="text_16">{{ item.name }}</text>
                                    </view>
                                    <view class="resi_tag" v-if="item.categoryNameStr">
                                        <view
                                            :class="
                                                itemC === '党员'
                                                    ? 'hong'
                                                    : itemC === '群众'
                                                    ? 'lan'
                                                    : itemC === '共青团员'
                                                    ? 'ju'
                                                    : itemC === '残疾人员'
                                                    ? 'qing'
                                                    : itemC == '慢病'
                                                    ? 'zi'
                                                    : itemC === '死亡'
                                                    ? 'hui'
                                                    : itemC == '老年人'
                                                    ? 'lan'
                                                    : itemC == '低保人员'
                                                    ? 'lv'
                                                    : itemC == '退役军人'
                                                    ? 'hong'
                                                    : itemC === '保障房人员'
                                                    ? 'huang'
                                                    : itemC == '育龄妇女'
                                                    ? 'fen'
                                                    : itemC == '特扶人员'
                                                    ? 'zi'
                                                    : itemC == '安置帮教'
                                                    ? 'zi'
                                                    : itemC == '吸毒人员'
                                                    ? 'hong'
                                                    : itemC == '社区矫正'
                                                    ? 'qing'
                                                    : itemC == '不良青少年'
                                                    ? 'huang'
                                                    : itemC == '肇事肇祸精神病'
                                                    ? 'zi'
                                                    : itemC == '邪教人员'
                                                    ? 'ju'
                                                    : itemC == '统战人员'
                                                    ? 'lv'
                                                    : itemC == '信访人员'
                                                    ? 'honsg'
                                                    : itemC == '志愿者'
                                                    ? 'fen'
                                                    : itemC == '楼长'
                                                    ? 'lan'
                                                    : itemC == '单元长'
                                                    ? 'qing'
                                                    : itemC == '公益岗'
                                                    ? 'fen'
                                                    : itemC === '大病'
                                                    ? 'hong'
                                                    : itemC === '留守儿童'
                                                    ? 'huang'
                                                    : itemC === '艾滋病人'
                                                    ? 'hong'
                                                    : itemC === '新就业群体'
                                                    ? 'lan'
                                                    : 'lan'
                                            "
                                            v-for="(itemC, indexxxxxxxx) in item.categoryNameStr"
                                            :key="indexxxxxxxx"
                                        >
                                            {{ itemC }}
                                        </view>
                                    </view>
                                </view>
                                <view class="text-wrapper_9">
                                    <view class="label">信息完整度：</view>
                                    <view class="value">{{ item.synthesizeScore }}</view>
                                </view>
                            </view>
                            <view class="text-wrapper_13">
                                <text lines="1" class="text_27">证件号</text>
                                <text lines="1" class="text_28">：</text>
                                <text lines="1" class="text_29">{{ item.idNum }}</text>
                            </view>
                            <view class="text-wrapper_12">
                                <text lines="1" class="text_25">电话：</text>
                                <text lines="1" class="text_26">{{ item.mobile || '--' }}</text>
                            </view>
                            <view class="text-wrapper_14">
                                <text lines="1" class="text_30">地址：</text>
                                <text lines="1" class="text_31">{{ item.agencyName || '' }} {{ item.homeName || '' }}</text>
                            </view>
                        </view>
                    </view>
                    <!-- <load-more loadVisible="{{loadMoreVisible}}" loadType="{{loadMoreType}}"></load-more> -->
                    <!-- <no-data isShow="{{nodata}}" wx:if="{{nodata}}"></no-data> -->
                    <view class="loadVisible">{{ loadMoreType == 'more' ? '加载中...' : '暂无数据' }}</view>
                    <view v-if="loadLeve == 'house'" @tap="toAddResi" class="btoBtn">新增居民</view>
                </scroll-view>
            </view>
        </view>

        <view class="group_2" v-if="selectVale === 'house'">
            <view class="section_2">
                <view class="box_16" v-if="!houseListSearchFlag">
                    <text lines="1" class="text_4" @tap="handelClickShowTreeFw">{{ cascaderNameFw }}</text>
                    <view class="image-text_9">
                        <view class="image-text_qh">
                            <image src="/static/images/swapHorizontal.png" class="image_8"></image>
                            <text lines="1" class="text_5" @tap="handelClickShowTreeFw">切换</text>
                        </view>
                    </view>
                </view>
                <view class="box_17" v-if="!houseListSearchFlag">
                    <view class="tabs">
                        <view
                            :class="'tab_item_fw ' + (activeFwType === index ? 'border_bto' : '')"
                            @tap="handelClickTabFw"
                            :data-index="index"
                            :data-category="item.value"
                            v-for="(item, index) in fwTypes"
                            :key="index"
                        >
                            <view class="num">{{ item.num }}</view>

                            <view class="name" :style="'color:' + (activeFwType === index ? '#3974f6' : '#666666')">{{ item.name }}</view>
                        </view>
                    </view>
                </view>
                <view style="margin-left: 24rpx; margin-top: 47rpx" v-if="!houseListSearchFlag">
                    <text class="text_51">注：</text>
                    <image src="/static/images/house/zzMin.png" class="image_81"></image>
                    <text lines="1" class="text_51" @tap="handelClickShowTreeFw">自住</text>
                    <image src="/static/images/house/czMin.png" class="image_81 image_82"></image>
                    <text style="margin-left: 1" lines="1" class="text_51" @tap="handelClickShowTreeFw">出租</text>
                    <image src="/static/images/house/xzMin.png" class="image_81 image_82"></image>
                    <text lines="1" class="text_51" @tap="handelClickShowTreeFw">闲置</text>
                    <image src="/static/images/house/wcsMin.png" class="image_81 image_82"></image>
                    <text lines="1" class="text_51" @tap="handelClickShowTreeFw">未出售</text>
                </view>
                <scroll-view
                    :class="(houseListSearchFlag ? 'scroll_fw_search' : 'scroll_fw') + ' form_item_fw'"
                    :scroll-y="true"
                    :lower-threshold="lowerThreshold"
                    @scrolltolower="onScrollFwToLower"
                >
                    <view class="form_item_fw" v-if="!houseListSearchFlag">
                        <view :wx:key="index" @tap="onClickJump" :data-resiId="item.id" class="form_item_fw_item" v-for="(item, index) in tableFwData" :key="index">
                            <view class="item_fw">
                                <view class="item_imgs_fw">
                                    <image class="item_img_fw_img" v-if="item.rentFlagName == '自住'" src="/static/images/house/zzMax.png"></image>
                                    <image class="item_img_fw_img" v-if="item.rentFlagName == '出租'" src="/static/images/house/czMax.png"></image>
                                    <image class="item_img_fw_img" v-if="item.rentFlagName == '闲置'" src="/static/images/house/xzMax.png"></image>
                                    <image class="item_img_fw_img" v-if="item.rentFlagName == '未出售'" src="/static/images/house/wcsMax.png"></image>
                                </view>
                                <view class="item_texts_fw">
                                    <view class="item_text_hh">{{ item.houseName }}</view>
                                    <view class="item_text_rs">{{ item.resiTotal }}人</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="card" v-else>
                        <view class="list_card" :data-item="item" @tap="handelClickedit" v-for="(item, index) in tableFwData" :key="index">
                            <view class="left">
                                <view>{{ item.quartersName + item.buildingName + item.buildingUnitName + item.houseName }}</view>
                            </view>

                            <view class="right">
                                <image src="/static/images/right.png" mode="" />
                            </view>
                        </view>
                    </view>
                    <load-more :loadVisible="loadFwMoreVisible" :loadType="loadFwMoreType" v-if="!nodatafw"></load-more>
                    <no-data :isShow="nodatafw" v-if="nodatafw"></no-data>
                </scroll-view>
            </view>
            <view v-if="selectVale === 'house' && selectedOptions" @tap="toAddHouse" class="btoBtn">新增房屋</view>
        </view>
        <custom-tab-bar></custom-tab-bar>
        <van-popup :show="showAngenCascader" round position="bottom">
            <van-cascader
                :field-names="fieldName"
                v-if="showAngenCascader"
                :value="searchOrgIdPath"
                title="请选择"
                :options="angencyJmList"
                @close="onClose"
                @change="onChangeJm"
                @finish="onFinishJm"
            />
        </van-popup>
        <van-popup :show="showFw" round position="bottom">
            <van-cascader
                v-if="showFw"
                :field-names="fieldName"
                :value="cascaderFwValue"
                title="请选择所在地区"
                :options="angencyFwList"
                @close="onCloseFw"
                @change="onChangeFw"
                @finish="onFinishFw"
            />
        </van-popup>
    </view>
</template>

<script>
import customTabBar from '../../components/custom-tab-bar/index.vue';
import loadMore from '../../components/loadMore/loadMore';
import noData from '../../components/noData/nodata';
const app = getApp();
import api, { getAllOrgCategoryCount, getResidentBaseInfo, getTopTree, getNextTree, houseSearch, allOrgHouseInfo, getCommunityHouse } from '../../utils/api';
export default {
    components: {
        customTabBar,
        loadMore,
        noData
    },
    data() {
        return {
            activeType: 0,
            tabList: [],
            tableData: [],
            tableFwData: [],

            resiList: [
                {
                    name: '',
                    resiTags: [''],
                    nationalityName: '',
                    nationName: '',
                    mobile: '',
                    idNum: '',
                    agencyName: '',
                    homeName: '',
                    updatedTime: ''
                }
            ],

            pageNo: 1,
            pageSize: 10,
            lowerThreshold: '10',
            loadMoreVisible: true,
            loadFwMoreVisible: false,
            loadMoreType: 'none',
            loadFwMoreType: 'none',
            nodata: false,
            nodatafw: false,
            selectVale: 'resi',
            keyWord: '',
            angencyId: null,
            category: null,
            searchOrgIdPath: '',
            cascaderFwValue: '',
            angencyList: [],

            //组织树
            angencyFwList: [],

            //房屋组织树
            showAngenCascader: false,

            agencyName: '',

            fieldName: {
                text: 'label',
                value: 'id',
                children: 'children'
            },

            cascaderNameFw: null,
            showFw: false,

            params: {
                agencyId: '',
                orgId: '',
                level: 'district',
                orgInfo: ''
            },

            params1: {
                searchKey: '',
                pageSize: 50,
                pageNo: 1,
                searchOrgIdPath: ''
            },

            activeFwType: 0,

            fwTypes: [
                {
                    name: '房屋',
                    num: 0,
                    value: ''
                },
                {
                    name: '自住',
                    num: 0,
                    value: '0'
                },
                {
                    name: '出租',
                    num: 0,
                    value: '1'
                },
                {
                    name: '闲置',
                    num: 0,
                    value: '2'
                },
                {
                    name: '未出售',
                    num: 0,
                    value: '3'
                }
            ],

            tempList: [],
            angencyJmList: [],
            houseListSearchFlag: false,
            cascaderName: '',
            statusHeight: '',
            navigationHeight: '',
            selectedOptions: '',
            loadLeve: '',
            resiSearch: '',
            houseSearch: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            searchOrgIdPath: app.globalData.user.agencyId,
            cascaderName: app.globalData.user.agencyName,
            cascaderNameFw: app.globalData.user.agencyName,
            agencyName: app.globalData.user.agencyName,
            params: {
                ...this.params,
                agencyId: app.globalData.user.agencyId,
                orgId: app.globalData.user.agencyId
            },
            params1: {
                ...this.params1
                // searchOrgIdPath:App.globalData.user.agencyId,
            },

            statusHeight: app.globalData.deviceInfo.statusHeight,
            navigationHeight: app.globalData.deviceInfo.navigationHeight
        });
        this.getAllOrgCategoryCount();
        this.getTableData();
        this.getTopTreeData();
        this.hotResidentSearch();
        this.hotHouseSearch();
        uni.loadFontFace({
            family: 'PingFangSC-regular',
            source: 'url("https://img2.misssixty.com.cn/rs/lib/fonts/PingFangSC-regular.ttf")',
            success: function () {
                console.log('Font loaded successfully');
            },
            fail: function (error) {
                console.error('Font loading failed', error);
            },
            complete: function () {
                console.log('Font loading process complete');
            }
        });
    },
    //
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        this.getIntelligentMessage();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        handelClickedit(e) {
            console.log(e);
            uni.navigateTo({
                url: `/subpages/house/pages/housePortrait/housePortrait?resiId=${e.currentTarget.dataset.item.id}`
            });
        },

        getUnitoption(val) {
            getNextTree({
                level: val[0].level,
                id: val[0].id || val[0].agencyId
            }).then((res) => {
                if (res.data.length > 0) {
                    if (res.data[0].level != 'unit' || res.data[0].level == 'unit') {
                        this.setData({
                            tempList: this.tempList.concat([res.data[0]])
                        });
                        this.getUnitoption(res.data);
                    }
                    let unitId = this.tempList.filter((item) => item.level == 'unit')[0]?.id;
                    this.setData({
                        cascaderNameFw: this.tempList
                            .map((item) => item.label)
                            .splice(0, this.tempList.length - 1)
                            .join(','),
                        'params1.searchOrgIdPath': unitId,
                        'params.orgId': unitId
                    });
                    const data = res.data.map((item) => {
                        if (item.level != 'unit') {
                            return {
                                ...item,
                                children: []
                            };
                        }
                        return {
                            ...item,
                            children: null
                        };
                    });
                    const arr = this.getTreeFun(val[0].agencyId, this.angencyFwList, data);
                    this.setData({
                        angencyFwList: arr
                    });
                } else {
                    const arr = this.getTreeFun(val[0].agencyId, this.angencyFwList, null);
                    this.setData({
                        angencyFwList: arr
                    });
                    this.getTableFwData();
                }
            });
        },

        toOCRCard() {
            uni.navigateTo({
                url: '/subpages/OCRCard/pages/index/index'
            });
        },

        handelClickTab(e) {
            this.setData({
                activeType: e.currentTarget.dataset.index,
                category: e.currentTarget.dataset.category,
                tableData: []
            });
            this.getTableData();
        },

        handelClickTabFw(e) {
            this.setData({
                activeFwType: e.currentTarget.dataset.index,
                // category: e.currentTarget.dataset.category,
                loadFwMoreVisible: true,
                tableFwData: [],
                params1: {
                    ...this.params1,
                    pageNo: 1,
                    category: e.currentTarget.dataset.category
                }
            });
            this.getTableFwData();
        },

        handelBlurKeyWord(e) {
            this.setData({
                keyWord: e.detail.value
            });
        },

        getTopTreeData() {
            getTopTree().then((res) => {
                const arr = res.data.children.map((item) => {
                    return {
                        ...item,
                        children: []
                    };
                });
                this.setData({
                    angencyFwList: [
                        {
                            ...res.data,
                            children: arr
                        }
                    ],
                    angencyJmList: [
                        {
                            ...res.data,
                            children: arr
                        }
                    ]
                });
                console.log(this.angencyFwList);
            });
        },

        getTreeFun(id, arr, data) {
            return arr.map((item) => {
                if (id == item.id) {
                    return {
                        ...item,
                        children: data
                    };
                }
                if (item.children && item.children.length > 0) {
                    return {
                        ...item,
                        children: this.getTreeFun(id, item.children, data)
                    };
                }
                return item;
            });
        },

        onChangeJm(e) {
            console.log(e);
            const { value, selectedOptions } = e.detail;
            const level = selectedOptions[selectedOptions.length - 1].level;
            const orgId = selectedOptions[selectedOptions.length - 1].id;
            const cascaderName = selectedOptions.map((item) => item.label).join('');
            this.setData({
                searchOrgIdPath: orgId,
                cascaderName,
                tableData: [],
                pageNo: 1,
                selectedOptions,
                loadLeve: selectedOptions.findIndex((item) => item.level === 'house') !== -1 ? 'house' : ''
            });
            getNextTree({
                level,
                id: value
            }).then((res) => {
                if (res.data.length > 0) {
                    const data = res.data.map((item) => {
                        if (item.level != 'house') {
                            return {
                                ...item,
                                children: []
                            };
                        }
                        return {
                            ...item,
                            children: null
                        };
                    });
                    const arr = this.getTreeFun(value, this.angencyJmList, data);
                    this.setData({
                        angencyJmList: arr
                    });
                } else {
                    const arr = this.getTreeFun(value, this.angencyJmList, null);
                    this.setData({
                        angencyJmList: arr
                    });
                }
            });
            this.getAllOrgCategoryCount();
            this.getTableData();
        },

        onFinishJm(e) {
            this.setData({
                pageNo: 1,
                searchOrgIdPath: e.detail.selectedOptions[e.detail.selectedOptions.length - 1].id,
                cascaderName: e.detail.selectedOptions.map((item) => item.label).join(','),
                tableData: []
            });
            this.getAllOrgCategoryCount();
        },

        onChangeFw(e) {
            const { value, tabIndex, selectedOptions } = e.detail;
            if (tabIndex > 0 && selectedOptions[selectedOptions.length - 1].level != 'unit') {
                const level = selectedOptions[selectedOptions.length - 1].level;
                getNextTree({
                    level,
                    id: value
                }).then((res) => {
                    if (res.data.length > 0) {
                        const data = res.data.map((item) => {
                            if (item.level != 'unit') {
                                return {
                                    ...item,
                                    children: []
                                };
                            }
                            return {
                                ...item,
                                children: null
                            };
                        });
                        const arr = this.getTreeFun(value, this.angencyFwList, data);
                        this.setData({
                            angencyFwList: arr
                        });
                    } else {
                        const arr = this.getTreeFun(value, this.angencyFwList, null);
                        this.setData({
                            angencyFwList: arr
                        });
                    }
                });
            }
        },

        onCloseFw() {
            this.setData({
                showFw: false
            });
        },

        onFinishFw(e) {
            const { selectedOptions, value } = e.detail;
            const level = selectedOptions[selectedOptions.length - 1].level;
            this.setData({
                cascaderNameFw: e.detail.selectedOptions.map((item) => item.label).join(' '),
                showFw: false,
                cascaderFwValue: value,
                params: {
                    ...this.params,
                    orgId: value,
                    level: level == 'grid' ? 'grid' : 'agency',
                    agencyId: app.globalData.user.agencyId
                },
                params1: {
                    pageNo: 1,
                    ...this.params1,
                    searchOrgIdPath: value,
                    // orgId: value,
                    level
                },
                tableFwData: [],
                selectedOptions
            });
            this.getTableFwData();
        },

        handelClickSearchType(e) {
            this.setData({
                selectVale: e.currentTarget.dataset.type
            });
            if (e.currentTarget.dataset.type === 'resi') {
                this.setData({
                    pageNo: 1,
                    tableData: []
                });
                this.getTableData();
                this.getAllOrgCategoryCount();
            } else if (e.currentTarget.dataset.type === 'house') {
                this.setData({
                    pageNo: 1,
                    tableFwData: []
                });
                this.getUnitoption(this.angencyFwList);
            }
        },

        handelClickShowTree() {
            this.setData({
                showAngenCascader: true
            });
        },

        handelClickShowTreeFw() {
            this.setData({
                showFw: true
            });
        },

        async handelClickSearch() {
            if (this.selectVale === 'resi') {
                this.setData({
                    pageNo: 1,
                    tableData: []
                });
                this.getTableData();
                this.getAllOrgCategoryCount();
            } else {
                if (this.keyWord) {
                    this.setData({
                        houseListSearchFlag: true,
                        'params1.searchOrgIdPath': app.globalData.user.agencyId
                    });
                } else {
                    this.setData({
                        houseListSearchFlag: false
                    });
                }
                this.setData({
                    pageNo: 1,
                    tableFwData: []
                });
                this.getTableFwData();
            }
        },

        handelClickToOcr() {
            uni.navigateTo({
                url: '/subpages/OCRCard/pages/index/index'
            });
        },

        // 获取居民概览
        getAllOrgCategoryCount() {
            let parm = {
                residentInfo: this.keyWord,
                agencyId: app.globalData.user.agencyId,
                orgId: this.searchOrgIdPath,
                level: 'agency'
            };
            api.getAllOrgCategoryCount(parm)
                .then((res) => {
                    if (res.code == 0) {
                        res.data.forEach((item) => {
                            if (item.categoryName === '党员') {
                                item.category = 'party';
                            } else if (item.categoryName === '关注人群') {
                                item.category = 'attention';
                            } else if (item.categoryName === '特殊人群') {
                                item.category = 'special';
                            } else if (item.categoryName === '非健康人群') {
                                item.category = 'health';
                            }
                        });
                        // || item.categoryName == '特殊人群' || item.categoryName == '非健康人群' ||
                        this.setData({
                            tabList: res.data.filter((item) => item.categoryName == '党员' || item.categoryName == '关注人群' || item.categoryName == '居民').reverse()
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        toResiDetail(e) {
            uni.navigateTo({
                url: `/subpages/searchResult/pages/resiInfo/resiInfo?resiId=${e.currentTarget.dataset.resiid}`
            });
        },

        onClickJump(e) {
            uni.navigateTo({
                url: `/subpages/house/pages/housePortrait/housePortrait?resiId=${e.currentTarget.dataset.resiid}`
            });
        },

        onClose() {
            this.setData({
                showAngenCascader: false
            });
        },

        onScrollToLower(e) {
            if (this.loadMoreType === 'more') {
                this.setData({
                    loadMoreVisible: true
                });
                this.pageNo += 1;
                this.getTableData();
            }
        },

        onScrollFwToLower(e) {
            if (this.loadFwMoreType === 'more') {
                this.setData({
                    loadFwMoreVisible: true
                });
                this.params1.pageNo += 1;
                this.getTableFwData();
            }
        },

        getTableData: async function () {
            try {
                this.setData({
                    loadMoreVisible: true,
                    nodata: false,
                    loadMoreType: 'more'
                });
                let parm = {
                    searchKey: this.keyWord,
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    category: this.category,
                    searchOrgIdPath: this.searchOrgIdPath
                };
                let { data, code, msg } = await getResidentBaseInfo(parm);
                if (code == 0) {
                    this.setData({
                        loadMoreType: data.list.length === this.pageSize ? 'more' : 'none',
                        tableData: this.tableData.concat(
                            data.list.map((item) => ({
                                ...item,
                                categoryNameStr: item.categoryNameStr ? item.categoryNameStr.split(',') : null
                            }))
                        )
                    });
                    if (this.tableData.length == 0) {
                        this.setData({
                            loadMoreVisible: false,
                            nodata: true
                        });
                    }
                } else {
                    this.setData({
                        loadMoreVisible: false,
                        nodata: true,
                        loadMoreType: 'none'
                    });
                }
            } catch (err) {
                console.log('CatchClause', err);
                console.log('CatchClause', err);
                console.log(err);
                this.setData({
                    loadMoreVisible: false,
                    nodata: true,
                    loadMoreType: 'none'
                });
            }
        },

        toAddResi() {
            let grid = this.selectedOptions.filter((item) => item.level === 'grid')[0].id;
            let neighborHoodId = this.selectedOptions.filter((item) => item.level === 'neighborHood')[0].id;
            let buildingId = this.selectedOptions.filter((item) => item.level === 'building')[0].id;
            let buildingUnitId = this.selectedOptions.filter((item) => item.level === 'unit')[0].id;
            let doorId = this.selectedOptions.filter((item) => item.level === 'house')[0].id;
            uni.navigateTo({
                url: `/subpages/addResi/pages/addResi/addResi?type=add&grid=${grid}&neighborHoodId=${neighborHoodId}&buildingId=${buildingId}&buildingUnitId=${buildingUnitId}&doorId=${doorId}`
            });
        },

        toAddHouse() {
            let grid = this.selectedOptions.filter((item) => item.level === 'grid')[0].id;
            let neighborHoodId = this.selectedOptions.filter((item) => item.level === 'neighborHood')[0].id;
            let buildingId = this.selectedOptions.filter((item) => item.level === 'building')[0].id;
            let buildingUnitId = this.selectedOptions.filter((item) => item.level === 'unit')[0].id;
            let ids = {
                grid,
                neighborHoodId,
                buildingId,
                buildingUnitId
            };
            uni.navigateTo({
                url: `/subpages/addhouse/pages/addhouse/addhouse?ids=${JSON.stringify(ids)}`
            });
        },

        getTableFwData: async function () {
            this.setData({
                loadFwMoreVisible: true,
                nodatafw: false,
                loadMoreType: 'more'
            });
            await allOrgHouseInfo({
                ...this.params
            }).then((res) => {
                const data = [];
                let num = 0;
                res.data.forEach((item, index) => {
                    if (index < 4) {
                        let value = item.name == '自住' ? '0' : item.name == '出租' ? '1' : item.name == '闲置' ? '2' : item.name == '未出售' ? '3' : '';
                        data.push({
                            ...item,
                            value
                        });
                        num = num + parseInt(item.num);
                    }
                });
                const arr = [
                    {
                        name: '房屋',
                        num,
                        value: ''
                    },
                    ...data
                ];
                this.setData({
                    fwTypes: arr
                });
            });
            await getCommunityHouse({
                ...this.params1,
                searchKey: this.keyWord
            }).then((res) => {
                const { code, data } = res;
                if (code == 0) {
                    this.setData({
                        loadFwMoreType: data.list.length === this.params1.pageSize ? 'more' : 'none',
                        tableFwData: this.tableFwData.concat(data.list)
                    });
                    if (this.tableFwData.length == 0) {
                        this.setData({
                            loadFwMoreVisible: true,
                            loadFwMoreType: 'none',
                            nodatafw: true
                        });
                    }
                } else {
                    this.setData({
                        loadMoreVisible: false,
                        loadFwMoreVisible: false,
                        nodatafw: true,
                        loadFwMoreType: 'none'
                    });
                }
            });
        },

        hotResidentSearch() {
            api.hotResidentSearch()
                .then((res) => {
                    this.setData({
                        resiSearch: res.data
                    });
                })
                .catch((err) => {});
        },

        hotHouseSearch() {
            api.hotHouseSearch()
                .then((res) => {
                    this.setData({
                        houseSearch: res.data
                    });
                })
                .catch((err) => {});
        },

        handelClickResiHot(e) {
            this.setData({
                tableData: [],
                keyWord: e.currentTarget.dataset.label,
                pageNo: 1
            });
            this.getTableData();
            this.getAllOrgCategoryCount();
        },

        handelClickHouseHot(e) {
            this.setData({
                tableFwData: [],
                houseListSearchFlag: true,
                pageNo: 1,
                keyWord: e.currentTarget.dataset.label
            });
            this.getTableFwData();
        }
    }
};
</script>
<style>
/* pages/resiAndHouse/resiAndHouse.wxss */
page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #f7f7f7;
}

/* .page {
    position: relative;
    width: 750rpx;
    height: calc(100vh - 100rpx);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  } */
.navigation {
    width: 100%;
    display: flex;
    color: #333333;
    font-size: 32rpx;
    position: relative;
    z-index: 100;
}
.tag {
    width: 100%;
    display: flex;

    height: 50rpx;
    padding: 0 10rpx;
    box-sizing: border-box;
    overflow-x: scroll;
    margin-top: 5rpx;
}
.tag view {
    padding: 8rpx 9rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    white-space: nowrap;
    margin-right: 5rpx;
    border-radius: 6rpx;
    background-color: #e6f0ff;
    color: #5698ff;
}
.header_text_1 {
    margin-left: 20rpx;
    margin-top: 12rpx;
    /* width: 157rpx;
    height: 30rpx; */
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin-left: 15rpx;
}
.back {
    width: 30rpx;
    height: 30rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
    border-radius: 0rpx;
    z-index: 101;
}
.group_1 {
    background-color: rgba(57, 116, 246, 1);
    width: 750rpx;
    height: 404rpx;
    display: flex;
    flex-direction: column;
}

.group_2 {
    background-color: rgba(245, 246, 246, 1);
    border-radius: 20rpx;
    position: absolute;
    left: 0rpx;
    top: 401rpx;
    width: 750rpx;
    height: calc(100vh - 460rpx);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.block_1 {
    width: 750rpx;
    height: 324rpx;
    display: flex;
    flex-direction: column;
}

.box_15 {
    width: 709rpx;
    height: 56rpx;
    flex-direction: row;
    display: flex;
    margin: 70rpx 0 0 21rpx;
}

.label_1 {
    width: 34rpx;
    height: 31rpx;
    margin-top: 11rpx;
}

.text_1 {
    width: 157rpx;
    height: 30rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin: 13rpx 0 0 18rpx;
}

.image_2 {
    width: 158rpx;
    height: 56rpx;
    margin-left: 342rpx;
}

.text-wrapper_30 {
    width: 100%;
    flex-direction: row;
    display: flex;
    justify-content: center;
    margin-top: 100rpx;
    position: relative;
    padding: 0 50rpx;
    box-sizing: border-box;
}

.text-wrapper_30 > view {
    display: flex;
    width: 50%;
    height: 60rpx;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.text-wrapper_30 > view image {
    width: 120rpx;
    height: 14rpx;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-75rpx);
}

.text-wrapper_30 .text_2 {
    width: 134rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
}

.text_3 {
    width: 132rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
}

.image_3 {
    width: 140rpx;
    height: 14rpx;
    margin: 9rpx 0 0 169rpx;
}

.label_2 {
    width: 30rpx;
    height: 30rpx;
}

.section_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    width: 710rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 21rpx 0 0 20rpx;
}

.box_16 {
    width: auto;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20rpx;
    box-sizing: border-box;
}

.box_161 {
    width: 100%;
    height: 100rpx;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 20rpx;
}

.text_4 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 36rpx;
    font-family: FZTanHeiS-B-GB;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
    text-align: center;
    margin-right: 20rpx;
    overflow-x: scroll;
}

.image-text_9 {
    width: 89rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    width: 99rpx;
}

.image-text_91 {
    flex-direction: row;
    display: flex;
    text-align: center;
    justify-content: space-between;
}

.text_51 {
    font-size: 26rpx;
    color: #acacac;
}

.text_52 {
    margin-right: 36rpx;
}

.image_81 {
    width: 26rpx;
    height: 26rpx;
    position: relative;
    top: 5rpx;
}
.image_82 {
    margin-left: 36rpx;
}

.text_5 {
    width: 55rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(58, 128, 231, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 28rpx;
}

.image_8 {
    width: 28rpx;
    height: 18rpx;
    margin-top: 5rpx;
}

.box_17 {
    width: 649rpx;
    margin: 0rpx 0 0 30rpx;
}

.list_2 {
    width: 486rpx;
    height: 75rpx;
    flex-direction: row;
    display: flex;
}

.text-wrapper_31-0 {
    width: 99rpx;
    height: 75rpx;
    margin-right: 39rpx;
    display: flex;
    flex-direction: column;
}

.text_6-0 {
    width: 99rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    font-size: 36rpx;
    font-family: FZCTHJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    color: rgba(57, 116, 246, 1);
}

.text_7-0 {
    width: 102rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 38rpx;
    margin: 20rpx 0 0 24rpx;
    color: rgba(57, 116, 246, 1);
}

.text-wrapper_31-1 {
    width: 99rpx;
    height: 75rpx;
    margin-right: 39rpx;
    display: flex;
    flex-direction: column;
}

.text_6-1 {
    width: 99rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    font-size: 36rpx;
    font-family: FZCTHJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    color: rgba(51, 51, 51, 1);
}

.text_9-1 {
    width: 49rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 38rpx;
    margin: 19rpx 0 0 13rpx;
}

.text-wrapper_31-2 {
    width: 99rpx;
    height: 75rpx;
    margin-right: 39rpx;
    display: flex;
    flex-direction: column;
}

.text_6-2 {
    width: 99rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    font-size: 36rpx;
    font-family: FZCTHJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    color: rgba(51, 51, 51, 1);
}

.text_7-2 {
    width: 102rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 38rpx;
    margin: 20rpx 0 0 24rpx;
    color: rgba(102, 102, 102, 1);
}

.text-wrapper_31-3 {
    width: 99rpx;
    height: 75rpx;
    margin-right: 39rpx;
    display: flex;
    flex-direction: column;
}

.text_6-3 {
    width: 99rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    font-size: 36rpx;
    font-family: FZCTHJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    color: rgba(51, 51, 51, 1);
}

.text_7-3 {
    width: 102rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 38rpx;
    margin: 20rpx 0 0 24rpx;
    color: rgba(102, 102, 102, 1);
}

.text_49 {
    width: 79rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 36rpx;
    font-family: FZCTHJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin-left: 24rpx;
}

.text_50 {
    width: 128rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 38rpx;
    margin-top: 19rpx;
}

.box_18 {
    width: 400rpx;
    /* height: 36rpx; */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    display: flex;
    margin: 40rpx 0 0 0;
    height: 30rpx;
}

.text_16 {
    font-family: 'PingFangSC-regular', sans-serif;
    width: fit-content;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 41rpx;
    margin-top: 2rpx;
}

.text-wrapper_8 {
    background-color: rgba(236, 236, 236, 0.5);
    border-radius: 4rpx;
    margin-left: 6rpx;
    white-space: nowrap;
    padding: 7rpx 8rpx;
    width: auto;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
}

.text_18 {
    width: 94rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin: 7rpx 0 0 8rpx;
}

.text-wrapper_9 {
    position: absolute;
    right: 0;
    display: flex;
    width: 280rpx;
    overflow: hidden;
    overflow-wrap: break-word;
    text-align: right;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 4rpx 0 0 0;
    flex-direction: row;
}
.text-wrapper_9 .label {
    color: #999999;
    width: 210rpx;
    font-family: 'PingFangSC-regular', sans-serif;
}
.text-wrapper_9 .value {
    color: #04b8ad;
    width: 50rpx;
}
.text_19 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_20 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(4, 184, 173, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.box_19 {
    width: 533rpx;
    height: 29rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 27rpx 0 0 0;
}

.text-wrapper_10 {
    width: 146rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_21 {
    width: 146rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_22 {
    width: 146rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_11 {
    width: 145rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_23 {
    width: 145rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_24 {
    width: 145rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_12 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: 'PingFangSC-regular', sans-serif;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 19rpx 0 0 0;
}

.text_25 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;

    white-space: nowrap;
    line-height: 40rpx;
}

.text_26 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;

    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_13 {
    width: 415rpx;
    height: 30rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 0;
    font-family: 'PingFangSC-regular', sans-serif;
}

.text_27 {
    width: 415rpx;
    height: 28rpx;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    line-height: 40rpx;
}

.text_28 {
    width: 415rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_29 {
    width: 415rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_14 {
    width: 639rpx;
    height: 30rpx;
    overflow-wrap: break-word;
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 0;
}

.text_30 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_31 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_15 {
    width: 537rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 0;
}

.image_6 {
    width: 650rpx;
    height: 1rpx;
    margin: 30rpx 0 0 31rpx;
}

.box_20 {
    width: 648rpx;
    height: 36rpx;
    flex-direction: row;
    display: flex;
    margin: 28rpx 0 0 31rpx;
}

.text-wrapper_23 {
    background-color: rgba(236, 236, 236, 0.5);
    border-radius: 4rpx;
    height: 36rpx;
    margin-left: 16rpx;
    display: flex;
    flex-direction: column;
    width: 60rpx;
}

.text_51 {
    width: 45rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin: 7rpx 0 0 8rpx;
}

.text-wrapper_24 {
    background-color: rgba(236, 236, 236, 0.5);
    border-radius: 4rpx;
    height: 36rpx;
    margin-left: 6rpx;
    display: flex;
    flex-direction: column;
    width: 110rpx;
}

.text_52 {
    width: 94rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin: 7rpx 0 0 8rpx;
}

.text-wrapper_16 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 5rpx 0 0 130rpx;
}

.text_35 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_36 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(4, 184, 173, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_17 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 22rpx 0 0 30rpx;
}

.text_37 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_38 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_18 {
    width: 415rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 31rpx;
}

.text_39 {
    width: 415rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_40 {
    width: 415rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_41 {
    width: 415rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_19 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 31rpx;
}

.text_42 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_43 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_20 {
    width: 537rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 30rpx;
}

.text_44 {
    width: 537rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_45 {
    width: 537rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.image_9 {
    width: 650rpx;
    height: 1rpx;
    margin: 31rpx 0 0 30rpx;
}

.box_21 {
    width: 648rpx;
    height: 32rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 36rpx 0 0 31rpx;
}

.text_53 {
    width: 83rpx;
    height: 32rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 41rpx;
}

.text-wrapper_25 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 3rpx;
}

.text_54 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_55 {
    width: 243rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(4, 184, 173, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_26 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 24rpx 0 0 30rpx;
}

.text_56 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_57 {
    width: 263rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_27 {
    width: 416rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 31rpx;
}

.text_58 {
    width: 416rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_59 {
    width: 416rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_60 {
    width: 416rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_28 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 0 31rpx;
}

.scroll {
    height: calc(100vh - 805rpx);
    width: 700rpx;
}

.text_61 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_62 {
    width: 639rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text-wrapper_29 {
    width: 537rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin: 20rpx 0 27rpx 30rpx;
}

.text_63 {
    width: 537rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_64 {
    width: 537rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.box_17 .tabs {
    display: flex;
    /* justify-content: space-between; */
    height: 100rpx;
}

.box_17 .tabs .tab_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-right: 40rpx;
}

.box_17 .tabs .tab_item_fw {
    display: flex;
    flex-direction: column;
    width: 120rpx;
    justify-content: space-between;
    align-items: center;
    margin-right: 20rpx;
}

.box_17 .tabs .tab_item .num {
    font-weight: 400;
    font-size: 36rpx;
    font-weight: 550;
    color: #333333;
}

.box_17 .tabs .tab_item_fw .num {
    font-weight: 400;
    font-size: 36rpx;
    font-weight: 550;
    color: #333333;
}

.box_17 .tabs .tab_item_fw .name {
    font-size: 26rpx;
    padding-bottom: 6rpx;
    box-sizing: border-box;
    color: #666666;
}

.box_17 .tabs .tab_item .name {
    font-size: 26rpx;
    padding-bottom: 6rpx;
    box-sizing: border-box;
    color: #666666;
}

.border_bto {
    color: #3974f6 !important;
    border-bottom: solid 6rpx #3974f6;
}

.resi_tag {
    display: flex;
    /* flex-grow: 0; */
    min-width: 302rpx;
    flex: 1;
    overflow-x: scroll;

    box-sizing: border-box;
    margin-left: 16rpx;
    font-size: 24rpx;
    margin-right: 10px;
}
.resi_tag view {
    padding: 1rpx 9rpx;
    box-sizing: border-box;
    white-space: nowrap;
    margin-right: 5rpx;
    border-radius: 6rpx;
}
.form_item {
    margin-top: 10rpx;
    padding: 0 10rpx 0rpx 30rpx;
    box-sizing: border-box;
}
.updata1 {
    margin-top: 10rpx;
    box-sizing: border-box;
    border-bottom: 1rpx #eaeaea solid;
    height: 210rpx;
}
.scroll_fw {
    height: calc(100vh - 750rpx);
}
.scroll_fw_search {
    height: calc(100vh - 460rpx);
}
.loadVisible {
    color: #c1c1c1;
    font-size: 24rpx;
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
}
.form_item_fw {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* 可选：添加以下任一属性以调整子元素在主轴上的对齐方式 */
    justify-content: center;
    /* justify-content: space-between;  // 子元素间均匀间隔，首尾元素贴边 */
}

.form_item_fw_item {
    /* flex-basis: 200px; */
    width: calc(33% - 24rpx);
    /* 其他样式... */
    margin: 10rpx;
    height: 124rpx;
    background: rgba(225, 238, 254, 0.4);
    /* 为了弥补可能出现的1px间隙，可以添加适当的左右外边距 */
}
.form_item_fw_item_bg0 {
    background: rgba(225, 238, 254, 0.4);
}
.form_item_fw_item_bg1 {
    background: rgba(227, 248, 247, 0.4);
}
.form_item_fw_item_bg2 {
    background: rgba(225, 238, 254, 0.4);
}
.form_item_fw_item_bg3 {
    background: rgba(217, 223, 233, 0.4);
}
.item_fw {
    display: flex;
    padding: 24rpx;
}
.item_img_fw_img {
    width: 32rpx;
    height: 32rpx;
    margin-top: 10rpx;
}
.item_text_hh {
    font-weight: bold;
    font-size: 34rpx;
    color: #333333;
}
.item_texts_fw {
    padding-left: 12rpx;
    padding-top: 4rpx;
}
.item_text_rs {
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
}

.inout_box {
    position: relative;
    margin: 20rpx 0 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.inout_box input {
    width: auto;
    background: #f5f5fa;
    border-radius: 47rpx;
    padding: 0 100rpx 0 69rpx;
    height: 76rpx;
    font-size: 26rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inout_box .search_img {
    position: absolute;
    left: 37rpx;
    top: 24rpx;
    width: 30rpx;
    height: 30rpx;
}

.inout_box .btn_box {
    width: 110rpx;
    height: 50rpx;
    position: absolute;
    top: 15rpx;
    right: 4rpx;
    display: flex;
    align-items: center;
}

.inout_box .btn_box text {
    width: 80rpx;
    height: 30rpx;
    line-height: 30rpx;
    font-size: 28rpx;
    box-sizing: border-box;
    color: #3a80e7;
    padding-left: 15rpx;
    border-left: 2rpx #3a80e7 solid;
}

.OCR_img {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    left: -60rpx;
    z-index: 10;
}

.font_bold {
    font-weight: 600;
}
.hong {
    color: #ff3c3c;
    background-color: #ffe3e3;
}
.lan {
    color: #4f94ff;
    background-color: #e6f0ff;
}
.ju {
    color: #fe840d;
    background-color: #ffeedd;
}
.qing {
    color: #04b8ad;
    background-color: #dcf5f3;
}
.zi {
    color: #b462e8;
    background-color: #f4e9fc;
}
.hui {
    color: #959495;
    background-color: #f1f1f1;
}
.lv {
    color: #52ba74;
    background-color: #e7f5ec;
}
.fen {
    color: #ff688f;
    background-color: #ffeaef;
}
.huang {
    color: #fcac00;
    background-color: #fff3db;
}
.card {
    background-color: #fff;
    border-radius: 0 0 20rpx 20rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
}
.card .list_card {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
    align-items: center;
    color: #333333;
    border-top: 1px solid #eaeaea;
}
.card .list_card .left {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card .list_card .left :nth-child(1),
.card .list_card .left :nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card .list_card .left .address {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 20rpx;
}
.list_card .right image {
    width: 20rpx;
    height: 20rpx;
}
.btoBtn {
    position: fixed;
    bottom: 170rpx;
    width: 170rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #ffffff;
    left: 50%;
    text-align: center;
    transform: translateX(-85rpx);
    border-radius: 30px;
    background-color: #3974f6;
    /* padding: 10rpx 25rpx;
    box-sizing: border-box; */
}
</style>
