<template>
  <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" @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>第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 class="drawer-bottom">
      <button class="esc">取消</button>
      <button class="enter">保存</button>
    </div>
    <!--  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      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: {
    handleClose(tag) {
      console.log(tag);
      this.classDataList.splice(this.classDataList.indexOf(tag), 1);
    },
    deleteClassData() {
      this.$confirm("确定清空所有已选商品/服务项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.classDataList = [];
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
.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>
