<template>
    <view class="main">
        <view class="tabBox">
            <MenuItem v-for="(item, index) in tabList" :key="index" :item="item" round="true" size="28"
                :src="selectFilter == item.id ? item.active : item.src"
                :nameStyle="selectFilter == item.id ? 'color:#5B96E9' : 'color:#808D97'" :imageBoxStyle="(selectFilter == item.id
                    ? 'background:#f0f7fe;'
                    : 'background:#f6f7f8;') +
                    'height:75rpx;width:75rpx;padding: 18rpx;'
                    " @handleClick="handleChangeSelect(item.id)">
            </MenuItem>
        </view>

        <view class="selectServerpartBox">
            <view class="leftNameBox" @click="handleGoSelectServerPart">
                {{ currentServerPart ? currentServerPart : "- 请选择服务区 -" }}
            </view>
            <view class="rightTimeBox">
                <picker mode="date" @change="handleTimeChange">{{ selectDay }}</picker>
            </view>
        </view>

        <!-- 今日未巡检内容 -->
        <div class="errorMessage" v-if="notInspectedName">{{
            `当前服务区${notInspectedName},共${notInspectedList.length}个点位，还未进行巡检` }}</div>

        <!-- 今日已巡检内容 -->
        <view class="dataList">
            <view class="dataItem" v-for="(item, index) in dataList" :key="index" @click="handleGoDetail(item)">
                <div class="content-index">{{ index + 1 }}</div>
                <view class="itemRow">
                    <view class="projectName">{{ item.placeName || "-" }}</view>
                    <view v-if="item.situation !== 0" class="stateName" :style="{
                        color:
                            item.errorStatus === 0
                                ? 'red'
                                : item.errorStatus === 1
                                    ? '#3B72FF'
                                    : item.errorStatus === 2
                                        ? '#139942'
                                        : '',
                    }">
                        {{
                            item.errorStatus === 0
                                ? "待处理"
                                : item.errorStatus === 1
                                    ? "处理中"
                                    : item.errorStatus === 2
                                        ? "已处理"
                                        : ""
                        }}</view>
                </view>
                <view class="itemCenterRow" style="margin: 60rpx 0 20rpx">
                    <view class="value">{{ item.uploadResult || "-" }}</view>
                </view>
                <view class="itemRow">
                    <view class="leftName"></view>

                    <view class="rightName"><span :style="{
                        color:
                            item.situation === 0
                                ? '#139942'
                                : item.situation === 1
                                    ? '#F75031'
                                    : '',
                    }">{{
                        item.errorStatus === 2
                            ? ""
                            : item.situation === 0
                                ? "正常情况"
                                : item.situation === 1
                                    ? "急需处理"
                                    : "-"
                    }}</span>
                    </view>
                </view>

                <view class="line"></view>
                <view class="itemRow">
                    <view class="leftName"><span class="radio" style="background: #44bea3"></span>{{ item.userName ||
                        "-" }}
                    </view>
                    <view class="rightName"></view>
                </view>
                <view class="itemRow">
                    <view class="leftName"><span class="radio" style="background: #398efe"></span>{{
                        item.createdAt
                            ? $moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss")
                            : "-"
                    }}</view>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
import MenuItem from "@/components/menu/menuItem.vue";
export default {
    data() {
        const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD')

        return {
            currentServerPart: "",
            currentServerPartObj: {},
            tabList: [
                {
                    name: "全部",
                    src: "/static/images/expense/type/shenp.png",
                    active: "/static/images/expense/type/shenpz.png",
                    id: 1,
                },
                {
                    name: "正常",
                    src: "/static/images/expense/type/yichl.png",
                    active: "/static/images/expense/type/yichlz.png",
                    id: 2,
                },
                {
                    name: "异常",
                    src: "/static/images/expense/type/yifq.png",
                    active: "/static/images/expense/type/yifqz.png",
                    id: 3,
                },
                {
                    name: "待我处理",
                    src: "/static/images/expense/type/yichl.png",
                    active: "/static/images/expense/type/yichlz.png",
                    id: 4,
                }
            ],
            selectFilter: 1, // 选择的tab
            selectDay: lastDay,// 选择的时间
            PageIndex: 1, // 默认的页数
            dataList: [],// 实际数据
            notInspectedList: [],// 未巡检站点数据
            notInspectedName: "",// 未巡检站点名称合计
            useInfo: {}, // 用户详情
        }
    },
    components: {
        MenuItem,
    },
    onLoad() {
        let userInfo = uni.getStorageSync("vuex");
        userInfo = JSON.parse(userInfo);
        if (userInfo) {
            this.useInfo = JSON.parse(JSON.stringify(userInfo));
        }
    },
    onShow() {
        let currentServiceObj = uni.getStorageSync('currentServerPart')
        console.log('currentServiceObjcurrentServiceObj', currentServiceObj);
        // 判断是否需要重新请求
        let isReady = true
        if (currentServiceObj.label) {
            if (currentServiceObj.value === this.currentServerPartObj.value) {
                isReady = false
            }

            this.currentServerPart = currentServiceObj.label
            this.currentServerPartObj = currentServiceObj
        } else {
            this.$util.toNextRoute("navigateTo", `/pages/mbwa/newMap`);
        }

        if (isReady) {
            this.handleGetDataList();
            this.handleGetNotInspected()
        }
    },
    methods: {
        // 改变时间
        handleTimeChange(e) {
            console.log('eeee', e);
            let newTime = this.$util.cutDate(new Date(e.detail.value), 'YYYY-MM-DD')
            console.log('newTimenewTimenewTime', newTime);
            this.selectDay = newTime

            this.handleGetDataList();
            this.handleGetNotInspected()
        },
        // 跳转到选择服务区
        handleGoSelectServerPart() {
            this.$util.toNextRoute("navigateTo", `/pages/mbwa/newMap`);
        },
        // 改变tab
        handleChangeSelect(value) {
            this.selectFilter = value;
            this.dataList = [];
            this.isEnd = false;
            this.PageIndex = 1;
            // this.handleGetDataList();

            this.handleGetDataList();
            this.handleGetNotInspected()
        },
        // 跳转详情进行操作
        handleGoDetail(obj) {
            //   判断是否是异常的
            if (obj.situation === 1) {
                this.$util.toNextRoute(
                    "navigateTo",
                    `/pages/walkAroundManager/detail?id=${obj.id}&pageType=error`
                );
            } else if (obj.situation === 0) {
                // 正常的 查看详情
                this.$util.toNextRoute(
                    "navigateTo",
                    `/pages/walkAroundManager/detail?id=${obj.id}`
                );
            }
        },
        // 拿到滚动框里面的数据
        async handleGetDataList() {
            console.log("this.selectFilter", this.selectFilter);
            uni.showLoading({
                title: "加载中...",
            });
            const req = {
                // startTime: this.$moment().subtract(1, 'months').format('YYYY-MM-DD'),
                // endTime: this.$moment().format('YYYY-MM-DD'),
                // selectFilter 3 和 4 为 异常和 待我处理 那么都会是前一天的数据  当为异常时 时间就变为 最近一个月 
                // 当为待我处理时 那么服务区也不传了 时间还是最近一个月
                serverPartId: this.selectFilter === 4 ? '' : this.currentServerPartObj.value,
                startTime: this.selectFilter === 3 || this.selectFilter === 4 ? this.$moment().subtract(1, 'months').format('YYYY-MM-DD') : this.selectDay,
                endTime: this.selectFilter === 3 || this.selectFilter === 4 ? this.$moment().format('YYYY-MM-DD') : this.selectDay,
                pageNum: this.PageIndex,
                pageSize: 100,
                extend:
                    this.selectFilter === 1
                        ? null
                        : this.selectFilter === 2
                            ? [
                                {
                                    key: "situation",
                                    value: 0,
                                },
                            ]
                            : this.selectFilter === 3
                                ? [
                                    {
                                        key: "situation",
                                        value: 1,
                                    },
                                ]
                                : this.selectFilter === 4
                                    ? [
                                        {
                                            key: "person.STAFF_NAME",
                                            value: this.useInfo.userData.UserName,
                                        },
                                    ]
                                    : null,
            };
            console.log("req323131", req);

            const data = await this.$request.$webJavaPOST(
                `questionnaire-responses/getList`,
                req
            );
            console.log("datadatadatadata", data);

            let list = data.Result_Data.List;
            if (list && list.length > 0) {
                if (list.length < 10) {
                    this.isEnd = true;
                }
            } else {
                this.isEnd = true;
            }

            // this.dataList = this.dataList.concat(list);
            this.dataList = list
            console.log("this.dataList", this.dataList);
            uni.hideLoading();
        },
        // 当前服务区 今日 是否还有点位未巡检
        async handleGetNotInspected() {
            // 拿到当前服务区下的全部点位数据
            const req = {
                serverPartIds: [this.currentServerPartObj.value],
                status: true
            }
            const data = await this.$request.$webJavaPOST(
                `questionnaire-templates/search/tree`,
                req
            );
            let list = data.Result_Data.List
            let pointList = []
            if (list && list.length > 0) {
                list.forEach((item) => {
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((subItem) => {
                            if (subItem.children && subItem.children.length > 0) {
                                subItem.children.forEach((thirdItem) => {
                                    pointList.push(thirdItem)
                                })
                            }
                        })
                    }
                })
            }

            // pointList  就是这个服务区的全部点位数据
            // 下面拿到这个服务区 今日的巡检情况
            const recordReq = {
                startTime: this.selectDay,
                endTime: this.selectDay,
                serverPartIds: [this.currentServerPartObj.value]
            }

            const recordData = await this.$request.$webJavaPOST(
                `questionnaire-responses/tree/list`,
                recordReq
            );
            let recordList = recordData.Result_Data.List
            let recordDataList = []
            // 拿到当前已经完成了的站点id
            let pointDataList = []
            if (recordList && recordList.length > 0) {
                recordList.forEach((item) => {
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((subItem) => {
                            if (subItem.children && subItem.children.length > 0) {
                                subItem.children.forEach((thirdItem) => {
                                    recordDataList.push(thirdItem)
                                    pointDataList.push(thirdItem.template.id)
                                })
                            }
                        })
                    }
                })
            }


            let notInspectedList = []
            let notInspectedName = ''
            if (pointList && pointList.length > 0) {
                pointList.forEach((item) => {
                    if (pointDataList.indexOf(item.id) === -1) {
                        notInspectedList.push(item)
                        if (notInspectedName) {
                            notInspectedName += `、${item.title}`
                        } else {
                            notInspectedName = item.title
                        }
                    }
                })
            }
            this.notInspectedList = notInspectedList
            this.notInspectedName = notInspectedName

            console.log('this.notInspectedNamethis.notInspectedNamethis.notInspectedName', this.notInspectedName);

        }
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100%;

    .selectServerpartBox {
        width: 100%;
        height: 80rpx;
        box-sizing: border-box;
        background: #fff;
        padding: 0 24rpx;
        margin-top: 200rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 16rpx;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
        }

        .leftNameBox {
            width: 50%;
            padding: 16rpx 20rpx;
            background: #f8f9fa;
            border-radius: 12rpx;
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            border: 2rpx solid transparent;

            &:hover {
                background: #e8f4ff;
                border-color: #ff814f;
                color: #ff814f;
            }

            &::before {
                content: '📍';
                margin-right: 12rpx;
                font-size: 24rpx;
            }
        }

        .rightTimeBox {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            padding: 16rpx 20rpx;
            background: #f8f9fa;
            border-radius: 12rpx;
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            cursor: pointer;
            border: 2rpx solid transparent;

            &:hover {
                background: #e8f4ff;
                border-color: #1890ff;
                color: #1890ff;
            }

            picker {
                width: 100%;
                text-align: center;
            }

            &::before {
                content: '📅';
                margin-right: 12rpx;
                font-size: 24rpx;
            }
        }
    }

    .errorMessage {
        width: calc(100% - 48rpx);
        margin: 24rpx 24rpx 0;
        box-sizing: border-box;
        padding: 24rpx;
        font-size: 28rpx;
        color: #ff4d4f;
        background: linear-gradient(135deg, #fff2f0 0%, #ffebe8 100%);
        border: 2rpx solid #ffccc7;
        border-radius: 16rpx;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px 0 rgba(255, 77, 79, 0.15);

        &::before {
            content: '⚠️';
            position: absolute;
            left: 24rpx;
            top: 50%;
            transform: translateY(-50%);
            font-size: 32rpx;
        }

        &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 6rpx;
            background: linear-gradient(180deg, #ff4d4f 0%, #ff7875 100%);
        }


        font-weight: 500;
        padding-left: 70rpx;
        line-height: 40rpx;
    }

    .tabBox {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 200rpx;
        display: flex;
        align-items: center;
        background: #fff;
        box-shadow: 0 2rpx 4rpx rgba(167, 166, 166, 0.3);

        .tabItem {
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 30rpx;
            color: #010b18;
            line-height: 40rpx;
            font-style: normal;
        }

        .selectTab {
            position: relative;
        }

        .selectTab::after {
            content: "";
            width: 2rem;
            height: 6rpx;
            background: #3b72ff;
            position: absolute;
            bottom: -18rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .dataList {
        width: 100%;
        height: cac(100% - 280rpx);
        box-sizing: border-box;
        padding: 24rpx 24rpx 0;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);

        .dataItem {
            width: 100%;
            box-sizing: border-box;
            background: #fff;
            padding: 16rpx;
            margin: 24rpx 0;
            border-radius: 8rpx;
            box-shadow: 0 0px 6rpx #e2e2e2;
            position: relative;

            .content-index {
                width: 42rpx;
                height: 32rpx;
                line-height: 32rpx;
                font-size: 24rpx;
                color: #fff;
                text-align: center;
                background-color: #fb8b56;
                position: absolute;
                top: 26rpx;
                left: -4rpx;
                box-shadow: 4rpx 4rpx 2rpx 0 rgba(238, 112, 27, 0.5);
            }

            .itemRow {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .projectName {
                    width: 60%;
                    font-size: 30rpx;
                    height: 54rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #333333;
                    box-sizing: border-box;
                    padding-left: 40rpx;
                }

                .leftName {
                    color: #686868;
                    font-size: 24rpx;

                    .radio {
                        display: inline-block;
                        width: 14rpx;
                        height: 14rpx;
                        border-radius: 14rpx;
                        margin: 0 8px 0 5px;
                    }
                }

                .stateName {
                    font-size: 28rpx;
                    color: #999999;
                }

                .rightName {
                    color: #686868;
                    font-size: 24rpx;

                    .radio {
                        display: inline-block;
                        width: 14rpx;
                        height: 14rpx;
                        border-radius: 14rpx;
                        margin: 0 8px 0 5px;
                    }

                    .month {
                        font-family: DINAlternate-Bold, DINAlternate;
                    }
                }
            }

            .itemCenterRow {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;

                .value {
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #ff814fff;
                    width: 70%;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    /* 设置显示的行数 */
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: center;
                }
            }

            .line {
                height: 2rpx;
                width: 100%;
                background-color: #eee;
                margin-bottom: 18rpx;
                margin-top: 16rpx;
            }
        }
    }
}
</style>