<!-- 第一步：填写基本信息 商标信息  分类选择-->
<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>
              <span v-if="ruleForm.resource == 3">及图</span>
            </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 class="vertical-bottom">
                    <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 style="display:none"></el-input>
          <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="checkedNcl"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="n in nclOptions" :label="n" :key="n">{{
              n
            }}</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"
            :render-after-expand="false"
            lazy
            :load="loadNode"
            ref="tree"
            id="classtree"
            @check-change="handleCheckChange"
          ></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.code + " " + tag.name }}</el-tag
              >
              <!-- {{ tag.fullname }} -->
            </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, node) {
          // data == node.data
          // console.log(data, node, "two params of label function");
          if (data.code == null || node.data.code == null) {
            return data.name;
          } else {
            return data.code + " " + data.name;
          }
        },
        children: "children"
      },
      // 初始静态分类数据 和 全部分类 typeList 的复用数据
      ncldata: [
        { code: "01", name: "化学原料" },
        { code: "02", name: "颜料油漆" },
        { code: "03", name: "日化用品" },
        { code: "04", name: "燃料油脂" },
        { code: "05", name: "医药" },
        { code: "06", name: "金属材料" },
        { code: "07", name: "机械设备" },
        { code: "08", name: "手工器械" },
        { code: "09", name: "科学仪器" },
        { code: "10", name: "医疗器械" },
        { code: "11", name: "灯具空调" },
        { code: "12", name: "运输工具" },
        { code: "13", name: "军火烟火" },
        { code: "14", name: "珠宝钟表" },
        { code: "15", name: "乐器" },
        { code: "16", name: "办公用品" },
        { code: "17", name: "橡胶制品" },
        { code: "18", name: "皮革皮具" },
        { code: "19", name: "建筑材料" },
        { code: "20", name: "家具" },
        { code: "21", name: "厨房洁具" },
        { code: "22", name: "绳网袋篷" },
        { code: "23", name: "纱线丝" },
        { code: "24", name: "布料床单" },
        { code: "25", name: "服装鞋帽" },
        { code: "26", name: "纽扣拉链" },
        { code: "27", name: "地毯席垫" },
        { code: "28", name: "健身器材" },
        { code: "29", name: "食品" },
        { code: "30", name: "方便食品" },
        { code: "31", name: "饲料种籽" },
        { code: "32", name: "啤酒饮料" },
        { code: "33", name: "酒" },
        { code: "34", name: "烟草烟具" },
        { code: "35", name: "广告销售" },
        { code: "36", name: "金融物管" },
        { code: "37", name: "建筑修理" },
        { code: "38", name: "通讯服务" },
        { code: "39", name: "运输贮藏" },
        { code: "40", name: "材料加工" },
        { code: "41", name: "教育娱乐" },
        { code: "42", name: "网站服务" },
        { code: "43", name: "餐饮住宿" },
        { code: "44", name: "医疗园艺" },
        { code: "45", name: "社会服务" }
      ],
      // 被选中分类数据，最多十条
      classDataList: [],
      // 判断选中的是否是同一类别
      classCode: "",

      // 分类全部类别的显示
      typeListShow: false,
      isIndeterminate: true,
      checkAll: false,
      checkedNcl: [],
      // 尼斯数据分类选择
      nclOptions: [
        "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"
      ],

      // 是否没有搜索过
      notSearched: true,
      searchedList: []
    };
  },
  created() {},
  methods: {
    // 抽屉展示
    getImgUrl(msg) {
      this.loading = true;
      this.imgUrl = msg;
      uploadStandardTm(this.imgUrl).then(res => {
        this.loading = false;
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: "上传成功"
          });
          // 获取Oss
          getOss().then(res => {
            this.data = res.data;
            this.data.key = this.setKey();
            this.action = res.data.url;
          });
        } else {
          this.$message.error("上传失败，请重新上传！");
        }
      });
    },
    setKey(name, flag) {
      // console.log(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;
          }
        });
      }
    },
    manualupload() {},

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

    // 树形结构的处理节点是否被选中
    handleCheckChange(data, checked, indeterminate) {
      // console.log("check-change", 11111111111, indeterminate, data);

      // 检测第三级节点是否被选中(一级节点两位code，二级节点四位code,三级节点6位或是0位code)
      if (data.code.length !== 2 || data.code.length !== 4) {
        // 如果第三级节点被选中
        if (checked) {
          // 判断选中的是否是同一类别
          if (!this.classDataList.length) {
            // 如果动态数据为空，就把这第一个选中的复选框的父级代码pcode前两位类别码保存为全局的类别码
            this.classCode = data.pcode.substring(0, 2);
          }
          // 保存选中的节点的父级代码前两位
          let datacode = data.pcode.substring(0, 2);
          // 被选中的数据小于十条
          if (this.classDataList.length < 10) {
            // console.log(this.classDataList);
            // 被选中的数据属于同一个类别
            if (datacode == this.classCode) {
              let index = this.classDataList.findIndex((item, index) => {
                //  item.code可能不存在
                // return data.code == item.pcode.substring(0, 2);
                return data.name == item.name;
              });
              // 索引是 -1，不是常规的索引下标，代表这个元素不存在于这个数组之中
              if (index == -1) {
                // classDataList的装填
                this.classDataList.push(data);
              }
            }
            // 被选中的数据不属于同一类别
            else {
              alert(
                "hello,here is some problems.Maybe i need separate or rebuid/improvement the logic of choice/search---tree.At least I need deal with classDataList more Scientifically.  "
              );
              // 被选中的数据不属于同一个类别，把此节点设置为不可选中状态
              this.$refs.tree.setChecked(data, false, true);

              // 被选中的数据不属于同一个类别，给出相应的提示信息
              this.$message({
                message: "只能选择同一个类别",
                type: "warning"
              });
            }
          }
          // 被选中的数据大于10条，给出相应提示，并把Checked设置为false
          else {
            this.$message({
              message: "最多选择10项",
              type: "warning"
            });
            // 把此节点设置为不可选中状态
            this.$refs.tree.setChecked(data, false, true);
          }
        }
        // 如果第三级节点没被选中，找出没被选中的数据的下标，把其从数组中清除，以此实现左边勾选取消右侧的选中的标签数据的对应清除
        else {
          let index = this.classDataList.findIndex((item, index) => {
            // 注意： item.code可能不存在 data.code同样可能不存在
            // return data.code == item.pcode.substring(0, 2);
            return data.name == item.name;
          });

          if (index != -1) {
            this.classDataList.splice(index, 1);
          }
        }
      }
    },
    // 树形结构的节点数据的装填
    loadNode(node, resolve) {
      // console.log(node, "loadNode load function");
      var hasChild;
      // 没有搜索过
      if (this.notSearched) {
        // 给出了树是否有子节点的判断条件，一级二级有子节点，三级没有
        if (node.data !== null) {
          hasChild = true;
        }

        // 初始的一级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;
            });
            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);
          }
        });
      }
      // 尼斯搜索后
      else {
        // 只保留 resolve(node.data.children); 也可以，因为后端接口返回的是一个完整的 tree的data格式，包含一级二级三级数据，可以直接渲染二级的子，得到三级树叶子
        // 装填一级节点
        if (node.level == 1) {
          let index = this.searchedList.findIndex(item => {
            // return item.code == node.data.code;
            return item.name == node.data.name;
          });
          let data = this.searchedList[index];
          // 装填上 搜回来的数据的 一级数据 xx xxxx 尼斯大类 的 子集 xxxx xxxx二级尼斯数据
          resolve(data.children);
        }
        // 如果是二级节点
        else if (node.level == 2) {
          console.log(node.data.children, "array observer");
          // 装填二级节点的子集 三级的可选的 商品/服务项
          resolve(node.data.children);
        }
      }
    },

    // 全部选中
    handleCheckAllChange(val) {
      this.checkedNcl = val ? this.nclOptions : [];
      this.isIndeterminate = false;
    },
    //选中
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.nclOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.nclOptions.length;
    },
    // 点击确定,隐藏类别选择框
    confirmClass() {
      this.typeListShow = false;
      // 确定好分类之后,当搜索关键字为空时，不触发搜索，因为查询接口返回的数据为[]
      if (this.keyZi != "") {
        this.filterKeyZi();
      }
    },

    // 过滤关键字 绑定.native回车事件 用户按下回车keyCode=13时触发
    filterKeyZi() {
      var _that = this;
      this.notSearched = false;

      //  从 checkedNcl 里面截取类别码
      let classCodes = this.checkedNcl.map(item => {
        return item.substring(0, 2);
      });
      console.log(this.keyZi);
      // 当关键字非空时进行查询,否则返回的数据为空
      if (this.keyZi != "") {
        // 根据输入的关键字和选择的分类类别进行尼斯查询过滤
        getNiceQueryFilter(this.keyZi, classCodes).then(res => {
          console.log("过滤之后的尼斯数据:", res.data);
          if (res.data != null) {
            if (res.data.length) {
              _that.searchedList = res.data;
              _that.ncldata = res.data;
            } else {
              // 利用el-tree的  empty-text="暂无数据" 属性  显示出 暂无数据的查询结果
              this.ncldata = [];
            }
          }
        });
      }
    },

    // 取消搜索
    cancelSearch() {
      this.keyZi = "";
      console.log(this.ncldata);
      // 给ncldata重新附上 初始静态数据
      this.ncldata = [
        { code: "01", name: "化学原料" },
        { code: "02", name: "颜料油漆" },
        { code: "03", name: "日化用品" },
        { code: "04", name: "燃料油脂" },
        { code: "05", name: "医药" },
        { code: "06", name: "金属材料" },
        { code: "07", name: "机械设备" },
        { code: "08", name: "手工器械" },
        { code: "09", name: "科学仪器" },
        { code: "10", name: "医疗器械" },
        { code: "11", name: "灯具空调" },
        { code: "12", name: "运输工具" },
        { code: "13", name: "军火烟火" },
        { code: "14", name: "珠宝钟表" },
        { code: "15", name: "乐器" },
        { code: "16", name: "办公用品" },
        { code: "17", name: "橡胶制品" },
        { code: "18", name: "皮革皮具" },
        { code: "19", name: "建筑材料" },
        { code: "20", name: "家具" },
        { code: "21", name: "厨房洁具" },
        { code: "22", name: "绳网袋篷" },
        { code: "23", name: "纱线丝" },
        { code: "24", name: "布料床单" },
        { code: "25", name: "服装鞋帽" },
        { code: "26", name: "纽扣拉链" },
        { code: "27", name: "地毯席垫" },
        { code: "28", name: "健身器材" },
        { code: "29", name: "食品" },
        { code: "30", name: "方便食品" },
        { code: "31", name: "饲料种籽" },
        { code: "32", name: "啤酒饮料" },
        { code: "33", name: "酒" },
        { code: "34", name: "烟草烟具" },
        { code: "35", name: "广告销售" },
        { code: "36", name: "金融物管" },
        { code: "37", name: "建筑修理" },
        { code: "38", name: "通讯服务" },
        { code: "39", name: "运输贮藏" },
        { code: "40", name: "材料加工" },
        { code: "41", name: "教育娱乐" },
        { code: "42", name: "网站服务" },
        { code: "43", name: "餐饮住宿" },
        { code: "44", name: "医疗园艺" },
        { code: "45", name: "社会服务" }
      ];
      // 把树的状态 改为 没有搜索过, 可以加载数据了
      this.notSearched = true;
    }
  },
  mounted() {
    // 获取Oss
    getOss().then(res => {
      this.data = res.data;
      this.data.key = this.setKey();
      this.action = res.data.url;
    });
  },

  // 获取并修改父组件里面的第一步填写基本信息的参数，以供在第三步确认订单里面进行使用和更新
  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.$parent.$parent.confirmStepsParams.stepOneThreeParams.icon = this.imgUrl;
      // 存储商标图样
      localStorage.setItem("icon", this.imgUrl);
    });
  }
};
</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 {
    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;
          }
        }
      }
    }
  }
  // 类型是 文字及图形时 及图 字样的显示
  > .demo-ruleForm > .el-form-item > .el-form-item__content > div.el-input {
    display: inline-block;
    width: 350px;
  }
}

// 分类信息选择
.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;
  p {
    text-align: center;
    color: #666;
    padding: 20px 0;
  }
  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>
