<template>
    <div class="wrap">
        <LHeader :text="text"></LHeader>
        <!-- 内容列表 -->
        <div class="title">{{ nowTime }}</div>
        <p class="title-text">系统提示：请按照下列巡查清单完成巡查工作。</p>
        <div class="con-list">
            <van-cell-group inset v-for="(item, index) in contentList" :key="index" @click="onClick(item)">
                <div class="icon-wrap">
                    <span class="icon-img">
                        <van-image width="45" height="45" style="margin: 0 10px;overflow: hidden; border-radius: 5px;"
                            :src="item.imgUrl" />
                    </span>

                    <div class="icon_wrap_text">
                        <div class="icon_wrap_text1">{{ item.content }}</div>
                        <span class="icon_wrap_text2" v-if="item.content == '日查清单'">{{ item.startTime | formatDate }}</span>
                        <span class="icon_wrap_text2" v-else>{{ item.startTime | formatDate }}至{{ item.validityTime |
                            formatDate }}</span>
                    </div>
                </div>
            </van-cell-group>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import LHeader from "@/components/header.vue";
import { postWork } from "@/service/workbench";
import { getFun, postFun } from "@/service/table.js";
import { timestampToTime } from "@/utils/format";
export default {
    name: 'patrolExecute', //巡查执行
    components: {
        LHeader,
    },
    props: {

    },
    data() {
        return {
            text: '巡查执行',
            nowTime: "",
            projectId: '',
            contentList: [

            ],
            contentLists: [
                {
                    title: "0",
                    imgUrl: require("@/assets/dangerPatrol/day_list.png"),
                    content: "日查清单",
                    id: ''
                },
                {
                    title: "1",
                    imgUrl: require("@/assets/dangerPatrol/week_list.png"),
                    content: "周查清单",
                    id: ''
                },
                {
                    title: "3",
                    imgUrl: require("@/assets/dangerPatrol/half_month_list.png"),
                    content: "半月查清单",
                    id: ''
                },
                {
                    title: "2",
                    imgUrl: require("@/assets/dangerPatrol/month_list.png"),
                    content: "月查清单",
                    id: ''
                },
                {
                    title: "3",
                    imgUrl: require("@/assets/dangerPatrol/quarter_list.png"),
                    content: "季查清单",
                    id: ''
                },
                {
                    title: "6",
                    imgUrl: require("@/assets/dangerPatrol/year_list.png"),
                    content: "半年查清单",
                    id: ''
                },
                {
                    title: "4",
                    imgUrl: require("@/assets/dangerPatrol/year_list.png"),
                    content: "年查清单",
                    id: ''
                }
            ]
        }
    },
    created() {

    },
    mounted() {
        this.nowTime = timestampToTime(new Date(), "DT7", true);
        this.getProjectId()
    },
    methods: {
        loading() {
            let userInfoData = JSON.parse(localStorage.getItem('LocalUserInfo'))
            let params = {
                userId: userInfoData.userId,
                projectId: this.projectId,
                status: '0'
            }
            getFun("risk/riskUserPatrol/list", params).then((res) => {
                this.contentLists.forEach((x) => {
                    res.rows.forEach((y) => {
                        console.log(y)
                        if (x.title == y.patrolType) {
                            x.startTime = y.startTime
                            x.validityTime = y.validityTime
                            x.id = y.id;
                            this.contentList.push(x)
                        }
                    })
                })
                // this.contentList.forEach((x)=>{
                //     res.data.forEach((y)=>{
                //         if(x.title==y.cycle){
                //             x.start
                //         }
                //     })
                // })
            })
        },
        onClick(val) {
            sessionStorage.removeItem('type')
            this.$router.push({
                name: "implement",
                query: {
                    id: this.projectId,
                    content: val.content,
                    patrolId: val.id
                }
            });
        },
        getProjectId() {
            getFun('/risk/riskUserPatrol/getPatrolProjectList').then(res => {
                const project = res.data.length && res.data[0]
                this.projectId = project.id;
                this.loading()
            })
        }
    },
    filters: {
        formatDate(time) {
            return timestampToTime(time, "DT7", true)
        }
    }
}
</script>

<style scoped lang='less'>
.wrap {
    height: 100vh;
    width: 100vw;
}

.van-cell-group--inset {
    // height: 2.266667rem;
    line-height: 2.266667rem;
    font-size: 0.42rem;
    font-weight: bolder;
    margin: 0.266667rem;
    padding-left: 0.666667rem;
    color: #646566;

    .icon-wrap {
        display: flex;
        align-items: center;

        .icon-img {
            margin-right: 0.533333rem;
            display: inherit;
        }

        .icon_wrap_text {
            width: 100%;
            // padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            position: relative;

            .icon_wrap_text1 {
                margin-top: -0.3rem;
            }

            .icon_wrap_text2 {
                position: absolute;
                left: 0%;
                top: 15%;
                font-size: 0.35rem;
                color: #C1C1C1;
            }
        }
    }
}

.title {
    text-align: left;
    font-weight: bolder;
    margin-top: 0.5rem;
    font-size: 13px;
    padding-left: 0.666667rem;
}

.title-text {
    font-size: 13px;
    padding-left: 0.666667rem;
}
</style>
