<template>
  <el-dialog v-dialogDrag ref="diaFrom" title="文件夹批量挂接" :close-on-click-modal="false" :visible.sync="isDiaBox"
    width="70%" top="10px" :before-close="cancel">
    <div class="diaBox">
      <el-card style="width:30%;">
        <div slot="header">
          <span style="font-weight:bold;">档案类别</span>
        </div>
        <div style="height:770px">
          <el-scrollbar wrap-style="overflow-x:hidden;" style="height:100%">
            <el-tree v-loading="treeLoading" ref="tree" highlight-current :data="treeData" :props="defaultProps"
              default-expand-all @node-click="handleNodeClick" 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" 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-card>
      <el-card style="width:69%">
        <div slot="header">
          <span style="font-weight:bold;">文件上传</span>
        </div>
        <el-form ref="form" label-position="top" size="mini" :model="form" label-suffix=":" label-width="80px">
          <el-form-item label="门类结构">
            <el-radio-group v-model="form.structure" size="mini">
              <el-radio border :label="1">简化</el-radio>
              <el-radio border :label="2">案卷</el-radio>
              <el-radio border :label="3">卷内</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
          <el-form-item label="挂接方式">
            <el-radio-group v-model="form.mode" size="mini">
              <el-radio border :label="1">简化方式</el-radio>
              <el-radio border :label="2" v-show="form.structure === 3">传统方式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
          <el-form-item label="处理方式">
            <el-radio-group v-model="form.type" size="mini">
              <el-radio border :label="1">删除后添加</el-radio>
              <el-radio border :label="2">追加</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
          <el-form-item label="是否AB面">
            <el-radio-group v-model="form.AbSurface" size="mini">
              <el-radio border label="否">否</el-radio>
              <el-radio border label="是">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
          <el-form-item label="原文路径">
            <el-radio-group v-model="form.uploadType" size="mini">
              <el-radio border :label="1">网络上传</el-radio>
              <el-radio border :label="2">本地上传</el-radio>
            </el-radio-group>
            <div style="display:flex;margin-top:15px;" v-show="form.uploadType===2">
              <span style="width:115px;">文件夹全路径</span>
              <el-input v-model.trim="form.localPath" placeholder="请输入文件夹全路径"></el-input>
            </div>
            <div style="color:red;margin-left:95px;" v-show="form.uploadType===2">原文挂接路径为 档号所在目录</div>
          </el-form-item>
          <el-form-item v-show="form.uploadType===2">
            <el-button type="primary" size="mini" @click="submit('form')">
              开始挂接
            </el-button>
          </el-form-item>
          <el-form-item v-show="form.uploadType===1">
            <el-upload class="upload-demo" :limit="1" accept=".zip" ref="upload" action="#"
              :before-upload="beforeAvatarUpload" :on-remove="handleRemove" :on-change="handleFileChange"
              :file-list="fileList" :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-divider />
        <div class="result-box">
          <div>总挂接数量<span style="color:#409EFF;">{{result.successNum + result.falseNum}}</span></div>
          <div>成功数量<span style="color:#67C23A;">{{result.successNum}}</span></div>
          <div>失败数量<span style="color:#F56C6C;">{{result.falseNum}}</span></div>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
  import {
    message,
    URL_PREFIX
  } from "@/utils/common";
  export default {
    props: {
      isDiaBox: {
        type: Boolean,
        default: () => false,
      },
      treeData: {
        type: Array,
        default: () => [],
      },
      treeLoading: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        action: "",
        defaultProps: {
          label: "className",
          children: "childClass",
        },
        form: {
          structure: 1,
          mode: 1,
          type: 1,
          AbSurface: "否",
          uploadType: 2,
          localPath: 'D:\\demo'
        },
        entityId: '',
        result: {
          successNum: 0,
          falseNum: 0,
        },
        fileList: [],
        actionUrldw: URL_PREFIX + "/point-strategy/v/import/hookUpNet"
      }
    },
    methods: {
      handleFileChange(file, fileList) {
        this.fileList = fileList;
      },
      submitUpload() {

        if (!this.entityId) {
          message("warning", "请先选择实体!", 3000)
          return
        }
        if (!this.fileList.length) {
          message("warning", "请先添加要上传zip包!", 3000)
          return
        }
        let formData = new FormData();
        // 将上传的文件放到数据对象中 
        this.fileList.forEach(file => {
          formData.append('file', file.raw);
        });
        const query = '?entityId=' + this.entityId +
          '&mode=' + 1 +
          '&type=' + this.form.type +
          '&AbSurface=' + this.form.AbSurface
        this.action = this.actionUrldw
        this.$emit("submitwn", this.action, query, formData);
      },
      handleRemove(file, fileList) {},
      beforeAvatarUpload(file) {
        const isZIP = file.type === 'application/x-zip-compressed';
        if (!isZIP) {
          this.$message.error('只能上传zip格式!');
        }
        return isZIP
      },
      cancel() {
        this.$refs.tree.setCurrentKey(null)
        this.$emit("cancel")
      },
      handleNodeClick(data) {
        this.entityId = data.id;
      },
      submit(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (!this.entityId) {
              message("warning", "请选择门类", 2000);
              return false;
            }
            if (!this.form.localPath) {
              message("warning", "请输入文件夹全路径", 2000);
              return false;
            }
            this.$emit("submit", this.form, this.entityId);
          } else {
            return false;
          }
        });
      }
    },
  }

</script>
<style lang="scss" scoped>
  .diaBox {
    display: flex;
    justify-content: space-around;

    .result-box {
      display: flex;
      font-weight: 600;

      div {
        width: 33%;
        text-align: center;

        span {
          margin: 0 10px;
        }
      }
    }
  }

</style>
