<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>
                  <el-button>手动上传</el-button>
                  <el-button>自动生成</el-button>
                </div>
                <div>
                  <div class="trademarkImg">
                    <img src="@/assets/imgs/zwtp.png" 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>
                  <div class="trademarkImg">
                    <img src alt />
                  </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>分类</el-button>
          <el-input placeholder="请输入关键字进行过滤" suffix-icon="el-icon-search" v-model="keyZi"></el-input>
          <span class="quxiao">取消</span>
        </div>
        <!-- 树形控件 -->
        <div class="classTrademark-left-tree">
          <el-tree
            :data="ncldata"
            show-checkbox
            empty-text="暂无数据"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :props="props"
          ></el-tree>
        </div>
      </div>
      <!--  -->
      <div class="classTrademark-right">
        <div class="classTrademark-right-top">
          <p>已选择的商品/服务项</p>
          <span class="el-icon-delete">清除全部</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">
            <div class="classData-top">
              <h4>第02类 颜料油漆</h4>
              <p>
                已选择
                <span>1</span>项
              </p>
              <i class="el-icon-delete"></i>
            </div>
            <div class="classData-main">
              <el-tag
                :key="tag"
                v-for="tag in classDataList"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >{{ tag }}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNcldata } from "@/api/api.js";
export default {
  data() {
    return {
      // 基本信息填写
      drawerRight: false,
      lookIndex: null,
      drawerTitle: "",
      ruleForm: {
        name: "",
        resource: 1
      },
      rules: {
        name: [{ required: true, message: "请输入商标名称", trigger: "blur" }],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ]
      },

      // 分类信息选择
      keyZi: "",
      props: {
        label(data) {
          if (data.code == null || data.code == null) {
            return data.name;
          } else {
            return data.code + " " + data.name;
          }
        },
        children: "children"
      },
      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: [
        "121233",
        "1qwe23",
        "12qwe3",
        "12weqwe3",
        "123",
        "12adsa3",
        "12qweq3",
        "12dad3",
        "1asd23",
        "12asd3",
        "12adqwe3"
      ]
    };
  },
  methods: {
    lookImg(title, index) {
      this.drawerTitle = title;
      this.lookIndex = index;
      this.drawerRight = true;
    },
    // 分类信息选择
    handleClose(tag) {
      console.log(tag);
      this.classDataList.splice(this.classDataList.indexOf(tag), 1);
    }
  },
  mounted() {
    getNcldata().then(res => {
      console.log(res.data);
    });
  }
};
</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;
  }
  .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;
      }
      .trademarkImg {
        width: 124px;
        height: 124px;
        border: 2px dashed #e9e9e9;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        font-family: PingFangSC-Regular;
        padding: 20px;
        font-size: 12px;
        color: #bbbbbb;
        line-height: 20px;
        flex: 1;
      }
      .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;
  }
  .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-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;
}
.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>
