<template>
    <!-- 离线接收 -->
    <el-dialog v-dialogDrag ref="diaFrom" title="接收" :close-on-click-modal="false" :visible.sync="visible"
    width="45%" top="10px" :before-close="cancel">
        <el-form :model="formParams" ref="ruleForm" label-width="110px" :rules="rules">
            <el-form-item label="接收方式：" prop="type">
                <el-radio-group v-model="formParams.type">
                    <el-radio :label="1">本地上传</el-radio>
                    <el-radio :label="0">服务器地址</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="formParams.type==1">
                <el-form-item label="选择文件：" prop="file">
                    <el-upload
                        class="upload-demo"
                        action="#"
                        :auto-upload="false"
                        accept=".zip"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-change="handleFileChange"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="服务器地址：" prop="path">
                    <el-select style="width:100%;" v-model="formParams.path" placeholder="请选择">
                        <el-option
                            v-for="item in serverOption"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </template>
            <el-form-item label="选择门类：" prop="classId">
                <el-cascader
                    style="width:100%;"
                    ref="cascaderRef"
                    v-model="formParams.classId"
                    :options="treeData"
                    :show-all-levels="false"
                    :props="{value: 'id',label: 'className',children: 'childClass'}"
                    @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="移交单位：" prop="handedOver">
                <el-input v-model="formParams.handedOver" placeholder="移交单位"></el-input>
            </el-form-item>
            <el-form-item label="接收单位：" prop="receivingUnit">
                <el-input v-model="formParams.receivingUnit" placeholder="接收单位"></el-input>
            </el-form-item>
            <el-form-item label="内容描述：">
                <el-input type="textarea" v-model="formParams.contentDescription"></el-input>
            </el-form-item>
            <el-form-item label=" ">
                <el-button size="mini" @click="handleClick('ruleForm')" type="primary">确定</el-button>
                <el-button size="mini" @click="cancel" type="info">取消</el-button>
            </el-form-item>
        </el-form>
  </el-dialog>
</template>

<script>
  import {
    message,
    URL_PREFIX
  } from "@/utils/common";
 import {getTree} from "@/api/archives-management/fileManagement/notStoredArchives.js";
 import {getFindList} from "@/api/system-management/templateSetting.js";
export default{
    name:'OffReceiveModal',
    props:{
        visible:{
            type:Boolean,
            default:()=>false
        },
        formParams:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return {
            serverOption:[], // 服务器地址
            className:'', // 门类label
            classId:'', // 门类classId
            fileList:[], // 文件
            treeData:[],
            rules:{
                type: [
                    { required: true, message: '请选择接收方式', trigger: 'blur' },
                ],
                handedOver:[
                    { required: true, message: '请输入移交单位', trigger: 'blur' },
                ],
                receivingUnit:[
                    { required: true, message: '请输入接收单位', trigger: 'blur' },
                ],
                classId:[
                    { required: true, message: '请选择门类', trigger: 'change' }
                ],
                path:[
                    { required: true, message: '请输入服务器地址', trigger: 'change' }
                ]
            }
        }
    },
    mounted(){
        this.intTree();
        this.getServerPath();
    },
    methods:{
        // 获取服务器地址
        getServerPath(){
            getFindList({
                type: "url",
            }).then((res) => {
                this.serverOption = res.body.list;
            });
        },
        handleChange(value){
            const obj = this.$refs['cascaderRef'].getCheckedNodes()
            this.classId = obj[0].data.id;
            this.className = obj[0].data.className;
           // this.classId = value[value.length - 1];
            // 拿到label名称

        },
        // 获取门类数据
        intTree() {
            let data = {
            className: "档案"
            };
            getTree(data).then(res => {
                let arr = [];
                arr = this.getTreeData(res.body.list);
                this.treeData = res.body.list;
            })
        },
        // 确定按钮
        handleClick(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.formParams.type==1){ // 本地
                        if(this.fileList.length==0){
                            message('warning','请选上传的文件',3000);
                            return;
                        }
                        let formData = new FormData();
                        // 将上传的文件放到数据对象中 
                        this.fileList.forEach(file => {
                            formData.append('file', file.raw);
                        });
                        const action = URL_PREFIX + "/point-strategy/v/receive/offlineReceive";
                        let query = '?classId=' + this.classId+'&className='+this.className+'&contentDescription='+this.formParams.contentDescription
                        +'&handedOver='+this.formParams.handedOver+'&receivingUnit='+this.formParams.receivingUnit;
                        this.$emit("clickSubmit",action,query,formData);
                    }else{ // 服务器
                        let _params = {
                            classId:this.classId,
                            className:this.className,
                            contentDescription:this.formParams.contentDescription,
                            handedOver:this.formParams.handedOver,
                            classPath:this.formParams.path,
                            receivingUnit:this.formParams.receivingUnit
                        }
                        this.$emit("clickServe",_params);
                    }
                } else {
                console.log("error submit!!");
                return false;
                }
            });
        },
        cancel(){
            this.$emit('clickCancel');
        },
        // 处理数据
        getTreeData(data) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].childClass.length < 1) {
                    // 最后一级没有数据将children变成undefined
                    data[i].childClass = undefined;} else {
                    // children不为空时继续调用该方法
                    this.getTreeData(data[i].childClass);
                }
            }
            return data;
        },
        handleRemove(file, fileList) {
            //console.log(file, fileList);
        },
        handlePreview(file) {
            //console.log(file);
        },
        handleFileChange(file, fileList) {
            this.fileList = fileList;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        // beforeAvatarUpload(file) {
        //     const isZIP = file.type === 'application/x-zip-compressed';
        //     if (!isZIP) {
        //     this.$message.error('只能上传zip格式!');
        //     }
        //     return isZIP
        // },
    },
}
</script>

<style lang="scss" scoped>
.tips{
    border: 1px dashed #e88f21;
    padding: 10px;
    background-color: #f2e7d8;
}
</style>