<template>
  <div>
    <!-- <div class="heard">
      <el-form :model="search" ref="headerForm" label-width="110px" size="mini" class="searchForm">
        <el-form-item label="接收时间：" style="width:450px">
          <el-date-picker style="width:90%" v-model="search.time" type="daterange" clearable range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="选择类别：" style="width:300px">
          <el-input v-model="search.codeAndFond" placeholder="请输入全宗代码或全宗名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getData"><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button type="warning" size="mini" @click="Reset"><i class="iconfont icon-sousuo"></i>重置</el-button>
          <el-button type="success" size="mini" @click="receive"><i class="iconfont icon-sousuo"></i>数据接收</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="page">
      <el-row :gutter="40" class="panel-group">
        <el-col class="card-panel-col">
          <div class="card-panel" @click="receive">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="wzjgl" 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>
    <el-dialog v-dialogDrag ref="diaFrom" title="数据接收" :close-on-click-modal="false" :visible.sync="isReceive"
      width="75%" top="10px" :before-close="cancel">
      <div class="receiveBox">
        <el-card :body-style="{ padding: '20px 5px' }" style="width:26%">
          <el-scrollbar wrap-style="overflow-x:hidden;" style="height:1000px">
            <el-tree v-if="isReceive" highlight-current :data="treeData" :props="defaultProps" default-expand-all
              @node-click="handleNodeClick">
              <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.classType === 'L'" 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-card>
        <el-card :body-style="{ padding: '20px 5px' }" style="width:77%">
          <el-form label-width="120px" :model="form">
            <el-form-item label="接收文件：">
              <!-- <el-input clearable v-model="form.filePath" size="mini" style="width:70%"></el-input> -->
              <el-upload :disabled="showBtn" class="upload-demo" :limit="1" accept=".zip" ref="upload" action="#"
                :before-upload="beforeAvatarUpload" :on-change="handleFileChange" :file-list="fileList"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary" :disabled="showBtn" @click="handleUpload">选取接收文件
                </el-button>
                <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
              </el-upload>
            </el-form-item>
            <!-- <el-form-item label="">
              <div class="tips">
                *接收路径为档号所在目录
              </div>
            </el-form-item> -->
          </el-form>
          <div class="btnBox">
            <div style="padding:5px 0">
              <!-- <el-button @click="btnClick(1)" size="mini" type="primary">对比字段</el-button> -->
              <!-- <el-button @click="btnClick(2)" size="mini" type="primary">开始接收</el-button> -->
            </div>
            <!-- <el-table v-loading="dialoding" border size="mini" :data="tableDataDia.list1"
              :max-height="tableDataDia.list2?'400px':'800px'" @cell-click="rowClick($event,1)">
              <el-table-column prop="myNote" align="center" label="接收字段名"></el-table-column>
              <el-table-column align="center" prop="columnName" label="门类字段名"></el-table-column>
              <el-table-column align="center" prop="columnChnName" label="字段中文名"></el-table-column>
              <el-table-column align="center" prop="columnCanNull" label="允许为空">
                <template slot-scope="scope">
                  {{scope.row.columnCanNull==="false"?"否":"是"}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="" label="字段类型">
                <template slot-scope="scope">
                  <div v-for="(item,key) in twoFieldType" :key="key">
                    <div v-if="item.valueInt===scope.row.columnClass"> {{item.label}} </div>
                  </div>
                </template>
              </el-table-column>
            </el-table> -->
            <!-- <el-divider v-if="tableDataDia.list2"></el-divider>
            <el-table v-if="tableDataDia.list2" v-loading="dialoding" border size="mini" :data="tableDataDia.list2"
              max-height="400" @cell-click="rowClick($event,2)">
              <el-table-column prop="myNote" align="center" label="接收字段名"></el-table-column>
              <el-table-column align="center" prop="columnName" label="门类字段名"></el-table-column>
              <el-table-column align="center" prop="columnChnName" label="字段中文名"></el-table-column>
              <el-table-column align="center" prop="columnCanNull" label="允许为空">
                <template slot-scope="scope">
                  {{scope.row.columnCanNull==="false"?"否":"是"}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="" label="字段类型">
                <template slot-scope="scope">
                  <div v-for="(item,key) in twoFieldType" :key="key">
                    <div v-if="item.valueInt===scope.row.columnClass"> {{item.label}} </div>
                  </div>
                </template>
              </el-table-column>
            </el-table> -->
            <el-divider v-if="tableDataDia.list3"></el-divider>
            <el-table v-if="tableDataDia.list3" v-loading="dialoding" border size="mini" :data="tableDataDia.list3"
              max-height="250" @cell-click="rowClick($event,2)">
              <el-table-column prop="myNote" align="center" label="接收字段名"></el-table-column>
              <el-table-column align="center" prop="columnName" label="门类字段名"></el-table-column>
              <el-table-column align="center" prop="columnChnName" label="字段中文名"></el-table-column>
              <el-table-column align="center" prop="columnCanNull" label="允许为空">
                <template slot-scope="scope">
                  {{scope.row.columnCanNull==="false"?"否":"是"}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="" label="字段类型">
                <template slot-scope="scope">
                  <div v-for="(item,key) in twoFieldType" :key="key">
                    <div v-if="item.valueInt===scope.row.columnClass"> {{item.label}} </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag title="选择字段" :close-on-click-modal="false" :visible.sync="xmldia" width="45%" top="10px"
      :before-close="cancels">
      <el-form :model="xmlForm" label-width="110px">
        <el-form-item label="门类表字段">
          <el-input disabled size="mini" v-model="xmlForm.className" clearable style="width:70%"></el-input>
        </el-form-item>
        <el-form-item label="接收字段">
          <el-select size="mini" v-model="xmlForm.xmlName" clearable style="width:70%">
            <el-option v-for="(item,key) in diaXmlList" :key="key" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button size="mini" @click="submit" type="primary">保存</el-button>
          <el-button size="mini" @click="revoke" type="info">撤销</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import {
  receiveContrastField,
  receiveXmlList,
  receiveImport,
  getTableFieldList,
  dataReception,
} from "@/api/dataManagement/dataReception";
import { clearObjValue, dateFormatTs, message } from "@/utils/common";
export default {
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
    twoFieldType: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      search: {
        time: "",
      },
      form: {
        filePath: "",
      },
      params: {},
      isReceive: false,
      // 树形结构数据
      defaultProps: {
        children: "childClass",
        label: "className",
      },
      treeRow: {},
      dialoding: false,
      tableDataDia: {},
      xmlList: {},
      diaXmlList: [],
      xmldia: false,
      xmlForm: {
        className: "",
        xmlName: "",
      },
      tableKey: null,
      fileList: [],
      showBtn: true,
    };
  },
  methods: {
    submit() {
      if (this.tableKey === 1) {
        this.tableDataDia.list1.forEach((item) => {
          if (item.columnChnName === this.xmlForm.className) {
            item.myNote = this.xmlForm.xmlName;
            this.cancels();
          }
        });
      } else {
        this.tableDataDia.list2.forEach((item) => {
          if (item.columnChnName === this.xmlForm.className) {
            item.myNote = this.xmlForm.xmlName;
            this.cancels();
          }
        });
      }
    },
    revoke() {
      if (this.tableKey === 1) {
        this.tableDataDia.list1.forEach((item) => {
          if (item.columnChnName === this.xmlForm.className) {
            item.myNote = "";
            this.cancels();
          }
        });
      } else {
        this.tableDataDia.list2.forEach((item) => {
          if (item.columnChnName === this.xmlForm.className) {
            item.myNote = "";
            this.cancels();
          }
        });
      }
    },
    beforeAvatarUpload(file) {
      const isZIP = file.type === "application/x-zip-compressed";
      if (!isZIP) {
        this.$message.error("只能上传zip格式!");
      }
      return isZIP;
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList;
      let formData = new FormData();
      this.fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      dataReception(this.treeRow.id, formData)
        .then((res) => {
          this.$message.success("上传成功");
          this.cancel();
        })
        .catch((error) => {
          this.$message.error("上传失败！");
          this.cancel();
        });
    },
    btnClick(key) {
      let data = {
        classId: this.treeRow.id,
        filePath: this.form.filePath,
      };
      switch (key) {
        case 1:
          if (JSON.stringify(this.treeRow) === "{}") {
            message("warning", "请选择门类", 3000);
            return;
          }
          if (!this.form.filePath) {
            message("warning", "请输入文件夹全路径", 3000);
            return;
          }
          this.dialoding = true;
          receiveContrastField(data).then((res) => {
            this.dialoding = false;
            this.tableDataDia = res.body;
            receiveXmlList(data).then((res) => {
              this.xmlList = res.body;
            });
          });
          break;
        case 2:
          if (JSON.stringify(this.treeRow) === "{}") {
            message("warning", "请选择门类", 3000);
            return;
          }
          if (!this.form.filePath) {
            message("warning", "请输入文件夹全路径", 3000);
            return;
          }
          if (this.tableDataDia.list3) {
            let val = [];
            this.tableDataDia.list3.forEach((item) => {
              let str =
                item.myNote + "-" + item.columnName + "-" + item.columnChnName;
              val.push(str);
            });
            data.stringList3 = val;
          }
          if (this.tableDataDia.list2) {
            let ele = [];
            this.tableDataDia.list2.forEach((item) => {
              let str =
                item.myNote + "-" + item.columnName + "-" + item.columnChnName;
              ele.push(str);
            });
            data.stringList2 = ele;
          }
          let arr = [];
          this.tableDataDia.list1.forEach((item) => {
            let str =
              item.myNote + "-" + item.columnName + "-" + item.columnChnName;
            arr.push(str);
          });
          data.stringList1 = arr;
          receiveImport(data).then((res) => {
            message("success", "接收成功", 2000);
            this.$router.push(
              "/archives-management/fileManagement/dataBrowsing"
            );
            this.cancel();
          });
          break;
      }
    },
    handleUpload() {},
    rowClick(row, key) {
      this.tableKey = key;
      if (JSON.stringify(this.xmlList) === "{}") {
        message("warning", "请先字段对比", 3000);
        return;
      }
      this.xmlForm.className = row.columnChnName;
      this.xmlForm.xmlName = row.myNote;
      this.diaXmlList = key === 1 ? this.xmlList.list1 : this.xmlList.list2;
      this.xmldia = true;
    },
    getData() {
      this.params = {
        startDate: this.search.time ? dateFormatTs(this.search.time).start : "",
        endDate: this.search.time ? dateFormatTs(this.search.time).end : "",
      };
    },
    handleNodeClick(node) {
      this.treeRow = node;
      this.showBtn = Object.values(node).length ? false : true;
      this.dialoding = true;
      getTableFieldList({
        classId: node.id,
      })
        .then((res) => {
          this.tableDataDia = res.body;
          this.dialoding = false;
        })
        .catch((err) => {
          this.dialoding = false;
        });
    },
    Reset() {
      clearObjValue(search);
    },
    receive() {
      this.isReceive = true;
    },
    cancel() {
      this.isReceive = false;
      this.showBtn = true;
      this.treeRow = {};
      this.tableDataDia = [];
      this.xmlList = {};
      this.fileList = [];
    },
    cancels() {
      this.xmldia = false;
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.searchForm {
  display: flex;
  flex-wrap: wrap;
}

.receiveBox {
  display: flex;
  justify-content: space-around;

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-form-item {
    margin-bottom: 5px;
  }

  .tips {
    color: red;
    letter-spacing: 1px;
    font-weight: 600;
  }

  .btnBox {
    padding: 0 20px;
  }
}

.page {
  padding: 20px 30px;
  background-color: rgb(240, 242, 245);
}

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

  .card-panel:hover {
    box-shadow: 8px 8px 40px rgba(0, 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, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

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

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

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

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

      .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>
