<template>
    <div>
        <LHeader :text="text"></LHeader>
        <!-- 内容列表 -->
        
        <div class="title">2022年4月26日</div> 
        <p class="title-text">巡查发起人：{{assignName}}</p> 
        <p class="title-text">系统提示：请依据当日任务完成当日巡查工作。</p> 
        <div class="con-list">
            <!-- <van-cell-group inset> -->
                <!-- <div class="icon-wrap">
                    <span class="icon-img">
                        <van-image
                            width="35"
                            height="35"
                            style="margin: 0 10px;overflow: hidden; border-radius: 5px;"
                            :src="item.imgUrl"
                        />
                    </span>
                    {{ item.content }}
                </div> -->
                <van-grid :column-num="2" :gutter="10" class="grid-bg">
                    <van-grid-item 
                        v-for="(item, index) in contentList"
                        :key="index"
                        @click="onClick(item)"
                        :icon="item.imgUrl"
                        :text="item.content"
                    />
                </van-grid>
            <!-- </van-cell-group> -->
        </div>
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { postWork } from "@/service/workbench";
import { getFun,postFun } from '@/service/table'
export default {
    name: "danger-patrol",
    components: {
        LHeader
    },
    data() {
        return {
            value:'',
            text: "巡查记录",
            assignName:'',
            contentList: [
                
            ],
            contentLists:[
                {
                    title: "1",
                    imgUrl: require("@/assets/workbench/day_record.png"),
                    content: "日查记录"
                },
                {
                    title: "2",
                    imgUrl: require("@/assets/workbench/week_record.png"),
                    content: "周查记录"
                },
                {
                    title: "3",
                    imgUrl: require("@/assets/workbench/half_month_record.png"),
                    content: "半月查记录"
                },
                {
                    title: "4",
                    imgUrl: require("@/assets/workbench/month_record.png"),
                    content: "月查记录"
                },
                {
                    title: "5",
                    imgUrl: require("@/assets/workbench/quarter_record.png"),
                    content: "季查记录"
                },
                {
                    title: "6",
                    imgUrl: require("@/assets/workbench/year_record.png"),
                    content: "半年查记录"
                },
                {
                    title: "7",
                    imgUrl: require("@/assets/workbench/year_record.png"),
                    content: "年查记录"
                }
            ]
        };
    },
    mounted() {
        this.loading()
    },
    methods: {
        
        loading(){
            getFun("patrol/cycle/list").then((res) => {
                this.assignName=res.data.assignName
                this.contentLists.forEach((x)=>{
                    res.data.cycle.forEach((y)=>{
                        if(x.title==y){
                            this.contentList.push(x)
                        }
                    })
                })
            })
        },
        onClick(val) {
            this.$router.push({
                name: "record-patrol",
                query:{
                    id:val.title,
                    content:val.content
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
// /deep/ .van-grid-item__content--center{
//     background-image:url('../../../../assets/workbench/danger_background.png')
// }
/deep/ .van-icon__image{
    width:2em;
    height: 2em;
}
/deep/ .van-grid-item__text{
    font-size: 0.35rem;
    font-weight: bolder;
}
/* @import url(); 引入css类 */
.van-cell-group--inset {
    // height: 2.266667rem;
    line-height: 2.266667rem;
    font-size: 0.5rem;
    font-weight: bolder;
    margin: 0.266667rem;
    padding-left: 0.666667rem;
    color: #3499ff;
    .icon-wrap {
        display: flex;
        align-items: center;
        .icon-img {
            margin-right: 0.533333rem;
            display: inherit;
        }
    }
}
.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>
