<template>
  <div>
    <!-- <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
      <header-box :search="search" @searchClick="getData" />
    </el-card>
    <el-card :body-style="{ padding: '5px' }">
      <div style="text-align:right;padding:5px 10px">
        <el-button size='mini' type="primary" @click="hookUp">文件夹批量挂接</el-button>
        <el-button size='mini' type="primary" @click="hookUpFile">文件名批量挂接</el-button>
      </div>
      <content-box :tableData='tableData' :loading='tableLoading' :pagination='pagination' @refreshTable="getData" />
    </el-card> -->
    <div class="page">
      <el-row :gutter="40" class="panel-group">
        <el-col class="card-panel-col">
          <div class="card-panel" @click="hookUp">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="wjgd" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text people-text ">
                未入库文件夹批量挂接
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="card-panel-col">
          <div class="card-panel" @click="openJztFile">
            <div class="card-panel-icon-wrapper icon-message">
              <svg-icon icon-class="byrwfp" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text message-text ">
                 未入库文件名批量挂接
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="card-panel-col">
          <div class="card-panel" @click="showSpeedHook">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="wjgd" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text people-text ">
                快速批量挂接
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <bath ref="bath" :bathFlag='bathFlage' @cancel='cancel' /> -->
    </div>
    <hook-up-box :isDiaBox="isDiaBox" ref="hookUpBox" :treeLoading="treeLoading" :treeData="treeData" @cancel="cancel"
      @submit="submitHookUp" @submitwn="submitwn" />
    <hook-jzt-file ref="diaJzt" :visible="isJztFile" :treeLoading="treeLoading" :treeData="treeData" @submit="hookUpJzt" 
      @submitwn="submitwnJzt" @cancel="cancel"/>
    <dia-hook-file :visible="isDiaFile" ref="hookFile" @cancel="cancel" @submit="submitFile">
    </dia-hook-file>
    <dia-type :visible="isDiaType" :fileForm="fileForm" @submit="submitType"></dia-type>
    <!-- 快速批量挂接 -->
    <speed-hook-file ref="speedHookRef" :visible="isShowSpeed" @cancel="cancel" :treeLoading="treeLoading" :treeData="treeData" @submit="speedHook"></speed-hook-file>
    <load v-if="loads" titleLoad="挂接"></load>
    <!-- 快速挂接错误信息-->
    <error-infor :visible="isShowErrorInfor" :errorData="errorData" @cancel="cancel"></error-infor>
  </div>
</template>
<script>
  import headerBox from "./components/header.vue"
  import contentBox from "./components/content.vue"
  import hookUpBox from "./components/hookUpBox.vue"
  import hookJztFile from './components/hookJztFile.vue'
  import diaHookFile from "./components/diaHookFile.vue"
  import ErrorInfor from "./components/showErrorInfo.vue";
  import diaType from "./components/diaType.vue"
  import speedHookFile from "./components/speedHookFile.vue";
  import {
    hookUp,
    hookUpTwo,
    hookUpJzt,
    hookUpXiaoGan,
    hookUpXiaoGanTwo,
    speedhookUpUrl
  } from "@/api/dataManagement/achievementIntroduction"
  import {
    message,
    clearObjValue,
    dateFormatTs
  } from "@/utils/common"
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        isShowErrorInfor:false,
        isShowSpeed:false,
        search: {
          time: "",
        },
        isDiaBox: false,
        isJztFile: false,
        isDiaFile: false,
        isDiaType: false,
        loads: false,
        fileForm: {}, // 文件名挂接form
        errorData:[],
      }
    },
    computed: {
      ...mapState({
        tableData: (state) => state.achievementIntroduction.tableData,
        treeData: (state) => state.achievementIntroduction.treeData,
        pagination: (state) => state.achievementIntroduction.pagination,
      }),
      treeLoading: {
        get() {
          return this.$store.state.achievementIntroduction.loading;
        },
        set(val) {
          this.$store.state.dataImport.achievementIntroduction = val;
        },
      },
      tableLoading: {
        get() {
          return this.$store.state.achievementIntroduction.tableLoading;
        },
        set(val) {
          this.$store.state.achievementIntroduction.tableLoading = val;
        },
      },
    },
    components: {
      headerBox,
      contentBox,
      hookUpBox,
      hookJztFile,
      diaHookFile,
      diaType,
      speedHookFile,
      ErrorInfor
    },
    methods: {
      // 展示批量挂接
      showSpeedHook(){
        this.isShowSpeed = true;
      },
      // 快速批量挂接
      speedHook(val, entityId){
        console.log(111111111);
        this.errorData = [];
        this.loads = true
        const params = {
          localPath: val.localPath,
          mode:val.structure,
          type:val.type,
          entityId,
        }
        speedhookUpUrl(params).then(res => {
          console.log(11111);
          if (res.code === "100") {
            message("success", res.msg, 2000);
            this.$refs.speedHookRef.result = {
              successNum: res.body.successNum,
              falseNum: res.body.falseNum,
            }
          }else if(res.code == "102"){
            console.log(res);
            this.isShowErrorInfor = true;
            this.errorData = res.body.list;
          }else{
            this.$message({type:'error',message:res.msg,showClose:true,duration:0});
          }
        }).catch((error) => {
          this.$message({type:'error',message:error,showClose:true,duration:0});
          this.$refs.speedHookRef.result = {
            successNum: 0,
            falseNum: 0,
          }
        }).finally(() => {
          this.loads = false
        })
      },
      hookUp() {
        const {
          form,
          result
        } = this.$refs.hookUpBox.$options.data()
        this.$refs.hookUpBox.form = form
        this.$refs.hookUpBox.result = result
        this.isDiaBox = true
      },
      openJztFile(){
        this.isJztFile = true
      },
      // 本地上传
      hookUpJzt(val, entityId){
        this.loads = true
        const params = {
          localPath: val.localPath,
          entityId,
        }
        hookUpJzt(params).then(res => {
          if (res.code === "100") {
            message("success", res.msg, 2000);
            this.$refs.diaJzt.result = {
              successNum: res.body.successNum,
              falseNum: res.body.falseNum,
            }
          }else{
            this.$message({type:'error',message:res.msg,showClose:true,duration:0});
          }
        }).catch((error) => {
          this.$message({type:'error',message:error,showClose:true,duration:0});
          this.$refs.diaJzt.result = {
            successNum: 0,
            falseNum: 0,
          }
        }).finally(() => {
          this.loads = false
        })
      },
      // 网络上传
      submitwnJzt(action, query, formData) {
        this.loads = true
        this.$axios.post(action + query, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              "Token": sessionStorage.getItem('token')
            }
          })
          .then(response => {
            if (response.data.code === "100") {
              message("success", response.data.msg, 4000);
              this.$refs.diaJzt.result = {
                successNum: response.data.body.successNum,
                falseNum: response.data.body.falseNum,
              }
              this.$refs.diaJzt.fileList = []
            } else {
              this.$message({type:'error',showClose:true,message:response.data.res,duration:0});
              this.$refs.diaJzt.result = {
                successNum: 0,
                falseNum: 0,
              }
            }
          })
          .catch(error => {
            this.$message({type:'error',showClose:true,message:error,duration:0});
          }).finally(res => {
            this.loads = false
          })
      },
      hookUpFile() {
        this.isDiaFile = true
      },
      getData() {
        this.tableLoading = true
        console.log(this.search.time)
        this.params = {
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
          startDate: this.search.time ? dateFormatTs(this.search.time).start : "",
          endDate: this.search.time ? dateFormatTs(this.search.time).end : ""
        }
        this.$store.dispatch("achievementIntroduction/getData", this.params).catch(err => {})
        this.tableLoading = false
      },
      getTree() {
        this.$store.dispatch("achievementIntroduction/getTree", { className: "档案" })
      },
      cancel() {
        this.isDiaBox = false;
        this.isJztFile = false
        this.isDiaFile = false;
        this.isShowSpeed = false;
        this.isShowErrorInfor = false;
      },
      submitType(type) {
        this.isDiaType = false
        const params = {
          type,
          mode: this.fileForm.mode,
          localPath: this.fileForm.localPath,
          index: this.fileForm.index,
        }
        this.loads = true
        hookUpXiaoGanTwo(params).then(res => {
          if (res.code === '100') {
            this.openType(res)
          }else{
            this.$message({type:'error',showClose:true,message:res.msg,duration:0});
          }
        }).finally(() => {
          this.loads = false
        })
      },
      // 处理挂接结果，图片有重复弹出选择框
      openType(res) {
        if (res.body.success === false) {
          this.fileForm = {
            index: res.body.index,
            mode: res.body.mode,
            localPath: res.body.localPath,
            picName: res.body.picName,
          }
          this.isDiaType = true
        } else {
          message('success', '挂接成功', 3000)
          this.$refs.hookFile.cancel()
        }
      },
      submitwn(action, query, formData) {
        this.loads = true
        this.$axios.post(action + query, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              "Token": sessionStorage.getItem('token')
            }
          })
          .then(response => {
            if (response.data.code === "100") {
              message("success", response.data.msg, 4000);
              this.$refs.hookUpBox.result = {
                successNum: response.data.body.successNum,
                falseNum: response.data.body.falseNum,
              }
              this.$refs.hookUpBox.fileList = []
            } else {
              this.$message({type:'error',showClose:true,message:response.data.msg,duration:0});
              this.$refs.hookUpBox.result = {
                successNum: 0,
                falseNum: 0,
              }
            }
          })
          .catch(error => {
            this.$message({type:'error',showClose:true,message:error,duration:0});
          }).finally(res => {
            this.loads = false
          })
      },
      submitFile(val) {
        this.loads = true
        this.fileForm = val
        hookUpXiaoGan(val).then(res => {
          if (res.code === '100') {
            this.openType(res)
          }else{
            this.$message({type:'error',showClose:true,message:res.msg,duration:0});
          }
        }).finally(() => {
          this.loads = false
        })
      },
      submitHookUp(val, entityId) {
        this.loads = true
        const params = {
          type: val.type,
          mode: val.structure === 2 ? 2 : val.mode, //只有案卷-简化方式 mode传2,其他按选择
          localPath: val.localPath,
          AbSurface: val.AbSurface,
          entityId,
        }
        /*
             简化   案卷            卷内            
        mode 1      选1值传2        1|2
        api  hookUp hookUp     hookUp|hookUpTwo
        */
        const apiUrl = val.mode === 2 ? hookUpTwo : hookUp; //只有卷内-传统方式 调用hookUpTwo
        apiUrl(params).then(res => {
          if (res.code === "100") {
            message("success", res.msg, 2000);
            this.$refs.hookUpBox.result = {
              successNum: res.body.successNum,
              falseNum: res.body.falseNum,
            }
          }else{
            this.$message({type:'error',showClose:true,message:res.msg,duration:0});
          }
        }).catch((error) => {
          this.$refs.hookUpBox.result = {
            successNum: 0,
            falseNum: 0,
          }
          this.$message({type:'warning',showClose:true,message:error,duration:0});
        }).finally(() => {
          this.loads = false
        })
      }
    },
    created() {
      this.getData()
      this.getTree()
    }





  }

</script>
<style lang="scss" scoped>
  .page {
    padding: 20px 30px;
    background-color: rgb(240, 242, 245);
  }

  .panel-group {

    // padding-top: 18px;
    .card-panel-col {
      width: 380px;
      margin-bottom: 20px;
    }

    .card-panel:hover {
      box-shadow: 8px 8px 40px rgba(0, 0, 0, .2);
    }

    .card-panel {
      border-radius: 8px;
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {

        .card-panel-icon-wrapper {
          color: #fff;
        }

        .card-panel-description {
          .people-text {
            color: #40c9c6;
          }

          .message-text {
            color: #36a3f7;
          }
        }


        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        // margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          letter-spacing: 2px;
          height: 108px;
          line-height: 108px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-right: 12px;
        }



        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width:550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }

</style>
