<template>
<div class='find-source-container'>
    <div class="title">设置查找类型
        <div class="all-checkbox" @click="selectAll">
            <div class="checkbox" >
                <i class="el-icon el-icon-check"  v-show="checkAll"></i>
            </div>
             &nbsp;&nbsp;&nbsp;全选
        </div>
    </div>
    <div class="content-container">
        <div class="item" v-for="(item,index) in checkOptions" :key="index">
            <div class="checkbox" @click="selectOne(index)">
                <i class="el-icon el-icon-check" v-show="item.checked"></i>
            </div>
            <div class="label"> {{ item.label }} </div>
        </div>
    </div>
    <div class="operate-container">
        <el-button type="primary" size="small" style="margin-right:12px;" @click="submit">确定</el-button>
    </div>
</div>
</template>

<script>

export default {
   components: {},
   props:[],
   data() {
    return {
        checkAll:false,
        checkedList:[],
        checkOptions:[
            {
                label:"护林员",
                checked:false,
                tableRef:"hulinyuan"
            },
            {
                label:"消防员",
                checked:false,
                tableRef:"xiaofangyuan"
            },{
                label:"网格员",
                checked:false,
                tableRef:"wanggeyuan"
            },
            {
                label:"水库",
                checked:false,
                tableRef:"shp_1686208472"
            },{
                label:"蓄水池",
                checked:false,
                tableRef:"shp_1686209056"
            },{
                label:"塘坝",
                checked:false,
                tableRef:"shp_1686208946"
            },{
                label:"防火驿站",
                checked:false,
                tableRef:"shp_1686204679"
            },{
                label:"护林点",
                checked:false,
                tableRef:"shp_1686204804"
            },{
                label:"检查点",
                checked:false,
                tableRef:"shp_1686204937"
            },{
                label:"检查站",
                checked:false,
                tableRef:"shp_1686205018"
            },{
                label:"瞭望台",
                checked:false,
                tableRef:"shp_1686205091"
            },{
                label:"向导",
                checked:false,
                tableRef:"shp_1686205251"
            },{
                label:"物资储备",
                checked:false,
                tableRef:"shp_1686205187"
            },{
                label:"驻防队伍",
                checked:false,
                tableRef:"shp_1692148217"
            },{
                label:"视频监控",
                checked:false,
                tableRef:"monitornest"
            }
        ],
        
    };
   },
   computed: {},
   watch: {},
   methods: {
    selectAll(){
        this.checkAll = !this.checkAll
        if(this.checkAll){
            this.checkOptions.forEach((item,index)=>{
                this.checkOptions[index].checked = true
            })
        }else{
            this.checkOptions.forEach((item,index)=>{
                this.checkOptions[index].checked = false
            })
        }
    },
    selectOne(index){
        this.checkOptions[index].checked = !this.checkOptions[index].checked
    },
    submit(){
        let resultArr = [];
        this.checkOptions.forEach((item,index)=>{
            if(item.checked){
                resultArr.push(item);
            }
        })
        this.$emit("setFilterOptions",resultArr)
    }
   },
   created() {
   
   },
   mounted() {
    
   },
   destroyed() {
   
   },
}
</script>

<style scoped>
.find-source-container{
    width:100%;
    height:100%;
    background-size:100% 100%;
    background:url(/img/find_source_bg.png);
    background-repeat: no-repeat;
}
.title{
    height:60px;
    line-height:60px;
    font-size:20px;
    text-indent: 12px;
    color:#fff;
}

.title .all-checkbox{
    height:40px;
    padding:10px;
    line-height:36px;
    float:right;
    font-size:14px;
    margin-right:12px;
    text-indent:0px;
    cursor:pointer;
}
.content-container{
    width:100%;
    height: calc( 100% - 100px);

}

.content-container .item{
    width:120px;
    height:42px;
    line-height:34px;
    padding:0px 8px;
    float:left;
    background:#0E2320;
    border:1px solid #1C4D49;
    border-radius:3px;
    margin:6px;
    cursor: pointer;
}
 .checkbox{
    width:16px;
    height:16px;
    border:1px solid #07A0AD;
    background:#0F3D41;
    float:left;
    padding:0px;
    line-height:16px;
    text-align: center;
    color:#E8A700;
    font-weight: bold;
}

.content-container .item .label{
    font-size:14px;
    color:#E8A700;
}
.operate-container{
    width:100%;
    height:40px;
    text-align: right;
    text-indent: 12px;
}
</style>