<template>
  <el-dialog v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.1)" v-dialogDrag width="80%" :title="title" :close-on-click-modal="false" :before-close="cancel"
    :visible.sync="diaFlage">
    <el-col :span="8">
      <div class="tree-box" style="padding:10px;">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 220px)">
          <el-tree ref="tree" v-loading="treeLoading" show-checkbox check-on-click-node :data="treeData"
            :props="defaultProps" default-expand-all node-key="id" @check="handleTreeNodeCheck">
            <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" 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>
      </div>
    </el-col>
    <el-col :span="16">
      <el-form :model="form" ref="backDialog" label-width="100px" class="demo-dynamic">
        <p>提示：请先勾选左侧要备份的门类数据！</p>
        <el-form-item label="备份门类" :rules="[{ required: true, message: '请选择备份的门类'}]" prop="entityIds">
          <el-input :disabled="true" clearable v-model="form.entityIds" size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="备份路径" :rules="[{ required: true, message: '请输入备份路径'}]" prop="path">
          <el-input clearable v-model="form.path" size="small">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('backDialog')" size="mini">提交</el-button>
          <el-button type="info" @click="cancel" size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    
  </el-dialog>
</template>
<script>
  import {
    backupDBCategory,
    getTable,
    backupPicture
  } from "@/api/dataManagement/dataBackups"
  import {
    message
  } from '@/utils/common';
  import {
    getTree,
  } from "@/api/archives-management/fileManagement/notRecycleBin.js";
  
  export default {
    props: {
      isType:{  // 区别是条目数据，原文数据
        type:String,
      },
      title: {
        type: String,
        default: () => "数据备份",
      },
      diaFlage: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        defaultProps: {
          label: "className",
          children: "childClass",
        },
        treeData:[],
        treeLoading:false,
        form: {
          entityIds:'',
          path: ""
        },
        loading:false,
      }
    },
    methods: {
      // 复选框勾选
      handleTreeNodeCheck(data,status){
        // 获取 选中的节点数据
        this.form.entityIds = this.$refs.tree.getCheckedKeys(true).join(',')
      },
      // 获取初始化树形结构
      initGetTree() {
        this.treeLoading = true;
        let data = {
          className: "档案",
        };
        getTree(data)
          .then(res => {
            this.treeLoading = false;
            if (res.success) {
              this.treeData = res.body.list;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            this.treeLoading = false;
          });
      },
      cancel() {
        this.$refs['backDialog'].resetFields();
        this.$emit("cancel")
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.isType == 'tm'){
              this.loading = true;
              let params = {
                ...this.form,
                entityIds:this.form.entityIds.split(",")
              }
              backupDBCategory(params).then(res => {
                if(res.code == 100){
                  message("success", "条目数据备份成功", 3000)
                  this.cancel()
                }
              }).finally(()=>{
                this.loading = false;
              })
            }else if(this.isType == 'yw'){
              this.loading = true;
              backupPicture(this.form).then(res => {
                if(res.code == 100){
                  message("success", "原文数据备份成功", 3000)
                  this.cancel()
                }
               
              }).finally(()=>{
                this.loading = false;
              })
            }
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    created(){
      this.initGetTree();
    }

  }

</script>
<style lang="scss" scoped>
  .demo-dynamic {
    padding: 20px 0;
  }

</style>
