<template>
  <div class="jdtrademark-warpper">
    <div class="jdtrademark-search">
      <div>
        <img src="../../../assets/imgs/search.png" alt />
        <span>商标检索</span>
      </div>
      <div @mouseleave="typeListShow = false">
        <input
          type="text"
          v-model="searchValue"
          placeholder="请输入您想检索的商标名称，申请号，申请人等信息"
        />
        <div
          @mouseenter="typeListShow = true"
          class="jdtrademark-search-alltype"
        >
          全部类别
          <i class="el-icon-arrow-down"></i>
        </div>
        <transition name="showncllist">
          <div class="jdtrademark-typelist" v-if="typeListShow">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <div></div>
            <el-checkbox-group
              v-model="checkedType"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="item in typeList"
                :label="item.code + item.name"
                :key="item.code"
                >{{ item.code }}{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </transition>
      </div>
      <div @click="goSearch">检索</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeListShow: false,
      searchValue: "",
      isIndeterminate: true,
      checkAll: false,
      checkedType: [],
      typeList: [
        { code: "01", name: "化学原料", type: 1 },
        { code: "02", name: "颜料油漆", type: 1 },
        { code: "03", name: "日化用品", type: 1 },
        { code: "04", name: "燃料油脂", type: 1 },
        { code: "05", name: "医药", type: 1 },
        { code: "06", name: "金属材料", type: 1 },
        { code: "07", name: "机械设备", type: 1 },
        { code: "08", name: "手工器械", type: 1 },
        { code: "09", name: "科学仪器", type: 1 },
        { code: "10", name: "医疗器械", type: 1 },
        { code: "11", name: "灯具空调", type: 1 },
        { code: "12", name: "运输工具", type: 1 },
        { code: "13", name: "军火烟火", type: 1 },
        { code: "14", name: "珠宝钟表", type: 1 },
        { code: "15", name: "乐器", type: 1 },
        { code: "16", name: "办公用品", type: 1 },
        { code: "17", name: "橡胶制品", type: 1 },
        { code: "18", name: "皮革皮具", type: 1 },
        { code: "19", name: "建筑材料", type: 1 },
        { code: "20", name: "家具", type: 1 },
        { code: "21", name: "厨房洁具", type: 1 },
        { code: "22", name: "绳网袋篷", type: 1 },
        { code: "23", name: "纱线丝", type: 1 },
        { code: "24", name: "布料床单", type: 1 },
        { code: "25", name: "服装鞋帽", type: 1 },
        { code: "26", name: "纽扣拉链", type: 1 },
        { code: "27", name: "地毯席垫", type: 1 },
        { code: "28", name: "健身器材", type: 1 },
        { code: "29", name: "食品", type: 1 },
        { code: "30", name: "方便食品", type: 1 },
        { code: "31", name: "饲料种籽", type: 1 },
        { code: "32", name: "啤酒饮料", type: 1 },
        { code: "33", name: "酒", type: 1 },
        { code: "34", name: "烟草烟具", type: 1 },
        { code: "35", name: "广告销售", type: 1 },
        { code: "36", name: "金融物管", type: 1 },
        { code: "37", name: "建筑修理", type: 1 },
        { code: "38", name: "通讯服务", type: 1 },
        { code: "39", name: "运输贮藏", type: 1 },
        { code: "40", name: "材料加工", type: 1 },
        { code: "41", name: "教育娱乐", type: 1 },
        { code: "42", name: "网站服务", type: 1 },
        { code: "43", name: "餐饮住宿", type: 1 },
        { code: "44", name: "医疗园艺", type: 1 },
        { code: "45", name: "社会服务", type: 1 }
      ]
    };
  },
  methods: {
    handleCheckAllChange(val) {
      if (val) {
        let data = [];
        this.typeList.map((item, index) => {
          data.push(`${item.code}${item.name}`);
        });
        this.checkedType = data;
        this.isIndeterminate = false;
      } else {
        this.checkedType = [];
      }
    },
    /*类别选中项 */
    handleCheckedCitiesChange(value) {
      this.checkedType = value;

      let checkedCount = value.length;
      this.checkAll = checkedCount === this.typeList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.typeList.length;
    },
    goSearch() {
      this.$router.push({
        path: `/jdbycquerytm`,
        query: {
          checkedNcl: JSON.stringify(this.checkedType),
          tminput: this.searchValue
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.jdtrademark-warpper {
  width: 100%;
  height: 110px;
  background: #32b6e7;
}
.jdtrademark-search {
  margin: 0 auto;
  display: flex;
  width: 1200px;
  height: 100%;
  > div:nth-child(1) {
    width: 172px;
    height: 100%;
    box-sizing: border-box;
    padding-top: 38px;
    background: #0ecae6;
    margin-right: 21px;
    display: flex;
    > img {
      width: 28px;
      height: 28px;
      margin-left: 9px;
      transform: translateY(5px);
      vertical-align: middle;
    }
    > span {
      height: 28px;
      font-size: 28px;
      font-family: PangMenZhengDao;
      color: #fff;
      line-height: 32px;
      letter-spacing: 1px;
    }
  }
  > div:nth-child(2) {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    position: relative;
    height: 54px;
    width: 838px;
    background: #fff;
    margin-top: 28px;
    align-items: center;
    > .jdtrademark-typelist {
      position: absolute;
      box-sizing: border-box;
      height: 353px;
      border: none;
      left: 0;
      top: 54px;
      width: 837.29px;
      background: #fff;
      z-index: 10;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
      .el-checkbox {
        width: 96.41px;
      }
      > div {
        margin: 15px 0;
      }
    }
    > input {
      padding-left: 12px;
      height: 100%;
      outline: 0;
      border: none;
      display: inline-block;
      width: 726px;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 1);
    }
    > div {
      cursor: pointer;
      padding-left: 20px;
      box-sizing: border-box;
      display: inline-block;
      line-height: 30px;
      height: 30px;
      border-left: 1px solid #d2d2d2;
      font-size: 14px;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(106, 106, 106, 1);
    }
  }
  > div:nth-last-child(1) {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    margin-top: 28px;
    width: 170px;
    height: 54px;
    text-align: center;
    line-height: 54px;
    background: rgba(6, 113, 162, 1);
    font-size: 18px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
  }
}
</style>
