<template>
  <div class="page" style="overflow-x: hidden">
    <!-- <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> -->
    <!-- <el-input v-model.trim="search.keyword" placeholder="请输入关键字" clearable></el-input> -->
    <div class="heard">
      <el-form
        :inline="true"
        :model="search"
        ref="headerForm"
        size="mini"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="题名:">
              <el-input
                v-model="search.keyword"
                placeholder="请输入关键字"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="原文:">
              <el-input
                v-model="search.keyword2"
                placeholder="请输入关键字"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="档号:">
              <el-input
                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
                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="16" :offset="12">
            <el-form-item label=" ">
              <el-button type="primary" size="mini" @click="searchFul"
                ><i class="iconfont icon-sousuo"></i>检索</el-button
              >
              <el-button type="primary" size="mini" @click="highSearch"
                ><i class="iconfont icon-sousuo"></i>高级搜索</el-button
              >
              <el-button type="info" size="mini" @click="ResetForm"
                >重置</el-button
              >
              <el-button
                v-if="showButtons.del"
                type="danger"
                size="mini"
                @click="delAll"
                >全部删除</el-button
              >
              <!-- <el-popconfirm  title="确定删除全部吗？" icon-color="red" @confirm="delAll">
                <el-button slot="reference" style="margin-right: 10px" size="mini">全部删除</el-button>
              </el-popconfirm> -->
              <!-- <el-button v-if="showButtons.borrow" type="primary" size="mini" @click="handleClickBatchBorrow">批量电子借阅</el-button> -->
              <el-button
                v-if="showButtons.borrow"
                type="primary"
                size="mini"
                @click="handleClickBatchBorrow"
                >电子借阅车</el-button
              >
              <el-button type="primary" size="mini" @click="showBorrowApply"
                ><i class="iconfont icon-sousuo"></i>借阅申请</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </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> -->
    <el-table
      border
      :data="tableData"
      @selection-change="handleSelectionChange"
      max-height="550px"
      tooltip-effect="dark"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <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="150px"
      >
        <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="200px"
      >
      </el-table-column>
      <el-table-column
        prop="fileContent"
        label="类型"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
        <template slot-scope="scope">
          {{ scope.row.type | archiveType }}
        </template>
      </el-table-column>
      <el-table-column
        prop="controlIdentifier"
        label="控制标识"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
        <template slot-scope="scope">
          {{ scope.row.controlIdentifier == "隐藏" ? "不开放" : "开放" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="220px" fixed="right">
        <template slot-scope="scope">
          <el-button
            :disabled="scope.row.controlIdentifier == '隐藏' ? true : false"
            style="font-weight: 600"
            size="mini"
            type="text"
            @click="showDetail(scope.row)"
            >详情</el-button
          >
          <!-- <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>
    <loading-tem :loadingStatus="loadingStatus" />
    <!-- <dia-detial :titleKey="titleKey" :showItemName="showItemName" :daStatus='daStatus' :diaObj='diaObj'
      :fondsList="fondsList" @cancel="cancel" /> -->
    <!-- 可查看原文和条目 -->
    <other-detial
      ref="diaTable"
      :daStatus="dataStatus"
      :fondsList="fondsList"
      :fileList="fileList"
      :lookList="lookList"
      @cancel="cancel"
    />
    <electronics
      ref="electronics"
      :btnRow="btnRow"
      :eleStatus="eleStatus"
      @cancel="cancel"
    />
    <entity
      ref="entity"
      :btnRow="btnRow"
      :entityStatus="entityStatus"
      @cancel="cancel"
    />
    <!-- 批量电子借阅 -->
    <batchborrow
      ref="batchborrow"
      :currentRowCheckedItem="currentRowCheckedItem"
      :batchBorrowStatus="batchBorrowStatus"
      @clickSubmit="clickSubmitBorrow"
      @cancel="cancel"
    ></batchborrow>
    <!-- 借阅车 -->
    <borrowcar
      ref="borrowcarRef"
      :borrowForm="borrowForm"
      :currentRowCheckedItem="currentRowCheckedItem"
      :visible="borrowcarStatus"
      @clickSubmit="clickSubmitBorrowcar"
      @cancel="cancel"
    ></borrowcar>
    <!-- 借阅申请 -->
    <borrowApply
      ref="borrowApplyRef"
      :visible="isShowBorrowApply"
      :borrowApply="borrowApply"
      @clickSubmit="clickSubmitBorrowApply"
      @cancel="cancel"
    ></borrowApply>
    <!-- 高级搜索 -->
    <highSearch
      ref="highSearchRef"
      :visible="isHighSearch"
      :fondsList="fondsList"
      @clickSubmit="handleHighSearch"
      @cancel="cancel"
    />
  </div>
</template>
<script>
import {
  getOneTable,
  getTable,
  submitApply,
  jycSubmitApply,
} from "@/api/archives-management/fileManagement/notStoredArchives.js";
import { mapState } from "vuex";
import { message, getCurrentTime, clearObjValue } from "@/utils/common";
import {
  deleteAndCreateIndex,
  checkEntityBorrow,
  selectById,
  entityBorrowing,
  selectThreeObject,
  doCreateRequest,
  advancedSearch,
} from "@/api/archiveUtilize/archivesRetrieval/fullTextSearch";
import { getFondWithPage } from "@/api/system-management/allAdministration";
import { selectUserDetails } from "@/api/user.js";
import diaDetial from "./components/diaDetial.vue";
import electronics from "./components/electronics.vue";
import entity from "./components/entity.vue";
import batchborrow from "./components/batchBorrow.vue";
import borrowcar from "./components/borrowCar.vue";
import borrowApply from "./components/borrowApply.vue";
import otherDetial from "./components/otherDetial.vue";
import highSearch from "./components/highSearch.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 {
      isFlagHighSearch:false, // 是否是高级查询
      isHighSearch: false,
      isShowBorrowApply: false,
      borrowApply: {
        apuserName: "",
        apuser: sessionStorage.getItem("username"),
        apdate: getCurrentTime("-"),
        medium: "",
        utform: "",
        duedate: "",
        fileaim: "",
      },
      borrowForm: {
        applyUserName: "",
        applyTime: getCurrentTime(),
        rec_nums: "",
        returnDate: "",
        useStyle: "",
        applyReason: "",
      },
      borrowcarStatus: false, // 借阅车
      checkedItemNum: 0,
      batchBorrowStatus: false, // 批量电子借阅
      currentRowCheckedItem: [], // 当前行选中数据
      // radio: "1",
      titleKey: 1,
      highParams:[], // 高级搜索
      search: {
        // fieldName: ""
        keyword: "",
        keyword2: "",
        keyword3: "",
        keyword4: "",
        keyword5: "",
        keyword6: "",
      },
      params: {},
      diaObj: {},
      daStatus: false, //详情
      eleStatus: false, //电子借阅
      entityStatus: false, //实体借阅
      btnRow: {},
      showItemName: false,
      dataStatus: false, // 详情-查看条目和原文
      detailUserText: "", // 申请人拼接文字
      fondsList: [],
      fileList: [],
      lookList: [],
    };
  },
  components: {
    diaDetial,
    electronics,
    entity,
    borrowcar,
    batchborrow,
    borrowApply,
    highSearch,
    "other-detial": otherDetial,
  },
  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: {
    getFonds() {
      getFondWithPage({
        limit: 1000,
      }).then((res) => {
        this.fondsList = res.body.list;
      });
    },
    // 查看详情
    showDetail(val) {
      this.dataStatus = true;
      // 查看原文和条目
      this.lookFile(val);
    },
    // 查看原文文件
    lookFile(row) {
      let param = {
        commonMap: {
          tableName: row.tableName,
        },
        conditionMap: {
          id: row.recId,
        },
      };
      let file = {
        commonMap: {
          tableName: row.tableName,
          funcTypeCode: "file",
        },
        conditionMap: {
          rec_id: row.recId,
          file_status: 1,
        },
        limit: "1000",
        orderBy: "order by  page_no  asc",
        page: "1",
      };
      getTable({
        classId: row.classId,
      }).then((res) => {
        /* this.lookList = row.type === 3 ? JSON.parse(res.body.InterfaceSystem[1].tableShow) : JSON.parse(res.body
              .InterfaceSystem[0].tableShow) */
        let len = res.body.InterfaceSystem.length;
        this.lookList = JSON.parse(res.body.InterfaceSystem[len - 1].tableShow);
        this.lookList.forEach((ele) => {
          this.$set(ele, "value", "");
        });
        getOneTable(param).then((res) => {
          for (let key in res.body.list[0]) {
            this.lookList.forEach((ele) => {
              if (ele.columnName === key) {
                ele.value = res.body.list[0][key];
              }
            });
          }
          getOneTable(file).then((res) => {
            this.fileList = res.body.list;
            this.$refs.diaTable.picUrl = "";
          });
        });
      });
    },
    // 借阅申请
    showBorrowApply() {
      if (this.currentRowCheckedItem.length == 0) {
        this.$message({ type: "warning", message: "请至少勾选一条数据" });
        return;
      }
      console.log(this.detailUserText);
      this.isShowBorrowApply = true;
    },
    // 借阅申请确定
    clickSubmitBorrowApply(params) {
      let _params = {
        list: this.currentRowCheckedItem,
        apuser: sessionStorage.getItem("username"),
        apdate: params.apdate.slice(0, 10),
        medium: params.medium,
        utform: params.utform,
        duedate: params.duedate,
        fileaim: params.fileaim,
      };
      console.log(_params);
      doCreateRequest(_params).then((res) => {
        if (res.code == 100) {
        }
      });
    },
    ResetForm() {
      clearObjValue(this.search);
      this.$refs.highSearchRef.fieldArr = []
      this.highParams = [];
    },
    // 根据id查询用户信息
    getUserDetail() {
      selectUserDetails({ userId: sessionStorage.getItem("userid") })
        .then((res) => {
          let result = res.body.userDetails;
          this.detailUserText = result;
          this.borrowForm.applyUserName = result;
          this.borrowApply.apuserName = result;
        })
        .catch((error) => {
          message("warning", error, "4000");
        });
    },
    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: this.detailUserText,
              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: this.detailUserText,
              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', '该实体档案已借出,请联系档案管理员', 3000)
                } else {
                  this.entityStatus = true
                }
              }) */
            break;
        }
      });
    },
    delAll() {
      this.$confirm("此操作将删除全部文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            indexName: "xinchuang",
          };
          deleteAndCreateIndex(params).then((res) => {
            if (res.code === "100") {
              message("success", "删除成功", 2000);
              this.searchFul();
            }
          });
        })
        .catch(() => {});
    },
    cancel() {
      this.daStatus = false;
      this.eleStatus = false;
      this.entityStatus = false;
      this.batchBorrowStatus = false;
      this.borrowcarStatus = false;
      this.borrowApply = false;
      this.dataStatus = false;
      this.isHighSearch = false;
      this.borrowForm = {
        applyUserName: this.detailUserText,
        applyTime: getCurrentTime(),
        rec_nums: "",
        returnDate: "",
        useStyle: "",
        applyReason: "",
      };
      this.borrowApply = {
        apuserName: "",
        apuser: sessionStorage.getItem("username"),
        apdate: getCurrentTime("-"),
        medium: "",
        utform: "",
        duedate: "",
        fileaim: "",
      };
    },
    getFonds() {
      getFondWithPage({
        limit: 1000,
      }).then((res) => {
        this.fondsList = res.body.list;
      });
    },
    titleTitle(val) {
      console.log(val);
      this.titleKey = val.type;
      let data = {
        classId: val.classId,
      };
      let params = {
        id: val.recId,
        tableName: val.tableName,
      };
      getTable(data).then((res) => {
        if (res.body.InterfaceSystem.length === 3) {
          this.showItemName = true;
          let info = {
            id: val.recId,
            level: val.type === 2 ? 1 : 2,
            tableName: res.body.InterfaceSystem.map(
              (ele) => ele.tableName
            ).join(","),
          };
          // params.pTableName = res.body.InterfaceSystem[0].tableName
          selectThreeObject(info).then((res) => {
            if (res.body.list.length) {
              this.diaObj = res.body.list[0];
              this.daStatus = true;
            } else {
              message("warning", "该档案不存在", 3000);
            }
          });
        } else {
          this.showItemName = false;
          selectById(params).then((res) => {
            if (res.body.list.length) {
              this.diaObj = res.body.list[0];
              this.daStatus = true;
            } else {
              message("warning", "该档案不存在", 3000);
            }
          });
        }
      });
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      if(this.isFlagHighSearch == true){
        this.handleHighSearch(this.highParams,this.search)
      }else{
        this.searchClick();

      }
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.pageNum = 1;
      if(this.isFlagHighSearch == true){
        this.handleHighSearch(this.highParams)
      }else{
        this.searchClick();

      }
    },
    searchFul() {
      this.pagination.pageNum = 1;
      this.isFlagHighSearch = false;
      this.highParams = [];
      this.$refs.highSearchRef.fieldArr = []
      this.searchClick();
    },
    highSearch() {
      this.pagination.pageNum = 1;
      this.isFlagHighSearch = true; // 高级搜索
      this.isHighSearch = true;
      this.search
    },
    handleHighSearch(params,searchParams) {
      // 检索参数赋值
      this.highParams = [...params]
      this.search = {
        keyword:searchParams.maintitle,
        keyword2:searchParams.fileContent,
        keyword3:searchParams.archiveNo,
        keyword4:searchParams.filingYear,
        keyword5:searchParams.responsibleby,
        keyword6:searchParams.fondsNo,
      }
      this.loadingStatus = true;
      let _params = {
        indexName: "xinchuang",
        type: "dangan",
        limit: this.pagination.pageSize,
        page: this.pagination.pageNum,
        conditions: this.highParams
      };
      this.$store
        .dispatch("fullTextSearch/getHighData", _params)
        .catch((err) => {
          this.loadingStatus = false;
        })
        this.isHighSearch = false;
    },
    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,
        page: this.pagination.pageNum,
        limit: this.pagination.pageSize,
        type: "dangan",
        entityIds: "",
      };
      this.$store
        .dispatch("fullTextSearch/getData", this.params)
        .catch((err) => {
          this.loadingStatus = false;
        });
    },
    // 行点击事件
    handleSelectionChange(val) {
      this.currentRowCheckedItem = val;
      this.checkedItemNum = this.currentRowCheckedItem.length;
    },
    // 点击电子借阅
    handleClickBatchBorrow() {
      if (this.currentRowCheckedItem.length == 0) {
        this.$message({ type: "warning", message: "请至少勾选一条数据" });
        return;
      }
      this.borrowcarStatus = true;
    },
    // 点击批量借阅
    clickSubmitBorrow(params) {
      let _recIdIdArr = []; // 获取选中所有的id
      _recIdIdArr = this.currentRowCheckedItem.map((item) => item.recId);
      let _params = {
        applyReason: params.applyReason,
        applyTime: params.applyTime,
        applyUserId: sessionStorage.getItem("userid"),
        applyUserName: this.detailUserText,
        classId: this.currentRowCheckedItem[0].classId, // 勾选其中的一个
        tableName: this.currentRowCheckedItem[0].tableName, // 勾选其中的一个
        className: this.currentRowCheckedItem[0].className,
        expressType: 13,
        recIds: _recIdIdArr.join(","), // 勾选拼接
        rec_nums: this.checkedItemNum,
        returnDate: params.returnDate,
        useStyle: params.useStyle,
      };
      submitApply(_params)
        .then((res) => {
          message("success", "提交审批成功", 2500);
          this.cancel();
        })
        .finally((res) => {
          this.btnLoading = false;
        });
    },
    // 点击借阅车-确定按钮
    clickSubmitBorrowcar(params) {
      let _params = {
        applyUserId: sessionStorage.getItem("userid"),
        applyUserName: this.detailUserText,
        applyTime: params.applyTime,
        applyReason: params.applyReason,
        returnDate: params.returnDate,
        useStyle: params.useStyle,
        list: this.currentRowCheckedItem,
        expressType: 13,
        rec_nums: params.rec_nums,
      };
      jycSubmitApply(_params)
        .then((res) => {
          message("success", "提交审批成功", 2500);
          this.searchFul();
          this.cancel();
        })
        .catch((error) => {
          message("warning", error, 2500);
          this.cancel();
        });
    },
  },
  created() {
    this.getFonds();
    let btnData = {
      menuid: this.$getMenuId(
        sessionStorage.getItem("routerIdList"),
        this.$route.path
      ),
      roleid: sessionStorage.getItem("roleid"),
    };
    this.$store.dispatch("fullTextSearch/getButtonList", btnData);
  },
  mounted() {
    this.getUserDetail();
  },
  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%
  //   }
  // }
  .heard {
    width: 100%;
    background-color: #fff;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    // display: flex;
    margin-bottom: 10px;
    // justify-content: space-between;

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