<template>
    <el-dialog  title="新建统计任务" top="10px" :visible.sync="visible" width="50%" v-dialogDrag :close-on-click-modal="false"
      :before-close="cancel">
      <div class="dia-box" >
        <el-form :model="formParams" label-width="110px" :rules="rules" ref="ruleForm">
            <el-form-item label="任务名称:" prop="batchNo">
                <el-input v-model="formParams.batchNo" placeholder="请输入任务名称"></el-input>
            </el-form-item>
            <el-form-item label="类型:" prop="type">
                <el-radio-group v-model="formParams.type">
                    <!-- <el-radio :label="0">全部</el-radio> -->
                    <el-radio :label="0">未入库</el-radio>
                    <el-radio :label="1">已入库</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="选择门类:" prop="classId">
                <el-scrollbar wrap-style="overflow-x:hidden;" style="height:400px">
                    <el-tree v-loading="treeLoading" ref="tree" check-on-click-node show-checkbox default-expand-all
                    :data="treeData" :props="defaultProps" @check="handleCheck" node-key="id">
                    <span slot-scope="{ node, data }" class="custom-tree-node">
                        <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)"
                        v-if="data.childClass.length > 0" class="iconfont icon-folder-open-fill" />
                        <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
                        class="iconfont icon-wenjian" />
                        <span>{{ node.label }}</span>
                    </span>
                    </el-tree>
                </el-scrollbar>
            </el-form-item>
        </el-form>
        <div style="text-align:right;margin:15px 0 20px;">
            <el-button size="mini" @click="handleClickBtn('ruleForm')" type="primary">开始统计</el-button>
            <el-button size="mini" @click="cancel" type="info">取消</el-button>
        </div>
      </div>
    </el-dialog>
</template>

<script>
    import { message } from "@/utils/common";
    import { getTree } from "@/api/archives-management/fileManagement/notStoredArchives.js";
    export default{
        props:{
            visible:{
                type:Boolean,
                default:()=>false
            }
        },
        data(){
            return {
                rules:{
                    batchNo: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' },
                    ]},
                treeLoading:false,
                treeData:[],
                checkedKeys:[],
                defaultProps: {
                    children: "childClass",
                    label: "className",
                },
                formParams:{
                    batchNo:'',
                    type:0,
                }
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.initGetTree();
            })
            
        },
        methods:{
            // 获取初始化树形结构
            async initGetTree() {
                this.treeLoading = true;
                let data = {
                    className: "档案",
                };
                getTree(data).then((res) => {
                    this.treeLoading = false;
                    if (res.success) {
                        this.treeData = res.body.list;
                    } else {
                        message('error',res.msg,3000)
                    }
                    })
                    .catch((err) => {
                    this.treeLoading = false;
                });
            },
            handleCheck(data, { checkedKeys }) {
                this.checkedKeys = checkedKeys;
            },
            handleClickBtn(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = {
                            batchNo:this.formParams.batchNo,
                            classIds:this.checkedKeys.join(","),
                            type:this.formParams.type
                        }
                        this.$emit("clickSubmit",params);
                    } else {
                        console.log("error submit!!");
                    return false;
                    }
                });
            },
            cancel(){
                this.formParams.taskName = "";
                this.$emit('clickCancel');
            }
        }
    }
</script>