<template>
<div style="width:100%;padding:10px 23px; z-index:10;background: rgba(0, 9, 34, 0.6);">
    <el-form ref="form" size="mini" :model="paramForm" :rules="rules" label-width="140px" class="clockIn">
        <el-form-item label="打卡点" prop="address">
            <el-input v-model="paramForm.address" ></el-input>
        </el-form-item>
        <el-form-item label="责任人" prop="user">
            <treeselect :options="hlyList" :normalizer="normalizer" v-model="paramForm.user" :multiple="true" :disable-branch-nodes="true" placeholder="请选择责任人">
            </treeselect>
        </el-form-item>
        <el-form-item style="margin-top: 16%;">
            <el-button @click="close()">取消</el-button>
            <el-button type="primary" @click="submitForm('form')">保存</el-button>
        </el-form-item>
    </el-form>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { postMethodCommon, getMethodCommon } from '../../../../api/common';
export default {
    name: "AddForm",
    props: ['lnglat','clockdata'],
    components: {
        Treeselect
    },
    data() {
        return {
            hlyList:[],
            paramForm:{
                address: '',
                user: []
            },
            rules: {
                user: [
                    { required: true, message: '责任人不能为空', trigger: 'blur' },
                ]
            }
            
        }
    },
    watch:{
        lnglat:function(e){
            this.gethlyList();
        },
        clockdata:function(e){
        }
    },
    created() {
        console.log('clockdata',this.clockdata)
        this.treelist = []
        this.gethlyList()
        
    },
    mounted() {
    
    },
    methods: {
        normalizer(node) {
            node['isDisabled'] = true;  
            if(node.type == '护林员' || node.child.length > 0){
                node['isDisabled'] = false;
            }

            return {
                id: node.id,
                label: node.name,
                children: node.child && node.child.length > 0 ? node.child: 0,
            }
        },
        gethlyList(){
            getMethodCommon("/FireGrid/LoadUsers").then(res =>{
                this.hlyList = res.data
                if(this.clockdata){
                    this.paramForm.address = this.clockdata.pointname
                    this.paramForm.user = this.clockdata.userid.split(',')
                }
                console.log('this.paramForm',this.paramForm)
            })
        },
        submitForm(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if(this.clockdata){
                        let param = {
                            id: this.clockdata.id,
                            lng: this.clockdata.lng,
                            lat: this.clockdata.lat,
                            pointname: this.paramForm.address,
                            userid: this.paramForm.user
                        }
                        postMethodCommon("/FireGrid/EditCheckPoint", param).then(response => {
                            if (response.code == 200) {
                                this.$emit("clockInSuccess");
                                this.$emit("close");
                                this.$message({
                                    type: "success",
                                    message: response.message
                                })
                            }
                        })
                    }else{
                        let param = {
                            id: 0,
                            lng: this.lnglat.lngLat.lng,
                            lat: this.lnglat.lngLat.lat,
                            pointname: this.paramForm.address,
                            userid: this.paramForm.user
                        }
                        postMethodCommon("/FireGrid/AddCheckPoint", param).then(response => {
                            if (response.code == 200) {
                                this.$emit("clockInSuccess");
                                this.$emit("close");
                                this.$message({
                                    type: "success",
                                    message: response.message
                                })
                            }
                        })
                    }
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        close() {
            this.$emit("close");
        }
    }
}
</script>
<style scoped>
::v-deep .el-form-item__label {
    color: #fff;
}   
::v-deep .vue-treeselect__control{
    background: rgba(0, 9, 34, 1);
    color: #fff;
}
::v-deep .vue-treeselect__single-value{
    color: #fff;
}
::v-deep .el-input__inner {
    background: rgba(0, 9, 34, 1);
    color: #fff;
    height: 36px;
  }
</style>