<template>
  <div class="jdbycquerytm">
    <div class="jdbycquerytm-loading" v-loading="true" v-if="loading"></div>
    <div class="jdbycquerytm-main">
      <!-- 面包屑 -->
      <div class="jdbycquerytm-top">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/jdtrademark"
            >商标注册服务</el-breadcrumb-item
          >
          <el-breadcrumb-item>商标检索</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 搜索框 -->
      <div class="jdbycquerytm-serch">
        <div class="jdbycquerytm-serch-left">
          <span class="serchSpan">商标查询</span>
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-camera"
            v-model="serchName"
            @keyup.enter.native="onKeyDown()"
          >
          </el-input>
          <div @mouseenter="classAll" class="classAll">
            <el-button v-if="activeName == 'first' || activeName == 'second'"
              >全部类别<i class="el-icon-arrow-down"></i
            ></el-button>
            <div
              class="classAllClass"
              v-show="classAllClassFlag"
              @mouseleave="classAllLeave"
            >
              <el-checkbox
                :indeterminate="isIndeterminateClass"
                v-model="checkAllClass"
                @change="handleCheckAllChangeClass"
                >全选</el-checkbox
              >
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group
                v-model="checkedCitiesClass"
                @change="handleCheckedCitiesChangeClass"
              >
                <el-checkbox
                  v-for="num in citiesClass"
                  :label="num"
                  :key="num"
                  >{{ num }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <el-button type="primary" @click="serchNameList">检索</el-button>
        </div>
        <div class="jdbycquerytm-serch-right">
          <el-button @click="$router.push('/bycnoticetm')">公告查询</el-button>
        </div>
      </div>
      <!-- tabs选项 -->
      <div class="jdbycquerytm-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="相同商标" name="first"></el-tab-pane>
          <el-tab-pane label="相似商标" name="second"></el-tab-pane>
          <el-tab-pane label="申请号" name="third"></el-tab-pane>
          <el-tab-pane label="申请人" name="fourth"></el-tab-pane>
          <el-tab-pane label="图形检索" name="fiveth"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 已选条件 -->
      <div
        class="jdbycquerytm-condition"
        v-if="
          nclOptions.length != 0 ||
            statusCounts.length != 0 ||
            yearCounts.length != 0
        "
      >
        <div class="jdbycquerytm-condition-selected">
          <span class="selectedSpan">已选条件:</span>
          <div class="selected-tags">
            <!-- 已选条件 -->
            <div class="selected-tags-tag" v-if="sqr.key">
              {{ sqr.key }} <i class="el-icon-close" @click="nclRen({})"></i>
            </div>
            <div class="selected-tags-tag" v-if="sqlb.keyvalue">
              {{ sqlb.keyvalue
              }}<i class="el-icon-close" @click="nclClass({})"></i>
            </div>
            <div class="selected-tags-tag" v-if="flzt.keyvalue">
              {{ flzt.keyvalue
              }}<i class="el-icon-close" @click="nclFlzt({})"></i>
            </div>
            <div class="selected-tags-tag" v-if="sqnf.key">
              {{ sqnf.key }}<i class="el-icon-close" @click="nclSqnf({})"></i>
            </div>
          </div>
        </div>
        <div class="jdbycquerytm-condition-ul">
          <li v-if="activeName == 'fourth'">
            <span class="titleSpan">申请人：</span>
            <div class="li-item">
              <div
                v-for="(item, index) in nameCounts.slice(0, 50)"
                :key="index"
              >
                <p @click="nclRen(item)">
                  {{ item.key }} <span>({{ item.keycount }})</span>
                </p>
              </div>
            </div>
            <p class="moreSpan" v-if="nameCounts.length > 5">
              <span @click="showRen($event)">更多</span>
              <i
                @click="showRen($event)"
                :class="
                  showRenType ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
                "
              ></i>
            </p>
          </li>
          <li>
            <span class="titleSpan">申请类别：</span>
            <div class="li-item">
              <div v-for="(item, index) in nclOptions" :key="index">
                <p @click="nclClass(item)">
                  {{ item.keyvalue }} <span>({{ item.keycount }})</span>
                </p>
              </div>
            </div>
            <p class="moreSpan" v-if="nclOptions.length > 6">
              <span @click="showClass($event)">更多</span>
              <i
                @click="showClass($event)"
                :class="
                  showClassType ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
                "
              ></i>
            </p>
          </li>
          <li>
            <span class="titleSpan">法律状态：</span>
            <div class="li-item">
              <div v-for="(item, index) in statusCounts" :key="index">
                <p @click="nclFlzt(item)">
                  {{ item.keyvalue }} <span>({{ item.keycount }})</span>
                </p>
              </div>
            </div>
          </li>
          <li>
            <span class="titleSpan">申请年份：</span>
            <div class="li-item">
              <div v-for="(item, index) in yearCounts" :key="index">
                <p @click="nclSqnf(item)">
                  {{ item.key }} <span>({{ item.keycount }})</span>
                </p>
              </div>
            </div>
            <p class="moreSpan" v-if="yearCounts.length > 11">
              <span @click="showYear($event)">更多</span>
              <i
                @click="showYear($event)"
                :class="
                  showYearType ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
                "
              ></i>
            </p>
          </li>
          <li v-if="activeName == 'second'">
            <span class="titleSpan">高级筛选：</span>
            <div class="li-item">
              <el-checkbox
                class="quanxuan"
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <!-- <div style="margin: 15px 0;"></div> -->
              <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                  city
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </li>
        </div>
      </div>
      <!-- 已查信息个数 -->
      <div class="jdbycquerytm-total">
        <p>
          共查到<span>{{ dataCount }}</span
          >条信息
        </p>
        <div class="jdbycquerytm-total-download">
          <span><i class="el-icon-download">导出数据</i></span>
        </div>
      </div>
      <!-- 商标数据列表 -->
      <BomTable :data="dataList" v-if="dataList.length != 0" />
      <!-- 商标数据分页 -->
      <div class="jdbycquerytm-pagination" v-if="dataList.length != 0">
        <el-pagination
          background
          :page-size="pageSize"
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total="dataCount"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <!-- 暂无数据 -->
      <div class="notData" v-if="dataList.length == 0">
        <img src="@/assets/imgs/wushuju.png" alt="" />
        <p>很抱歉，没有查询到您要搜索的内容</p>
        <p>同时您也可以使用同义关键词或减少筛选范围再进行尝试。</p>
      </div>
    </div>
    <!-- 相机弹出层 -->
    <div class="imgUpload">
      <div class="imgUpload-main">
        <div class="imgUpload-title">
          <h1>
            把不必要的部分裁剪掉，以保证搜索结果的准确性
          </h1>
          <i class="el-icon-close"></i>
        </div>
        <div class="vueCropper">
          <VueCropper ref="cropper" />
        </div>
        <div class="imgUpload-bottom">
          <el-button type="primary">重新选择</el-button>
          <el-button type="primary">下载图片</el-button>
          <el-button type="primary">提交图片</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BomTable from "./bomTable";
//
import {
  findTrademarkNameAccurate,
  findTrademarkName,
  findTrademarkzchAccurate,
  findTrademarkzcr
} from "@/api/tmQuery.js";
//高级筛选
const citiesList = [
  "近似",
  "变字",
  "拼音",
  "同义词",
  "形近字",
  "换序",
  "包含该商标"
];
//尼斯编号
const nclOptionNumbers = [
  "01",
  "02",
  "03",
  "04",
  "05",
  "06",
  "07",
  "08",
  "09",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15",
  "16",
  "17",
  "18",
  "19",
  "20",
  "21",
  "22",
  "23",
  "24",
  "25",
  "26",
  "27",
  "28",
  "29",
  "30",
  "31",
  "32",
  "33",
  "34",
  "35",
  "36",
  "37",
  "38",
  "39",
  "40",
  "41",
  "42",
  "43",
  "44",
  "45"
];
export default {
  components: {
    BomTable
  },
  data() {
    return {
      //尼斯编号多选框
      checkAllClass: false,
      checkedCitiesClass: [],
      citiesClass: nclOptionNumbers,
      isIndeterminateClass: false,
      classAllClassFlag: false,
      //已选条件
      sqr: {},
      sqlb: {},
      flzt: {},
      sqnf: {},
      //loading
      loading: false,
      //高级筛选多选框部分
      checkAll: true,
      checkedCities: citiesList,
      cities: citiesList,
      isIndeterminate: false,
      //input框检索参数
      serchName: "",
      //展示申请人
      showRenType: false,
      //展示商标类别
      showClassType: false,
      //展示申请年份
      showYearType: false,
      //页面商标的个数
      pageSize: 20,
      //商标的页码
      currentPage: 1,
      //tabs选项
      activeName: "first",
      //申请人
      nameCounts: [],
      //申请类别
      nclOptions: [],
      //法律状态
      statusCounts: [],
      //申请年份
      yearCounts: [],
      //查询商标数量
      dataCount: 0,
      //查询商标数据
      dataList: [],
      //商标精确检索参数
      trademarkNameAccurate: {},
      //商标近似检索参数
      trademarkName: {},
      //商标申请号查询参数
      TrademarkzchAccurate: {},
      //商标申请人查询参数
      Trademarkzcr: {}
    };
  },
  mounted() {
    console.log(this.$refs);
    this.serchName = this.$route.query.tminput;
    this.serchNameList();
  },
  methods: {
    /////////
    handleCheckAllChangeClass(val) {
      this.checkedCitiesClass = val ? nclOptionNumbers : [];
      this.isIndeterminateClass = false;
    },
    handleCheckedCitiesChangeClass(value) {
      let checkedCount = value.length;
      this.checkAllClass = checkedCount === this.citiesClass.length;
      this.isIndeterminateClass =
        checkedCount > 0 && checkedCount < this.citiesClass.length;
    },
    //鼠标划入全部类别
    classAll() {
      this.classAllClassFlag = true;
    },
    classAllLeave() {
      this.classAllClassFlag = false;
    },
    //点击检索
    serchNameList() {
      if (this.serchName) {
        this.clearParameter();
        this.switchTags();
      } else {
        this.$message({
          message: "请输入搜索内容！",
          type: "warning"
        });
      }
    },
    //回车检索
    onKeyDown() {
      this.serchNameList();
    },
    //还原默认参数
    clearParameter() {
      //已选条件
      this.sqr = {};
      this.sqlb = {};
      this.flzt = {};
      this.sqnf = {};
      //商标精确检索参数
      this.trademarkNameAccurate = {
        tmName: this.serchName,
        sqlbtabkey: "", //申请类别
        flzttabkey: "", //法律状态
        sqnftabkey: "", //申请年份
        ncl: [],
        xcl: [],
        nclNum: [],
        pageSize: 20,
        currentPage: 1
      };
      //商标近似检索参数
      this.trademarkName = {
        tmName: this.serchName,
        sqlbtabkey: "",
        flzttabkey: "",
        sqnftabkey: "",
        ncl: [],
        xcl: [],
        nclNum: [],
        sbtjdata: citiesList,
        pageSize: 20,
        currentPage: 1
      };
      //商标申请号查询参数
      this.TrademarkzchAccurate = {
        regNum: this.serchName,
        sqlbtabkey: "",
        flzttabkey: "",
        sqnftabkey: "",
        xcl: [],
        pageSize: 20,
        currentPage: 1
      };
      //商标申请人查询参数
      this.Trademarkzcr = {
        regMan: this.serchName,
        sqlbtabkey: "",
        flzttabkey: "",
        sqnftabkey: "",
        zcrname: "",
        xcl: [],
        pageSize: 20,
        currentPage: 1
      };
    },
    //点击申请人
    nclRen(item) {
      this.currentPage = 1;
      this.sqr = item;
      this.Trademarkzcr.zcrname = this.sqr.key;
      this.getTrademarkzcrList();
    },
    //点击商标类别
    nclClass(item) {
      this.currentPage = 1;
      this.sqlb = item;
      switch (this.activeName) {
        case "first":
          this.trademarkNameAccurate.sqlbtabkey = this.sqlb.key;
          this.getTrademarkNameAccurateList();
          break;
        case "second":
          this.trademarkName.sqlbtabkey = this.sqlb.key;
          this.getTrademarkNameList();
          break;
        case "third":
          this.TrademarkzchAccurate.sqlbtabkey = this.sqlb.key;
          this.getTrademarkzchAccurateList();
          break;
        case "fourth":
          this.Trademarkzcr.sqlbtabkey = this.sqlb.key;
          this.getTrademarkzcrList();
          break;
      }
    },
    //点击法律状态
    nclFlzt(item) {
      this.currentPage = 1;
      this.flzt = item;
      switch (this.activeName) {
        case "first":
          this.trademarkNameAccurate.flzttabkey = this.flzt.key;
          this.getTrademarkNameAccurateList();
          break;
        case "second":
          this.trademarkName.flzttabkey = this.flzt.key;
          this.getTrademarkNameList();
          break;
        case "third":
          this.TrademarkzchAccurate.flzttabkey = this.flzt.key;
          this.getTrademarkzchAccurateList();
          break;
        case "fourth":
          this.Trademarkzcr.flzttabkey = this.flzt.key;
          this.getTrademarkzcrList();
          break;
      }
    },
    //点击申请年份
    nclSqnf(item) {
      this.currentPage = 1;
      this.sqnf = item;
      switch (this.activeName) {
        case "first":
          this.trademarkNameAccurate.sqnftabkey = this.sqnf.key;
          this.getTrademarkNameAccurateList();
          break;
        case "second":
          this.trademarkName.sqnftabkey = this.sqnf.key;
          this.getTrademarkNameList();
          break;
        case "third":
          this.TrademarkzchAccurate.sqnftabkey = this.sqnf.key;
          this.getTrademarkzchAccurateList();
          break;
        case "fourth":
          this.Trademarkzcr.sqnftabkey = this.sqnf.key;
          this.getTrademarkzcrList();
          break;
      }
    },
    //高级筛选
    //全选改变事件
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
      this.trademarkName.sbtjdata = this.checkedCities;
      this.getTrademarkNameList();
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      this.trademarkName.sbtjdata = value;
      this.getTrademarkNameList();
    },
    //显示申请人
    showRen(tag) {
      this.showRenType = !this.showRenType;
      if (this.showRenType) {
        tag.toElement.parentNode.parentNode.style.height = "auto";
      } else {
        tag.toElement.parentNode.parentNode.style.height = "51px";
      }
    },
    //显示申请类别
    showClass(tag) {
      this.showClassType = !this.showClassType;
      if (this.showClassType) {
        tag.toElement.parentNode.parentNode.style.height = "auto";
      } else {
        tag.toElement.parentNode.parentNode.style.height = "51px";
      }
    },
    //显示申请年份
    showYear(tag) {
      this.showYearType = !this.showYearType;
      if (this.showYearType) {
        tag.toElement.parentNode.parentNode.style.height = "auto";
      } else {
        tag.toElement.parentNode.parentNode.style.height = "51px";
      }
    },
    //商标精确检索
    getTrademarkNameAccurateList() {
      this.loading = true;
      findTrademarkNameAccurate(this.trademarkNameAccurate).then(res => {
        this.loading = false;
        console.log(res, "商标精确检索");
        if (res.status == 0) {
          this.assignmentData(res.data);
        }
      });
    },
    //商标近似检索
    getTrademarkNameList() {
      this.loading = true;
      findTrademarkName(this.trademarkName).then(res => {
        this.loading = false;
        console.log(res, "商标近似检索");
        if (res.status == 0) {
          this.assignmentData(res.data);
        }
      });
    },
    //商标申请号查询
    getTrademarkzchAccurateList() {
      this.loading = true;
      findTrademarkzchAccurate(this.TrademarkzchAccurate).then(res => {
        this.loading = false;
        console.log(res, "商标申请号查询");
        if (res.status == 0) {
          this.assignmentData(res.data);
        }
      });
    },
    //商标申请人查询
    getTrademarkzcrList() {
      this.loading = true;
      findTrademarkzcr(this.Trademarkzcr).then(res => {
        this.loading = false;
        console.log(res, "商标申请人查询");
        if (res.status == 0) {
          this.assignmentData(res.data);
        }
      });
    },
    //赋值数据
    assignmentData(data) {
      if (data.namecounts) {
        this.nameCounts = data.namecounts;
      }
      this.nclOptions = data.code_counts;
      this.statusCounts = data.status_counts;
      this.yearCounts = data.year_counts;
      this.dataCount = data.count;
      this.dataList = data.rows;
    },
    //判断在哪个标签页
    switchTags() {
      switch (this.activeName) {
        case "first":
          this.trademarkNameAccurate.nclNum = this.checkedCitiesClass;
          this.getTrademarkNameAccurateList();
          break;
        case "second":
          this.trademarkName.nclNum = this.checkedCitiesClass;
          this.getTrademarkNameList();
          break;
        case "third":
          this.getTrademarkzchAccurateList();
          break;
        case "fourth":
          this.getTrademarkzcrList();
          break;
      }
    },
    //切换tabs选项
    handleClick(tab, event) {
      console.log(tab, event);
      this.serchNameList();
      this.currentPage = 1;
    },
    //切换页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      switch (this.activeName) {
        case "first":
          this.trademarkNameAccurate.currentPage = val;
          this.getTrademarkNameAccurateList();
          break;
        case "second":
          this.trademarkName.currentPage = val;
          this.getTrademarkNameList();
          break;
        case "third":
          this.TrademarkzchAccurate.currentPage = val;
          this.getTrademarkzchAccurateList();
          break;
        case "fourth":
          this.Trademarkzcr.currentPage = val;
          this.getTrademarkzcrList();
          break;
      }
    }
  }
};
</script>

<style lang="scss">
.jdbycquerytm {
  width: 100%;
  padding-bottom: 1px;
  .imgUpload {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 111;
    .imgUpload-main {
      width: 600px;
      margin: 150px auto;
      border-radius: 5px;
      overflow: hidden;
      .imgUpload-title {
        background: #fff;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 50px;
        h1 {
          font-size: 15px;
        }
        i{
          position: absolute;
          right: 20px;
          top: 17px;
          font-size: 17px;
          cursor: pointer;
        }
      }
      .vueCropper{
        width: 100%;
        height: 400px;
      }
      .imgUpload-bottom{
        width: 100%;
        height: 70px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: 16px 100px;
        .el-button{
          padding: 0 20px;
        }
      }
    }
  }
  .jdbycquerytm-main {
    width: 1200px;
    margin: 0 auto;
    .notData {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-top: 80px;
      p {
        font-size: 16px;
        font-weight: 400;
        color: rgba(130, 130, 130, 1);
        margin-top: 10px;
      }
    }
  }
  .jdbycquerytm-loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
  }
}
.jdbycquerytm-top {
  width: 100%;
  .el-breadcrumb {
    padding: 12px 0;
  }
}
.jdbycquerytm-serch {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
  .jdbycquerytm-serch-left {
    position: relative;
    width: 735px;
    display: flex;
    .classAll {
      .classAllClass {
        position: absolute;
        left: 100px;
        background: #fff;
        z-index: 99;
        padding: 20px 0 20px 30px;
        border: 1px solid #dcdfe6;
        border-top: none;
        border-radius: 0 0 5px 5px;
        .el-checkbox {
          margin: 0;
          width: 67px;
        }
      }
    }
    .serchSpan {
      font-family: PingFangSC-Medium;
      cursor: pointer;
      font-size: 20px;
      color: #108ee9;
      letter-spacing: 0;
      line-height: 40px;
      margin-right: 20px;
    }
    .el-input {
      flex: 1;
      input {
        border-right: none;
        border-radius: 0;
      }
      .el-input__suffix-inner {
        cursor: pointer;
      }
      .el-input__icon {
        font-size: 20px;
        color: #108ee9;
      }
    }
    .el-button {
      width: 100px;
      height: 40px;
      padding: 0;
      border-radius: 0;
      margin: 0;
      border: 1px solid #108ee9;
    }
  }
  .jdbycquerytm-serch-right {
    .el-button {
      width: 100px;
      height: 40px;
      border: 1px solid #108ee9;
      border-radius: 0;
      cursor: pointer;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #108ee9;
      letter-spacing: 0;
      padding: 0;
    }
  }
}
.jdbycquerytm-tabs {
  width: 100%;
  .el-tabs {
    width: 100%;
    .el-tabs__header {
      width: 100%;
      height: 40px;
      background: #f7f8fc;
      margin-bottom: 10px;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .el-tabs__item {
      padding: 0 40px;
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding: 0 40px;
    }
    .el-tabs__active-bar {
      display: none;
    }
  }
}
.jdbycquerytm-condition {
  width: 100%;
  padding: 20px 35px;
  background: #f7f8fc;
  .jdbycquerytm-condition-selected {
    width: 100%;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #d6daeb;
    .selectedSpan {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      letter-spacing: 0;
    }
    .selected-tags {
      display: flex;
      .selected-tags-tag {
        margin-left: 40px;
        font-size: 12px;
        border-radius: 3px;
        border: 1px solid #108ee9;
        color: #108ee9;
        padding: 2px 7px 2px 10px;
        background: #ecf5ff;
        i {
          margin-left: 10px;
          width: 15px;
          height: 15px;
          border-radius: 100px;
          color: #108ee9;
          line-height: 15px;
          text-align: center;
          cursor: pointer;
        }
        i:hover {
          background: #108ee9;
          color: #fff;
        }
      }
    }
  }
  .jdbycquerytm-condition-ul {
    width: 100%;
    li {
      height: 51px;
      overflow: hidden;
      display: flex;
      padding: 10px 0;
      color: #828282;
      font-size: 12px;
      border-bottom: 1px solid #d6daeb;
      transition: 1s all;
      .titleSpan {
        display: inline-block;
        padding: 7px 40px 7px 0;
        width: 100px;
      }
      .li-item {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .quanxuan {
          padding: 7px 30px 7px 0;
        }
        div {
          padding: 7px 40px 7px 0;
          p:hover {
            color: #108ee9;
            cursor: pointer;
          }
        }
      }
      .moreSpan {
        padding: 7px 0;
        span {
          cursor: pointer;
        }
        i {
          cursor: pointer;
        }
      }
    }
  }
}
.jdbycquerytm-total {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5px;
  color: #666;
  p {
    font-size: 12px;
    span {
      color: #108ee9;
    }
  }
  .jdbycquerytm-total-download {
    font-size: 16px;
    cursor: pointer;
  }
  .jdbycquerytm-total-download:hover {
    color: #108ee9;
  }
}
.jdbycquerytm-pagination {
  width: 100%;
  border: 1px solid #eff1f9;
  border-top: none;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: #f7f8fc;
  display: flex;
  justify-content: flex-end;
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    background-color: #fff;
    border: 1px solid #dce4ea;
    border-radius: 3px;
  }
}
</style>
