<template>
  <div class="page">
    <!-- <div class="heardBox" :style="{backgroundImage:`url(${bgImg})`, 
     backgroundRepeat:'no-repeat', 
     backgroundPosition:'center', 
     backgroundSize: 'cover'}">
      <div class="heardTitle">全文检索</div>
      <div class="js">
        <el-input size="small" placeholder="请输入要检索的关键字" clearable v-model="search.fieldName"></el-input>
        <el-button @click="searchFul" size="small" type="primary">检索</el-button>
      </div>
      <div class="jss">
        <el-radio size="medium" v-model="radio" label="1">在标题中检索</el-radio>
        <el-radio size="medium" v-model="radio" label="2">在原文中检索</el-radio>
      </div>
    </div> -->
    <div v-if="false" style="text-align: right;padding: 10px 20px;">
      <el-popconfirm title="确定删除全部吗？" icon-color="red" @confirm="delAll">
        <el-button slot="reference" size="mini">全部删除</el-button>
      </el-popconfirm>
    </div>
    <!-- <div class="detailsBox">
      <div v-for="(item,key) in tableData" :key="key" class="details">
        <div class="title" @click="titleTitle(item)">{{item.maintitle}}</div>
        <div class="content">
          <div class="contentOne">
            全宗号：
            <span>{{item.fondsNo}}</span>
          </div>
          <div class="contentTwo">
            {{item.type | titleWorld}}
            <span>{{item.archiveNo}}</span>
          </div>
        </div>
        <div>
          <el-button @click="btnClick(1,item)" style="font-weight:600" size="mini" type="text">电子借阅</el-button>
          <el-button v-if="item.type!=3" @click="btnClick(2,item)" style="font-weight:600" size="mini" type="text">
            实体档案借阅</el-button>
        </div>
      </div>
    </div> -->
    <div class="content-box box">
      <div class="tree-box">
        <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 120px)">
          <el-tree ref="tree" v-loading="treeLoading" show-checkbox check-on-click-node :data="treeData"
            :props="defaultProps" default-expand-all 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>
      <div class="resize"> ⋮</div>
      <div class="form-box">
        <el-form :inline="true" :model="search" ref="headerForm" size="mini" label-width="85px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="标题:">
                <el-input style="width:170px" v-model.trim="search.keyword" placeholder="请输入关键字" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="原文:">
                <el-input style="width:170px" v-model.trim="search.keyword2" placeholder="请输入关键字" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="档号:">
                <el-input style="width:170px" v-model="search.keyword3" placeholder="请输入档号" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="归档年度:">
                <el-input style="width:170px" v-model="search.keyword4" placeholder="请输入归档年度" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="责任者:">
                <el-input v-model="search.keyword5" placeholder="请输入责任者" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
             <el-form-item label="全宗号:">
                <el-select v-model="search.keyword6" clearable placeholder="请选择">
                  <el-option
                    v-for="item in fondsList"
                    :key="item.fondscode"
                    :label="item.codeName"
                    :value="item.fondscode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row> 
            <el-col :span="8" :offset="16">
              <el-form-item label=" ">
                <el-button type="primary" size="mini" @click="searchFul"><i class="iconfont icon-sousuo"></i>检索
                </el-button>
                <el-button type="info" size="mini" @click="ResetForm">重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table border :data="tableData" max-height="550px" tooltip-effect="dark">
          <el-table-column prop="maintitle" label="题名" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="fondsNo" label="全宗号" align="center" show-overflow-tooltip width="100px">
            <template slot-scope="scope">
              {{ (fondsList.filter(f => f.fondscode === scope.row.fondsNo)[0] || {}).codeName || scope.row.fondsNo}}
            </template>
          </el-table-column>
          <el-table-column prop="archiveNo" label="档号" align="center" show-overflow-tooltip width="220px">
          </el-table-column>
          <el-table-column prop="responsibleby" label="责任者" align="center" show-overflow-tooltip width="100px">
          </el-table-column>
          <el-table-column prop="filingYear" label="归档年度" align="center" show-overflow-tooltip width="90px">
          </el-table-column>
          <el-table-column prop="fileContent" label="类型" align="center" show-overflow-tooltip width="80px">
            <template slot-scope="scope">
              {{scope.row.type | archiveType}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="215px">
            <template slot-scope="scope">
              <el-button @click="titleTitle(scope.row)" style="font-weight:600" size="mini" type="text">详情</el-button>
              <el-button @click="btnClick(1,scope.row)" style="font-weight:600" size="mini" type="text">电子借阅</el-button>
              <el-button v-if="scope.row.type!=3" @click="btnClick(2,scope.row)" style="font-weight:600" size="mini"
                type="text">
                实体档案借阅</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-show="tableData.length" @current-change="handleCurrentChange" @size-change="handleSizeChange"
          layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
          :current-page="pagination.pageNum" :total="pagination.total">
        </el-pagination>
      </div>
    </div>
    <loading-tem :loadingStatus='loadingStatus' />
    <dia-detial :titleKey="titleKey" :daStatus='daStatus' :diaObj='diaObj' :fondsList="fondsList" @cancel="cancel" />
    <electronics ref="electronics" :btnRow="btnRow" :eleStatus="eleStatus" @cancel="cancel" />
    <entity ref="entity" :btnRow="btnRow" :entityStatus="entityStatus" @cancel="cancel" />
  </div>
</template>
<script>
  import {
    getOneTable,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  // import { getTree } from "@/api/dataManagement/dataImport"
  import {
    getTree,
  } from "@/api/archives-management/fileManagement/notRecycleBin.js";
  import {
    mapState
  } from "vuex";
  import {
    clearObjValue,
    message,
    dragControllerDiv,
    getCurrentTime
  } from '@/utils/common';
  import {
    deleteAndCreateIndex,
    checkEntityBorrow,
    selectById,
    entityBorrowing
  } from "@/api/archiveUtilize/archivesRetrieval/fullTextSearch"
  import {
    getFondWithPage
  } from "@/api/system-management/allAdministration";
  import diaDetial from "../fullTextSearch/components/diaDetial.vue"
  import electronics from "../fullTextSearch/components/electronics.vue"
  import entity from "../fullTextSearch/components/entity.vue"
  export default {
    filters: {
      titleWorld(status) {
        const statusMap = {
          1: "档号",
          2: "案卷级档号",
          3: "文件级档号",
        };
        return statusMap[status];
      },
      archiveType(status) {
        const statusMap = {
          1: "简化",
          2: "案卷",
          3: "卷内",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        radio: "1",
        titleKey: 1,
        search: {
          keyword: '',
          keyword2: '',
          keyword3: "",
          keyword4: "",
          keyword5: "",
          keyword6: "",
        },
        params: {},
        diaObj: {},
        fondsList: [],
        daStatus: false, //详情
        eleStatus: false, //电子借阅
        entityStatus: false, //实体借阅
        btnRow: {},
        treeLoading: false,
        treeData: [],
        defaultProps: {
          label: "className",
          children: "childClass",
        },
      }
    },
    components: {
      diaDetial,
      electronics,
      entity
    },
    computed: {
      ...mapState({
        pagination: (state) => state.fullTextSearch.pagination,
        showButtons: (state) => state.fullTextSearch.showButtons,
      }),
      tableData: {
        get() {
          return this.$store.state.fullTextSearch.tableData;
        },
        set(val) {
          this.$store.state.fullTextSearch.tableData = val;
        },
      },
      loadingStatus: {
        get() {
          return this.$store.state.fullTextSearch.loadingStatus;
        },
        set(val) {
          this.$store.state.fullTextSearch.loadingStatus = val;
        },
      },
      bgImg() {
        return require('@/assets/img/retrieval.png')
      }
    },
    methods: {
      ResetForm() {
        clearObjValue(this.search)
      },
      // 获取初始化树形结构
      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;
          });
      },
      btnClick(key, item) {
        let data = {
          id: item.recId,
          tableName: item.tableName
        }
        selectById(data).then(res => {
          this.btnRow = item
          switch (key) {
            case 1:
              this.$refs.electronics.form = {
                applyUserId: sessionStorage.getItem("userid"),
                applyUserName: sessionStorage.getItem("username"),
                applyTime: getCurrentTime(),
                rec_nums: 1,
                recIds: item.recId,
                applyReason: "",
                returnDate: "",
                useStyle: "",
                expressType: "13",
                tableName: item.tableName,
                tableType: "formal",
                className: item.className,
                classId: item.classId,
                type: item.type,
                originalTextNums: res.body.list[0].archive_file_num
              }
              this.eleStatus = true
              break;
            case 2:
              /* let info = {
                id: this.btnRow.recId
              } */
              this.$refs.entity.form = {
                applyUserId: sessionStorage.getItem("userid"),
                applyUserName: sessionStorage.getItem("username"),
                applyTime: getCurrentTime(),
                rec_nums: 1,
                recIds: item.recId,
                applyReason: "",
                returnDate: "",
                useStyle: "",
                expressType: "7",
                tableName: item.tableName,
                tableType: "formal",
                className: item.className,
                classId: item.classId,
                originalTextNums: res.body.list[0].archive_file_num
              }
              let info = {
                ids: this.btnRow.recId,
                tableName: this.btnRow.tableName,
              }
              checkEntityBorrow(info).then(res => {
                this.entityStatus = true
              })
              /* entityBorrowing(info).then(res => {
                if (res.msg === '已经借阅，请查看实体借阅') {
                  message('warning', '该实体档案已借出,请联系档案管理员', 2000)
                } else {
                  this.entityStatus = true
                }

              }) */
              break;
          }
        })
      },
      delAll() {
        const params = {
          indexName: 'xinchuang'
        }
        deleteAndCreateIndex(params).then(res => {
          if (res.code === '100') {
            message('success', '删除成功', 2000)
            this.searchFul()
          }
        })
      },
      cancel() {
        this.daStatus = false
        this.eleStatus = false
        this.entityStatus = false
      },
      titleTitle(val) {
        this.titleKey = val.type
        let params = {
          id: val.recId,
          tableName: val.tableName
        };
        selectById(params).then(res => {
          if (res.body.list.length) {
            this.diaObj = res.body.list[0]
            this.daStatus = true
          } else {
            message("warning", '该档案不存在', 3000)
          }
        })
      },
      getFonds() {
        getFondWithPage({
          limit: 1000
        }).then(res => {
          this.fondsList = res.body.list;
        });
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.searchClick()
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.searchClick()
      },
      searchFul() {
        this.pagination.pageNum = 1;
        this.searchClick()
      },
      searchClick() {
        this.loadingStatus = true
        this.params = {
          indexName: "xinchuang",
          fieldName: this.search.keyword ? 'maintitle' : '',
          keyword: this.search.keyword,
          fieldName2: this.search.keyword2 ? 'fileContent' : '',
          keyword2: this.search.keyword2,
          fieldName3: this.search.keyword3 ? 'archiveNo' : "",
          keyword3: this.search.keyword3,
          fieldName4: this.search.keyword4 ? 'filingYear' : "",
          keyword4: this.search.keyword4,
          fieldName5: this.search.keyword5 ? 'responsibleby' : "",
          keyword5: this.search.keyword5,
          fieldName6: this.search.keyword6 ? 'fondsNo' : "",
          keyword6: this.search.keyword6,
          entityIds: this.$refs.tree.getCheckedKeys(true).join(','),
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
          type: 'dangan'
        }
        this.$store.dispatch("fullTextSearch/getData", this.params).catch(err => {
          this.loadingStatus = false
        })
      }
    },
    created() {
      this.getFonds()
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.$store.dispatch("fullTextSearch/getButtonList", btnData);
      this.initGetTree()
    },
    mounted() {
      dragControllerDiv()
    },
    beforeDestroy() {
      this.tableData = []
    }
  }

</script>
<style lang='scss' scoped>
  .page {
    padding: 5px;
    height: 100%;
    background: rgb(235, 235, 235);

    .heardBox {
      height: 180px;
      border-radius: 8px;

      .heardTitle {
        text-align: center;
        padding: 20px 0 30px 0;
        letter-spacing: 18px;
        color: #fff;
        font-weight: 600;
        font-size: 22px;
      }

      .js {
        margin: 0 auto;
        width: 31%;
        display: flex;
        justify-content: space-around;
      }

      .jss {

        padding: 20px 0;

        margin: 0 auto;
        width: 31%;
        display: flex;
        justify-content: space-around;

        ::v-deep .el-radio__label {
          letter-spacing: 2px;
          color: rgb(22, 22, 22);
          // font-weight: 600;
          // font-size: 16px;
        }
      }

      .keyword {
        display: flex;
        justify-content: space-between;
        background: rgb(255, 255, 255);
        margin: 10px auto;
        color: #179ef1;
        font-weight: 600;
        font-size: 14px;
        // border: 1px solid red;
        padding: 6px;
        width: 31%
      }
    }

    .content-box {
      padding-top: 5px;
      display: flex;
      justify-content: space-around;

      .tree-box {
        width: 20%;
        border-radius: 10px;
        background: #fff;
      }

      .form-box {
        width: 78%;
        height: calc(100vh - 105px);
        overflow-y: auto;


        .el-form {
          // display: flex;
          // flex-wrap: wrap;

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

          .btn {
            margin-left: 10px;
          }
        }

      }
    }

    .detailsBox {
      padding: 4px 0 0 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .details {
        width: 49%;
        background: #fff;
        margin: 5px;
        border-radius: 8px;
        padding: 16px 16px 10px 16px;


        .title {
          font-size: 17px;
          letter-spacing: 2px;
          font-weight: 600;
          padding-bottom: 10px;
          cursor: pointer;
        }

        .content {
          display: flex;
          padding: 2px 0 5px 0;

          .contentOne {
            padding: 0 15px 0 0;
            font-size: 14px;
            letter-spacing: 1px;


            span {
              font-weight: 600;
              font-size: 12px;
              letter-spacing: 1px;

            }
          }

          .contentTwo {
            padding: 0 15px 0 0;
            font-size: 15px;

            span {
              font-weight: 600;
              font-size: 13px;
              letter-spacing: 1px;

            }
          }
        }
      }

      .details:hover {
        background: rgba(170, 190, 253, 0.5);
      }
    }

  }

</style>
