<template>
    <!-- subpages/gatherInformation/pages/gatherInformation/gatherInformation.wxml -->
    <view class="page">
        <view class="search">
            <view class="row1">
                <van-tabs :active="active" @change="toggleColor" title-active-color="#3974F6" color="#3974F6">
                    <van-tab title="待复核" title-class="custom-tab-title">
                        <view class="section_5">
                            <scroll-view
                                :scroll-y="true"
                                scroll-into-view="scrollToHere"
                                style="width: 100%; height: 90vh"
                                :lower-threshold="lowerThreshold"
                                @scrolltolower="onScrollToLower"
                            >
                                <view class="list_1" @tap="toDetails" :data-flag="item.checkResultFlag" :data-resiId="item.id" v-for="(item, index) in flag0Array" :key="index">
                                    <view class="section_1-0" id="scrollToHere">
                                        <view class="title">{{ item.name }}</view>
                                        <view class="title_mall">检查时间: {{ item.orderDate }}</view>
                                        <view class="title_mall">检查人员: {{ item.checkPersons }}</view>
                                        <view class="title_mall">
                                            {{ item.status ? '未整改隐患' : '隐患明细' }}：
                                            <text v-for="(item, index1) in item.hiddenDangeList0" :key="index1">{{ index + 1 }}.{{ item.hazardDesc }}</text>
                                        </view>
                                        <view v-if="!item.status">
                                            <view class="title_mall" v-for="(item, index1) in item.hiddenDangeList2" :key="index1">整改要求：{{ item.hazardDesc }}</view>
                                        </view>
                                        <view v-if="item.status && item.hiddenDangeList1.length != 0">
                                            <view class="title_mall">
                                                已整改隐患：
                                                <text v-for="(item, indexC) in item.hiddenDangeList1" :key="indexC">{{ indexC + 1 }}.{{ item.hazardDesc }}</text>
                                            </view>
                                        </view>
                                        <view class="title_mall">拟复查时间: {{ item.reviewTime }}</view>
                                    </view>
                                </view>
                                <movable-area class="movable-area">
                                    <movable-view class="movable-view" direction="all" x="250" y="300">
                                        <image src="/static/images/xuncha3.png" class="image-wrapper" @touchend.stop.prevent="handleTap"></image>
                                    </movable-view>
                                </movable-area>
                            </scroll-view>
                        </view>
                    </van-tab>
                    <van-tab title="已合格">
                        <view class="section_5">
                            <scroll-view
                                :scroll-y="true"
                                scroll-into-view="scrollToHere"
                                style="width: 100%; height: 90vh"
                                :lower-threshold="lowerThreshold"
                                @scrolltolower="onScrollToLower"
                            >
                                <view class="list_1" :data-resiId="item.id" @tap="toDetails" :data-flag="item.checkResultFlag" v-for="(item, index) in flag1Array" :key="index">
                                    <view class="section_1-0" id="scrollToHere">
                                        <view class="title">{{ item.name }}</view>
                                        <view class="title_mall">检查时间: {{ item.createdTime }}</view>
                                        <view class="title_mall">检查人员: {{ item.checkPersons }}</view>
                                        <view class="title_mall">检查结论: 合格</view>

                                        <view class="title_mall">合格时间: {{ item.orderDate }}</view>
                                    </view>
                                </view>
                                <movable-area class="movable-area">
                                    <movable-view class="movable-view" direction="all" x="250" y="300">
                                        <image src="/static/images/xuncha3.png" class="image-wrapper" @touchend.stop.prevent="handleTap"></image>
                                    </movable-view>
                                </movable-area>
                            </scroll-view>
                        </view>
                    </van-tab>
                </van-tabs>
            </view>
        </view>
    </view>
</template>

<script>
// subpages/securityCheck/securityCheck.js
import { securityCheckk } from '../../../utils/api';
export default {
    data() {
        return {
            active: 0,
            pageNo: 1,
            pageSize: 20,
            id: 0,

            marsi: [
                //
            ],

            flag0Array: [],
            flag1Array: [],
            checkResultFlag: 0,
            lowerThreshold: '5',
            loadMoreVisible: false,
            loadMoreType: 'none',
            nodata: false,
            setlectVal: ''
        };
    },
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.setData({
            flag0Array: [],
            flag1Array: []
        });
        this.getList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        handleTap() {
            console.log('Movable view clicked');
            uni.navigateTo({
                url: '/subpages/InspectionReport/pages/InspectionReport/InspectionReport'
            });
        },

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

        getList() {
            this.setData({
                loadMoreVisible: true,
                nodata: false,
                loadMoreType: 'more'
            });
            securityCheckk({
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                checkResultFlag: this.checkResultFlag
            })
                .then(({ data }) => {
                    data.list.forEach((item) => {
                        console.log(item);
                        if (item.hiddenDangeList) {
                            if (item.hiddenDangeList.findIndex((itemC) => itemC.hazardStatus === 2) === -1) {
                                item.status = true;
                                item.hiddenDangeList0 = item.hiddenDangeList.filter((itemC) => itemC.hazardStatus === 0);
                                item.hiddenDangeList1 = item.hiddenDangeList.filter((itemC) => itemC.hazardStatus === 1);
                            } else {
                                item.status = false;
                                item.hiddenDangeList0 = item.hiddenDangeList.filter((itemC) => itemC.hazardStatus === 0);
                                item.hiddenDangeList2 = item.hiddenDangeList.filter((itemC) => itemC.hazardStatus === 2);
                            }
                        }
                    });
                    console.log(data.list);
                    if (this.flag0Array.length === 0) {
                        this.setData({
                            loadMoreVisible: false,
                            nodata: true
                        });
                    }
                    console.log(this.flag1Array);
                    if (this.flag1Array.length === 0) {
                        this.setData({
                            loadMoreVisible: false,
                            nodata: true
                        });
                    }
                    this.setData({
                        loadMoreType: data.list.length === this.pageSize ? 'more' : 'none',
                        flag0Array: this.flag0Array.concat(data.list.filter((item) => item.checkResultFlag === 0 || item.checkResultFlag == null)),
                        flag1Array: this.flag1Array.concat(data.list.filter((item) => item.checkResultFlag === 1))
                    });
                })
                .catch((err) => {
                    console.log(err);
                    this.setData({
                        loadMoreVisible: false,
                        nodata: true
                    });
                });
        },

        memem() {
            this.setData({
                flag0Array: this.marsi.filter((item) => item.checkResultFlag === 0 || item.checkResultFlag == null),
                flag1Array: this.marsi.filter((item) => item.checkResultFlag === 1)
            });
        },

        handelTab(e) {
            console.log(e);
            this.setData({
                setlectVal: e.currentTarget.dataset.value
            });
        },

        toggleColor(e) {
            console.log(e.detail.index);
            const let1 = e.detail.index;
            if (e.detail.index == 0) {
                this.setData({
                    checkResultFlag: let1,
                    flag0Array: [],
                    flag1Array: []
                });
                this.getList();
                console.log(this.checkResultFlag);
            } else {
                this.setData({
                    checkResultFlag: let1
                });
                this.getList();
                console.log(this.checkResultFlag);
            }
            this.setData({
                active: let1
            });
        },

        qualifed() {
            uni.navigateTo({
                url: '../../subpages/qualified/qualified'
            });
        },

        toAddEnterprise() {
            uni.navigateTo({
                url: '../../../subpages/InspectionReport/pages/InspectionReport/InspectionReport'
            });
        },

        toDetails(e) {
            console.log(e);
            uni.navigateTo({
                url: `../../../subpages/safetyinspection/pages/safetyinspection/safetyinspection?resiId=${e.currentTarget.dataset.resiid}&flag=${e.currentTarget.dataset.flag}&name=${e.currentTarget.dataset.name}`
            });
        }
    }
};
</script>
<style>
/* subpages/gatherInformation/pages/gatherInformation/gatherInformation.wxss */
page {
    height: 100vh;
    overflow: hidden;
    background-color: #f7f7f7;
    /*定位方式为相对定位 */
    position: relative;
    display: flex;
    /* 按照行排序 */
    flex-direction: column;
}
.custom-tab-title .van-tab__title {
    font-size: 32rpx;
}
.search {
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    /* justify-content: space-between; */
    box-sizing: border-box;
    justify-content: center;
}
.filter {
    margin-left: 50rpx;
    margin-right: 60rpx;
}
.row1 {
    font-size: 30rpx;
}
.box_2 {
    background-color: rgba(247, 247, 247, 1);
    border-radius: 20rpx;
    /* 相对于父级进行定位 */
    left: 0rpx;
    /* top: 181rpx; */
    width: 750rpx;
    height: 1365rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* .section_5 {
  width: 100%;
  height: 1395rpx;
  display: flex;
  flex-direction: column;
  overflow-y: auto; 
} */
.section_5 {
    height: 1395rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20rpx;
}
.content_1 {
    display: flex;
    /* flex-direction: row; */
    justify-self: center;
    margin: 40rpx 0 0 10rpx;
}
.content_1 > view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250rpx;
    height: 210rpx;
}
.data {
    display: flex;
    flex-direction: column;
    margin: 40rpx 0 0 10rpx;
}
.data > view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 303rpx;
    height: 200rpx;
}

.house {
    display: flex;
    justify-content: start;
    margin: 40rpx 0 0 10rpx;
}
.house > view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 303rpx;
    height: 200rpx;
}

.image_2 {
    width: 158rpx;
    height: 56rpx;
    margin-left: 332rpx;
}
.list_1 {
    width: 700rpx;
    /* height: 603rpx; */
    /* flex-direction: column; */
    display: flex;
    /* width: 100%; */
    margin-bottom: 20rpx;
}
.section_1-0 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    /* height: 410rpx; */
    width: 710rpx;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}
.image-wrapper_9-1 {
    width: 404rpx;
    height: 100rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0 0 59rpx;
}
.text-wrapper_7-0 {
    width: 134rpx;
    height: 33rpx;
    display: flex;
    /* row水平排列 */
    flex-direction: row;
    margin: 29rpx 0 0 29rpx;
}
.text_2-0 {
    width: 134rpx;
    height: 33rpx;
    /* 文本换行 */
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
}
.title {
    margin-top: 20rpx;
    font-size: 16px;
    font-weight: 550;
    margin-left: 30rpx;
}
.title_mall {
    margin-top: 20rpx;
    font-size: 13px;
    opacity: 0.5;
    margin-left: 30rpx;
}
.movable-area {
    pointer-events: none;
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.movable-view {
    pointer-events: auto;
    height: 50px;
    width: 50px;
}
.image-wrapper {
    width: 190rpx;
    height: 190rpx;
}
</style>
