<template>
  <div class="jdbycquerytm">
    <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"
          >
          </el-input>
          <el-button>全部类别<i class="el-icon-arrow-down"></i></el-button>
          <el-button type="primary">检索</el-button>
        </div>
        <div class="jdbycquerytm-serch-right">
          <el-button @click="$router.push('/bycnoticetm')">公告查询</el-button>
        </div>
      </div>
      <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>
        </div>
        <div class="jdbycquerytm-condition-ul">
          <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">
              <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>
                  {{ item.keyvalue }} <span>({{ item.keycount }})</span>
                </p>
              </div>
            </div>
            <!-- <p class="moreSpan">
              <span>更多 <i class="el-icon-arrow-right"></i></span>
            </p> -->
          </li>
          <li>
            <span class="titleSpan">申请年份：</span>
            <div class="li-item">
              <div v-for="(item, index) in yearCounts" :key="index">
                <p>
                  {{ item.key }} <span>({{ item.keycount }})</span>
                </p>
              </div>
            </div>
            <p class="moreSpan">
              <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>
            <!-- <p class="moreSpan">
              <span @click="showYear($event)">更多</span>
              <i
                @click="showYear($event)"
                :class="
                  showYearType ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
                "
              ></i>
            </p> -->
          </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"
          layout="prev, pager, next"
          :total="dataCount"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BomTable from "./bomTable";
//
import { findTrademarkNameAccurate, findTrademarkName } from "@/api/tmQuery.js";
//高级筛选
const citiesList = [
  "近似",
  "变字",
  "拼音",
  "同义词",
  "形近字",
  "换序",
  "包含该商标"
];
export default {
  components: {
    BomTable
  },
  data() {
    return {
      //多选框
      checkAll: false,
      //多选框选中的值
      checkedCities: citiesList,
      cities: citiesList,
      isIndeterminate: true,
      //input框检索参数
      serchName: "",
      //展示商标类别
      showClassType: false,
      //展示申请年份
      showYearType: false,
      //页面商标的个数
      pageSize: 20,
      //商标的页码
      currentPage: 1,
      //tabs选项
      activeName: "first",
      //申请类别
      nclOptions: [],
      //法律状态
      statusCounts: [],
      //申请年份
      yearCounts: [],
      //查询商标数量
      dataCount: 0,
      //查询商标数据
      dataList: [],
      //商标精确检索参数
      trademarkNameAccurate: {
        tmName: "萌颜",
        sqlbtabkey: "", //申请类别
        flzttabkey: "", //法律状态
        sqnftabkey: "", //申请年份
        ncl: [],
        xcl: [],
        nclNum: [],
        pageSize: 20,
        currentPage: 1
      },
      //商标近似检索参数
      trademarkName: {
        tmName: "萌颜",
        sqlbtabkey: "",
        flzttabkey: "",
        sqnftabkey: "",
        ncl: [],
        xcl: [],
        nclNum: [],
        sbtjdata: citiesList,
        pageSize: 20,
        currentPage: 1
      }
    };
  },
  mounted() {
    this.getTrademarkNameAccurateList();
  },
  methods: {
    //点击商标类别
    nclClass(item) {
      console.log(item);
      let arr = [];
      arr.push(item);
      this.dynamicTags = arr;
    },
    //高级筛选
    //全选改变事件
    handleCheckAllChange(val) {
      console.log(val, "asd");
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    //
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    //显示申请类别
    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() {
      findTrademarkNameAccurate(this.trademarkNameAccurate).then(res => {
        console.log(res, "res");
        if (res.status == 0) {
          this.assignmentData(res.data);
        }
      });
    },
    //商标近似检索
    getTrademarkNameList() {
      findTrademarkName(this.trademarkName).then(res => {
        console.log(res);
        if (res.status == 0) {
          this.assignmentData(res.data);
        }
      });
    },
    //赋值数据
    assignmentData(data) {
      this.nclOptions = data.code_counts;
      this.statusCounts = data.status_counts;
      this.yearCounts = data.year_counts;
      this.dataCount = data.count;
      this.dataList = data.rows;
    },
    //切换tabs选项
    handleClick(tab, event) {
      console.log(tab, event);
      switch (tab.name) {
        case "first":
          this.getTrademarkNameAccurateList();
          break;
        case "second":
          this.getTrademarkNameList();
          break;
      }
    },
    //切换页数
    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;
      }
    }
  }
};
</script>

<style lang="scss">
.jdbycquerytm {
  width: 100%;
  padding-bottom: 1px;
  .jdbycquerytm-main {
    width: 1200px;
    margin: 0 auto;
  }
}
.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 {
    width: 735px;
    display: flex;
    .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-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;
    }
    .el-tag {
      padding: 0;
      margin-left: 40px;
      font-size: 12px;
      border-radius: 0;
      border: 1px solid #108ee9;
      color: #108ee9;
      padding: 0 10px;
    }
  }
  .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;
      }
      .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>
