<!-- 第一步：填写基本信息 商标信息  分类选择-->
<template>
  <div>
    <!-- 基本信息填写 -->
    <div class="modifyTrademark">
      <div class="modifyTrademark-main">
        <div class="categoryFrom">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="商标类型：" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio :label="1">文字</el-radio>
                <el-radio :label="2">图形</el-radio>
                <el-radio :label="3">文字及图形</el-radio>
              </el-radio-group>
              <span class="a-span" @click="lookImg('如何选择商标类型', 1)"
                >如何选择商标类型?</span
              >
            </el-form-item>
            <el-form-item
              label="商标名称："
              prop="name"
              v-if="ruleForm.resource == 1 || ruleForm.resource == 3"
            >
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入商标名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商标图样："
              prop="name"
              v-if="ruleForm.resource == 1"
            >
              <div class="trademark-name">
                <div class="div">
                  <el-button @click="manualupload"
                    >手动上传<UploadImg
                      :action="action"
                      :data="data"
                      ref="upImg"
                      flag="picUrl"
                      @getsuccess="getImgUrl"
                  /></el-button>
                  <el-button @click="automatic">自动生成</el-button>
                </div>
                <div class="div">
                  <div class="trademarkImg">
                    <div class="loadingImg" v-loading="loading"></div>
                    <img v-if="!imgUrl" src="@/assets/imgs/zwtp.png" alt />
                    <img v-else :src="imgUrl" alt="" />
                  </div>
                  <p>
                    <i class="el-icon-warning"></i
                    >自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
                  </p>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="商标图样："
              prop="name"
              v-if="ruleForm.resource == 2 || ruleForm.resource == 3"
            >
              <div class="trademark-name">
                <div class="div">
                  <div class="trademarkImg" v-loading="loading">
                    <img v-if="!imgUrl" src="@/assets/imgs/sctp.png" alt="" />
                    <img v-else :src="imgUrl" alt="" />
                    <UploadImg
                      :action="action"
                      :data="data"
                      ref="upImg"
                      flag="picUrl"
                      @getsuccess="getImgUrl"
                    />
                  </div>
                  <div class="p-left">
                    <p>
                      <i class="el-icon-warning"></i
                      >上传黑白图样，注册后可以更换商标颜色使用；
                    </p>
                    <p>
                      <i class="el-icon-warning"></i
                      >上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
                    </p>
                    <p>
                      <i class="el-icon-warning"></i
                      >上传的彩色图样需与黑白图样的样式一致。
                    </p>
                    <p>
                      <span @click="lookImg('查看上传商标图样注意事项', 2)"
                        >查看上传商标图样注意事项</span
                      >
                    </p>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--  -->
      <el-drawer
        :title="drawerTitle"
        custom-class="jdindentdetail-drawer"
        size="430px"
        :visible.sync="drawerRight"
      >
        <img
          class="shangImg"
          src="@/assets/imgs/jdt/shuoming.png"
          alt=""
          v-if="lookIndex == 1"
        />
        <p v-if="lookIndex == 2">
          图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600-
          1500X1500”之间，如果通过扫描获得图样的，应按24位彩色，300dpi分辨率扫描符合《商标法》
          及其实施条例规定的图形（图形清晰，大于5X5厘米且小于10X10厘米），申请人（或代理人）应
          确保扫描后的图形与原图形的色彩深浅（或灰度）一致，否则，可能影响《商标注册证》上图形
          的清晰度）如上传图样为黑白，取得注册后，可以更换商标颜色使用；如上传图样为彩色，取得
          注册后只能按照该彩色图样使用；如确认提交彩色图样，需在委托书商标名称后方增加以下文字“（指定颜色）”
        </p>
      </el-drawer>
    </div>

    <!-- 分类信息选择 -->
    <div class="classTrademark">
      <div class="classTrademark-left">
        <!-- 分类过滤搜索 -->
        <div class="classTrademark-left-top">
          <el-button @click="typeListShow = true">分类</el-button>
          <el-input
            placeholder="请输入关键字进行过滤"
            suffix-icon="el-icon-search"
            v-model="keyZi"
            @keyup.enter.native="filterKeyZi"
          ></el-input>
          <span class="quxiao" @click="cancelSearch">取消</span>
        </div>
        <!-- 全部分类类别展示  -->
        <div class="classTrademark-typelist" v-if="typeListShow">
          <div class="typelist-nav">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <el-button type="text" @click="confirmClass">确定</el-button>
          </div>
          <el-checkbox-group
            v-model="checkedType"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="(item, index) in checkedList"
              :label="item.code + item.name"
              :key="index + '-' + item.code"
              >{{ item.code }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <!-- 树形控件 -->
        <div class="classTrademark-left-tree">
          <el-tree
            :props="props"
            :data="ncldata"
            empty-text="暂无数据"
            node-key="name"
            show-checkbox
            :expand-on-click-node="false"
            :default-expand-all="isTreeExpand"
            :render-after-expand="false"
            lazy
            :load="loadNode"
            @check-change="handleCheckChange"
            ref="tree"
          ></el-tree>
        </div>
      </div>
      <!-- 右侧选中呈现与清除选择 -->
      <div class="classTrademark-right">
        <div class="classTrademark-right-top">
          <p>已选择的商品/服务项</p>
          <span class="el-icon-delete" @click="deleteClassData()"
            >清除全部</span
          >
        </div>
        <div class="classTrademark-right-main">
          <div class="notData" v-if="classDataList.length == 0">
            <img src="@/assets/imgs/kong-2.png" alt />
            <span>请点击左侧选择商标类别</span>
          </div>
          <div class="classData" v-else>
            <div class="classData-top">
              <h4 ref="bigKind">
                第{{ classCode }}类 {{ ncldata[classCode * 1 - 1].name }}
              </h4>
              <p>
                已选择
                <span>{{ classDataList.length }}</span
                >项
              </p>
              <i class="el-icon-delete" @click="deleteClassData"></i>
            </div>
            <div class="classData-main">
              <el-tag
                :key="index + 1 + '-' + tag.fullname"
                v-for="(tag, index) in classDataList"
                closable
                :disable-transitions="true"
                @close="handleClose(tag)"
                >{{ tag.fullname }}</el-tag
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getNiceQueryCategory,
  getNiceQueryFilter,
  word2pic,
  getOss,
  uploadStandardTm
} from "@/api/tmTools.js";
import UploadImg from "@/components/uploadImg";

export default {
  components: {
    UploadImg
  },
  data() {
    return {
      // 基本信息填写
      drawerRight: false,
      lookIndex: null,
      drawerTitle: "",
      ruleForm: {
        name: "",
        resource: 1
      },
      rules: {
        name: [{ required: true, message: "请输入商标名称", trigger: "blur" }],
        resource: [{ required: true, message: "", trigger: "change" }]
      },
      imgUrl: "",
      loading: false,
      action: "",
      data: {
        key: "zc_picUrl670615786273319262020010.jpg",
        Bucket: "gsb-zc",
        OSSAccessKeyId: "",
        Signature: "",
        policy: "",
        success_action_status: null
      },

      // 分类信息选择
      keyZi: "",
      props: {
        label(data) {
          if (data.code == null || data.code == null) {
            return data.name;
          } else {
            return data.code + " " + data.name;
          }
        },
        children: "children"
      },
      // 初始静态分类数据 和全部分类 typeList 的复用数据
      ncldata: [
        { 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 }
      ],
      // 被选中分类数据，最多十条
      classDataList: [],
      // 判断选中的是否是同一类别
      classCode: "",

      // 分类全部类别的显示
      typeListShow: false,
      isIndeterminate: true,
      checkAll: false,
      checkedType: [],
      checkedList: [],

      // 树是否展开
      isTreeExpand: false,

      // 自动生成 和 手动上传的图片 的保存
      autoImgToConfirm: "",
      manualImgToConfirm: ""
    };
  },
  created() {
    this.checkedList = this.ncldata;
  },
  methods: {
    // 抽屉展示
    getImgUrl(msg) {
      this.loading = true;
      this.imgUrl = msg;
      uploadStandardTm(this.imgUrl).then(res => {
        // 手动上传图片的 保存在 localStorage里面
        this.manualImgToConfirm = res.data.url;
        localStorage.setItem("manualImgToConfirm", this.manualImgToConfirm);

        this.loading = false;
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: "上传成功"
          });
        } else {
          this.$message.error("上传失败，请重新上传！");
        }
      });
    },
    setKey(name, flag) {
      var myDate = new Date();
      var key =
        "zc_" +
        flag +
        Math.round(Math.random() * 10000) +
        myDate.getTime() +
        myDate.getFullYear() +
        myDate.getMonth() +
        myDate.getDate() +
        ".jpg";
      return key;
    },
    lookImg(title, index) {
      this.drawerTitle = title;
      this.lookIndex = index;
      this.drawerRight = true;
    },
    // 自动生成
    automatic() {
      if (this.ruleForm.name) {
        this.loading = true;
        word2pic(this.ruleForm.name).then(res => {
          this.loading = false;
          if (res.status == 0) {
            this.imgUrl = res.data.url;
            // 自动生成的图片 保存在 localStorage里面
            this.autoImgToConfirm = res.data.url;
            localStorage.setItem("autoImgToConfirm", this.autoImgToConfirm);
          }
        });
      }
      // 传递参数，改变点击状态为true
      this.$bus.emit("on-click-brandauto", true);
    },
    manualupload() {
      // 传递参数，改变点击状态为true
      this.$bus.emit("on-click-brandmanual", true);
    },

    // 分类信息选择
    // 清除选中的标签
    handleClose(tag) {
      this.classDataList.splice(this.classDataList.indexOf(tag), 1);
      // 清除左边对应的数组的选中状态
      this.$refs.tree.setChecked(tag, false);
    },
    // 删除所有的分类标签数据
    deleteClassData() {
      this.$confirm("确定清空所有已选商品/服务项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 把左边的复选框的选中样式取消
          this.classDataList.map(item => {
            this.$refs.tree.setChecked(item, false);
          });
          // 数组置为空
          this.classDataList = [];
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 树形结构的处理节点是否被选中
    handleCheckChange(data, checked, indeterminate) {
      // 检测第三级节点是否被选中(一级节点两位code，二级节点四位code,三级节点6位或是0位code)
      if (data.code.length !== 2 || data.code.length !== 4) {
        // 如果第三级节点被选中
        if (checked) {
          // 判断选中的是否是同一类别
          if (!this.classDataList.length) {
            // 如果动态数据为空，就把这第一个选中的复选框的前两位类别码保存为全局的类别码
            this.classCode = data.pcode.substring(0, 2);
          }
          // 保存选中的节点的前两位
          let datacode = data.pcode.substring(0, 2);
          // 被选中的数据小于十条
          if (this.classDataList.length < 10) {
            // 被选中的数据属于同一个类别
            if (datacode == this.classCode) {
              let index = this.classDataList.findIndex((item, index) => {
                return data.code == item.code;
              });
              if (index == -1) {
                this.classDataList.push(data);
                // 把选中的小类数据保存在localstorage里面
                localStorage.setItem(
                  "classDataList",
                  JSON.stringify(this.classDataList)
                );
              }
            } else {
              // 被选中的数据不属于同一个类别，给出相应的提示信息
              this.$message({
                message: "只能选择同一个类别",
                type: "warning"
              });
              // 被选中的数据不属于同一个类别，把此节点设置为不可选中状态
              this.$refs.tree.setChecked(data, false);
            }
          } else {
            // 被选中的数据大于10条，给出相应提示，并把Checked设置为false
            this.$message({
              message: "最多选择10项",
              type: "warning"
            });
            this.$refs.tree.setChecked(data, false);
          }
        } else {
          // 如果第三级节点没被选中，找出没被选中的数据的下标，把其从数组中清除，以此实现左边勾选取消右侧的选中的标签数据的对应清除
          let index = this.classDataList.findIndex((item, index) => {
            return data.code == item.code;
          });
          if (index != -1) {
            this.classDataList.splice(index, 1);
          }
        }
      }
    },
    // 树形结构的节点数据的装填
    loadNode(node, resolve) {
      var hasChild;
      // 给出了树是否有子节点的判断条件，一级二级有子节点，三级没有
      if (node.data !== null) {
        hasChild = true;
      }

      // console.log(node);

      // 初始的一级45个类别的静态数据的装填
      if (node.level === 0) {
        return resolve(this.ncldata);
      }
      // 只有两级数据可以加载，一级和二级需要加载数据,大于三级的数据不加载置为空
      if (node.level > 2) return resolve([]);

      // 根据node.data.code得到对应的尼斯查询（一）接口 nclcode 的一级二级查询
      getNiceQueryCategory(node.data.code).then(res => {
        // 尼斯码为两位，给ncldata添加一级children
        if (node.data.code.length == 2) {
          let index = this.ncldata.findIndex((item, index) => {
            return item.code == node.data.code;
          });
          // console.log(index);
          this.ncldata[index].children = res.data.rows;
          setTimeout(() => {
            var data;
            if (hasChild) {
              data = this.ncldata[index].children;
            }
            resolve(data);
          }, 0);
        }
        // 尼斯码为四位，给ncldata添加二级children
        if (node.data.code.length == 4) {
          // 四位代码的(前两位代码*1-1)是第一级children的数据数组对象的装填，(后两位代码*1-1)是第二级children的数据数组对象的装填
          let index = this.ncldata.findIndex((item, index) => {
            return item.code == node.data.code.substring(0, 2);
          });
          this.ncldata[index].children[
            node.data.code.substring(2, 4) * 1 - 1
          ].children = res.data.rows;
          setTimeout(() => {
            var data;
            if (hasChild) {
              data = this.ncldata[index].children[
                node.data.code.substring(2, 4) * 1 - 1
              ].children;
            }
            resolve(data);
          }, 0);
        }
      });
    },

    // 全部选中
    handleCheckAllChange(val) {
      if (val) {
        let data = [];
        this.checkedList.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.checkedList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkedList.length;

      this.keyZi = "";
    },
    // 点击确定,隐藏类别选择框
    confirmClass() {
      this.typeListShow = false;
    },

    // 过滤关键字  绑定el-input的change事件,使得在输入框失去焦点或用户按下回车keyCode=13时触发
    filterKeyZi() {
      let classCodes = this.checkedType.map(item => {
        return item.substring(0, 2);
      });

      // 根据输入的关键字和选择的分类类别进行尼斯查询过滤
      getNiceQueryFilter(this.keyZi, classCodes).then(res => {
        console.log("过滤之后的尼斯数据:", res.data);
        // this.ncldata = [];
        this.ncldata = res.data;
      });
    },

    // 取消搜索
    cancelSearch() {
      this.keyZi = "";
      this.checkedType = [];
    }
  },
  mounted() {
    // 获取Oss
    getOss().then(res => {
      this.data = res.data;
      this.data.key = this.setKey();
      this.action = res.data.url;
    });

    // 获取并更改最外层父组件的数据
    this.$parent.$parent.abc = 456;
    console.log("11111", this.$parent.$parent.abc);
  },
  updated() {
    this.$nextTick(() => {
      // 商标类型
      this.$parent.$parent.confirmStepsParams.stepOneThreeParams.type = this.ruleForm.resource;
      //  商标名称
      this.$parent.$parent.confirmStepsParams.stepOneThreeParams.tname = this.ruleForm.name;
      // 如果已经选择了某一类，第xx类 xxx 已经渲染出来
      if (this.$refs.bigKind) {
        this.$parent.$parent.confirmStepsParams.stepOneThreeParams.bigKind = this.$refs.bigKind.innerHTML;
        this.$parent.$parent.confirmStepsParams.stepOneThreeParams.smallKinds = this.classDataList;
      }

      // 手动上传按钮的改变
      // this.manualupload();
    });
  }
};
</script>

<style lang="scss">
// 基本信息填写
.modifyTrademark {
  width: 100%;
  .el-drawer__container {
    background: rgba(0, 0, 0, 0.2);
  }
  .shangImg {
    width: 100% !important;
  }
  p {
    line-height: 25px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(74, 74, 74, 1);
    width: 100%;
    padding: 20px 30px;
  }
}
.categoryFrom {
  .el-input {
    input {
      width: 330px;
      height: 34px;
      border-radius: 0px;
    }
  }
  .a-span {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #409eff;
    cursor: pointer;
    margin-left: 30px;

    width: 108px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    line-height: 17px;
    margin-left: 30px;
  }

  .a-span:hover {
    color: #0989c5;
    text-decoration: underline;
  }

  .trademark-name {
    width: 100%;
    .div {
      width: 100%;
      display: flex;
      margin: 7px 0 24px;
      button {
        padding: 7px 15px;
        border-radius: 100px;
        color: rgb(102, 102, 102);
        font-size: 12px;
        position: relative;
      }
      .trademarkImg {
        width: 124px;
        height: 124px;
        border: 2px dashed #e9e9e9;
        position: relative;
        .loadingImg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        font-family: PingFangSC-Regular;
        padding: 20px;
        font-size: 12px;
        color: #bbbbbb;
        line-height: 20px;
        flex: 1;
      }
      p.vertical-bottom {
        height: 20px;
        display: block;
        margin-top: 80px;
      }
      .p-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        p {
          padding: 0 20px;
          line-height: 25px;
          span {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }
}

// 分类信息选择
.classTrademark {
  width: 100%;
  display: flex;
  .classTrademark-left {
    width: 295px;
    position: relative;
  }
  .classTrademark-right {
    flex: 1;
  }
}
.classTrademark-left-top {
  width: 100%;
  height: 54px;
  border: 1px solid #dee0eb;
  background: #eef2fb;
  display: flex;
  .el-button {
    width: 50px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border-radius: 0px;
    margin: 10px;
  }
  .el-input {
    width: 180px;
    height: 34px;
    font-size: 12px;
    margin: 10px 0;
    input {
      width: 100%;
      height: 100%;
      border-radius: 0px;
    }
  }
  .quxiao {
    flex: 1;
    font-size: 12px;
    color: #3f7bff;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
  }
}
// 全部类别
.classTrademark-typelist {
  border: 1px solid #ebeef5;
  background-color: #fff;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  z-index: 1000;
  font-size: 13px;
  color: #303133;
  padding-bottom: 20px;
  position: absolute;
  top: 0;
  width: 100%;
  margin: 0px 2%;
  .typelist-nav {
    padding: 10px 20px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  > div.el-checkbox-group {
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    > label.el-checkbox {
      width: 20%;
      padding: 3px;
    }
  }
}

.classTrademark-left-tree::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
.classTrademark-left-tree::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #eef2fb;
}
.classTrademark-left-tree::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #fff;
}
.classTrademark-left-tree {
  width: 100%;
  height: 500px;
  border: 1px solid #dee0eb;
  border-top: none;
  overflow: auto;
  div.el-tree {
    margin-left: 15px;
  }
  .el-tree > .el-tree-node > .el-tree-node__content > .el-checkbox {
    display: none;
  }
  .el-tree
    > .el-tree-node
    > .el-tree-node__children
    > .el-tree-node
    > .el-tree-node__content
    > .el-checkbox {
    display: none;
  }
  .el-tree
    > .el-tree-node
    > .el-tree-node__children
    > .el-tree-node
    > .el-tree-node__children
    > .el-tree-node
    > .el-tree-node__content
    > .el-tree-node__expand-icon {
    display: none;
  }
}
.classTrademark-right-top {
  width: 100%;
  height: 54px;
  border: 1px solid #dee0eb;
  border-left: none;
  background: #eef2fb;
  padding: 0 10px 0 20px;
  p {
    line-height: 53px;
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
  }
  span {
    float: right;
    line-height: 53px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #3f7bff;
    cursor: pointer;
  }
}
.classTrademark-right-main {
  width: 100%;
  height: 500px;
  border: 1px solid #dee0eb;
  border-top: none;
  border-left: none;
  overflow: auto;
  .notData {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    span {
      font-size: 13px;
      color: #828282;
      line-height: 30px;
    }
  }
  .classData {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .classData-top {
      width: 100%;
      display: flex;
      margin-bottom: 14px;
      h4 {
        flex: 6;
      }
      p {
        flex: 2;
        span {
          color: #3f7bff;
        }
      }
      i {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
    .classData-main {
      flex: 1;
      overflow: auto;
      .el-tag {
        border-radius: 0;
        background: #fff;
        margin: 7px 7px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
      }
    }
  }
}
</style>
