<template>
  <a-modal
      class="funcNetDialog"
      :title="$t('functional-analysis.top-modal.variant-matrix')"
      :visible="modalVisible"
      :maskClosable="false"
      @cancel="closeModal"
      :keyboard="false"
      width="100%"
      destroy-on-close
      :footer="false"
      @afterClose="closeModal">
    <div class="mt5">
      <!-- tree表格 Start -->
      <a-spin :spinning="treeTableLoading">
        <a-list v-show="isEmpty" :data-source="[]"/>
        <ul id="variantTree" class="ztree"/>
      </a-spin>
      <!-- tree表格 End -->

      <!-- 添加变体modal Start -->
      <div id="add-modal" class="hide">
        <div class="ant-table-filter-dropdown ant-dropdown-content">
          <div style="padding: 8px;">
            <input
                id="add-modal-input"
                :placeholder="$t('functional-analysis.top-modal.please-enter-name')"
                type="text"
                class="ant-input"
                style="width: 188px; margin-bottom: 8px; display: block;"
                maxlength="500">
            <div class="text-right">
              <button type="button" class="mr5 ant-btn ant-btn-sm" @click="closeAddModal">
                <span>{{ $t('global-btn.close') }}</span>
              </button>
              <button type="button" class="ant-btn ant-btn-primary ant-btn-sm" @click="saveVariant">
                <span>{{ $t('global-btn.save') }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加变体modal End -->
    </div>
  </a-modal>
</template>

<script>

import {fuzzySearch} from './components/fuzzysearch';
import {replaceNullName} from "@/utils/tree";
import EditTableTitle from './components/EditTableTitle';

export default {
  name: "VariantMatrixModal",
  components: {
    EditTableTitle,
  },
  props: {
    showVariantMatrixModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      /** 模态框是否可见 */
      modalVisible: false,
      /** ztree 配置项 */
      setting: {
        data: {
          key: {
            title: "title"
          },
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: "00000000000000000000000000000000"
          }
        },
        view: {
          fontCss: this.setNodeFontCss,
          // showIcon: this.showIconForTree,
          showLine: false,
          showTitle: true,
          nameIsHTML: true,
          dblClickExpand: false,
          selectedMulti: false,
          txtSelectedEnable: true,
          addDiyDom: this.addDiyDom
        },
        async: {
          enable: true,
          url: +"/reliakits/Rb04261V1/search.do?",
          dataType: "json",
          dataFilter: this.filterStruct
        },
      },
      /** 变体表格树数据 */
      variantTreeData: [],
      /** 变体表格头部数据 */
      variantHeadData: [],
      /** 变体表格体数据 */
      variantBodyData: [],
      /** tree表格加载中状态 */
      treeTableLoading: false,
      /** 是否显示空状态 */
      isEmpty: true,
      /** 编辑执行状态 */
      editExecutionStatus: false
    };
  },
  watch: {
    showVariantMatrixModal(val) {
      this.modalVisible = val;
    }
  },
  mounted() {
    window.loopTreeNodeParent = this.loopTreeNodeParent;
    window.loopTreeNodeChild = this.loopTreeNodeChild;
    window.saveTableCheck = this.saveTableCheck;
    window.handleDbClickVariant = this.handleDbClickVariant;
    window.delVariant = this.delVariant;
  },
  methods: {
    /**
     * 关闭模态框
     */
    closeModal() {
      this.isEmpty = true;
      this.$emit("closeModal");
      this.$emit("initLeftTree");
      this.$emit("initRightTree");
      this.$emit("initVariantSelect");
      this.$emit("initVariantSelectByVariantId");
    },
    /**
     * 设置节点样式
     * @param treeId
     * @param treeNode
     */
    setNodeFontCss(treeId, treeNode) {
      let color = {};
      switch (treeNode.struTypeCode) {
        case '02' :
          color = {'color': 'rgb(66, 167, 94)'};
          break;
        case '04' :
          color = {'color': '#5b9bd5'};
          break;
        case '05' :
          color = {'color': '#5b9bd5'};
          break;
        case '06' :
          color = {'color': 'rgb(200, 77, 60)'};
          break;
      }
      return color;
    },
    /**
     * 根据节点类型不同,展示不同的Icon
     * @param node 节点
     */
    getNodeIcon(node) {
      let iconClass = "iconfont ";
      switch (node.struTypeCode) {
        case '01': // 结构
          iconClass += this.$store.getters.treeIcons.structure;
          break;
        case '99': // 接口
          iconClass += this.$store.getters.treeIcons.interface;
          break;
        case '02': // 功能
          iconClass += this.$store.getters.treeIcons.function;
          break;
        case '04': // 产品特性
          iconClass += this.$store.getters.treeIcons.productFeature;
          break;
        case '05': // 要求
          iconClass += this.$store.getters.treeIcons.require;
          break;
        case '06': // 失效
          iconClass += this.$store.getters.treeIcons.fault;
          break;
        case '14': // 当前措施
          iconClass += this.$store.getters.treeIcons.currentMeasure;
          break;
        case '07': // 优化措施
          iconClass += this.$store.getters.treeIcons.optimizeMeasure;
          break;
        case '08': // 措施组
          iconClass += this.$store.getters.treeIcons.group;
          break;
        case '09': // 预防措施
          iconClass += this.$store.getters.treeIcons.preventionMeasure;
          break;
        case '10': // 探测措施
          iconClass += this.$store.getters.treeIcons.probeMeasure;
          break;
      }
      return '<i class="' + iconClass + '"></i>&nbsp';
    },
    /**
     * 关闭添加Modal
     */
    closeAddModal() {
      $("#add-modal").toggleClass('hide');
    },
    /**
     * 获取表格数据
     */
    async getTableData() {
      let _that = this;
      try {
        _that.treeTableLoading = true;
        await _that.getTableLeftTree();
        await _that.getTableVariant();
      } finally {
        _that.isEmpty = false;
        _that.treeTableLoading = false;
      }
    },
    /**
     * 获取表格左侧树
     */
    async getTableLeftTree() {
      let _that = this;
      await _that.$api.getVariantMatrixLeftTree({
        fmeaId: _that.$store.getters.rfmeaId,
      }).then(res => {
        if (res.flag) {
          _that.variantTreeData = res.data.rdfmStruTreeModels;
          // 遍历
          _that.variantTreeData.forEach(node => {
            // 默认展开根节点
            if ('00000000000000000000000000000000' === node.pid) {
              node['open'] = true;
            }
            // 处理空值
            node.name = replaceNullName(node);
            // 追加title
            node['title'] = node.name;
            // 设置icon
            node['icon'] = _that.getNodeIcon(node);
            // 追加图标
            node.name = node['icon'] + node.name
          });
          // 默认展开根节点
          _that.variantTreeData[0].open = true;
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
    /**
     * 获取表格变体
     */
    async getTableVariant() {
      let _that = this;
      await _that.$api.getVariantMatrix({
        fmeaId: _that.$store.getters.rfmeaId,
      }).then(res => {
        if (res.flag) {
          _that.variantHeadData = res.data.variantManagerModels;
          _that.variantBodyData = res.data.variantMatrixModels;
          // 初始化
          $.fn.zTree.init($("#variantTree"), _that.setting, _that.variantTreeData);
          // 处理表格头部
          _that.handleTableHead();
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
    /**
     * 自定义Dom
     * @param treeId
     * @param treeNode
     */
    addDiyDom(treeId, treeNode) {
      const spaceWidth = 15;
      const liObj = $("#" + treeNode.tId);
      const aObj = $("#" + treeNode.tId + "_a");
      const switchObj = $("#" + treeNode.tId + "_switch");
      const icoObj = $("#" + treeNode.tId + "_ico");
      const spanObj = $("#" + treeNode.tId + "_span");
      spanObj.attr('title', treeNode.title);
      aObj.append('<div class="divTd" style="overflow:hidden;text-overflow:ellipsis;"></div>');
      const div = $(liObj).find('div').eq(0);
      switchObj.remove();
      spanObj.remove();
      icoObj.remove();
      div.append(switchObj);
      div.append(spanObj);
      const spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
      switchObj.before(spaceStr);
      let editStr = '';
      const treeObj = $.fn.zTree.getZTreeObj(treeId);
      this.variantHeadData.forEach(item => {
        editStr += '<div class="divTd variant body-' + item.variantId + '">' + this.handleTableBodyCheckbox(treeObj, treeNode, item) + '</div>';
      });
      aObj.append(editStr);
    },
    /**
     * 处理表格复选框
     * @param treeObj
     * @param treeNode
     * @param variantManager
     */
    handleTableBodyCheckbox(treeObj, treeNode, variantManager) {
      let isChecked = true;
      let htmlStr = '<div class="icon_div">';
      // 获取父节点选中状态
      const pid = treeNode.pid;
      this.variantBodyData.forEach(item => {
        if (treeNode.id === item.struId
            && item.variantId === variantManager.variantId) {
          isChecked = false;
        }
      });
      if (pid !== '00000000000000000000000000000000') {
        htmlStr += this.handleCheckbox(treeNode.id, variantManager.variantId, isChecked);
      }
      htmlStr += '</div>';
      return htmlStr;
    },
    /**
     * 处理复选框
     * @param nodeId 节点ID
     * @param variantId 变体ID
     * @param checked 勾选状态
     */
    handleCheckbox(nodeId, variantId, checked) {
      return '<label class="ant-checkbox-wrapper">'
          + '<span class="ant-checkbox ' + (checked ? "ant-checkbox-checked" : "") + '">'
          + '<input id="' + nodeId + variantId + '" type="checkbox" class="ant-checkbox-input"'
          + (checked ? 'checked ' : ' ')
          + 'onclick="checkedVariant(\'' + nodeId + '\',\'' + variantId + '\')">'
          + '<span class="ant-checkbox-inner"></span>'
          + '</span>'
          + '</label>'
    },
    /**
     * 递归处理树节点(下级)
     * @param nodes
     * @param childrens
     */
    loopTreeNodeChild(nodes, childrens) {
      for (let i = 0, len = nodes.length; i < len; i++) {
        childrens.push(nodes[i].id);
        if (nodes[i].children && nodes[i].children.length > 0) {
          this.loopTreeNodeChild(nodes[i].children, childrens);
        }
      }
    },

    /**
     * 递归处理树节点(上级)
     * @param id
     * @param parents
     */
    loopTreeNodeParent(id, parents) {
      let treeObj = $.fn.zTree.getZTreeObj("variantTree");
      let node = treeObj.getNodeByParam("id", id, null);
      parents.push(id);
      if (node.pid !== "00000000000000000000000000000000") {
        this.loopTreeNodeParent(node.pid, parents);
      }
    },
    /**
     * 处理表格头部：搜索
     */
    handleTableHeadSearch() {
      return '<span class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper">'
          + '<span class="ant-input-wrapper ant-input-group">'
          + '<input id="fuzzySearchInput" placeholder="' + this.$t('functional-analysis.top-modal.please-enter-name') + '" type="text" class="ant-input" maxlength="500">'
          + '<span class="ant-input-group-addon">'
          + '<button type="button" title="' + this.$t('global-btn.search') + '" onclick="handleSearch()" class="ant-btn ant-btn-primary ant-input-search-button">'
          + '<i aria-label="图标: search" class="anticon anticon-search">'
          + '<svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">'
          + '<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">'
          + '</path>'
          + '</svg>'
          + '</i>'
          + '</button>'
          + '</span>'
          + '</span>'
          + '</span>'
    },
    /**
     * 处理表格头部：添加
     */
    handleTableHeadAdd() {
      return '<span class="icon-add" onclick="handleAddModal(event)">'
          + '<i class="iconfont iconjia" title="' + this.$t('global-btn.add') + '"></i>'
          + '</span>'
    },
    /**
     * 处理表格头部输入框
     * @param variantId 变体ID
     */
    handleTableHeadInput(variantId) {
      return '<input id="variant-name-input' + variantId + '" ondblclick="variantDblClick(\'' + variantId + '\')" '
          + 'style="display: none" type="text" class="ant-input" maxlength="500">'
    },
    /**
     * 处理表格头部操作按钮
     * @param variantId 变体ID
     */
    handleTableHeadBtn(variantId) {
      return '<div id="variant-btn' + variantId + '">'
          + '<i class="iconfont iconicon-bainji" title="' + this.$t('global-btn.edit') + '" onclick="dbClickVariant(\'' + variantId + '\')"></i>'
          + '<i class="iconfont iconshanchu" title="' + this.$t('global-btn.delete') + '" onclick="delVariant(\'' + variantId + '\')"></i>'
          + '</div>'
    },
    /**
     * 处理表格头部：变体
     * @param obj
     */
    handleTableHeadVariant(obj) {
      return '<div class="divTd variant" id="head-' + obj.variantId + '" ondblclick="dbClickVariant(\'' + obj.variantId + '\')">'
          + (this.$api.isLook !== '1' ? this.handleTableHeadBtn(obj.variantId) : '')
          + '<div class="variant-name" title="' + obj.name + '">'
          + '<span id="variant-name' + obj.variantId + '">' + obj.name + '</span>'
          + '</div>'
          + this.handleTableHeadInput(obj.variantId)
          + '</div>';
    },
    /**
     * 处理表格头部
     */
    handleTableHead() {
      let _that = this;
      //添加表头
      let li_head = ' <li class="head">'
          + '<div class="divTd" style="text-align: center">';
      // 处理表格头部：搜索框
      li_head += _that.handleTableHeadSearch();
      // 处理表格头部：添加按钮
      if (_that.$api.isLook !== '1') {
        li_head += _that.handleTableHeadAdd();
      }
      li_head += '</div>';
      _that.variantHeadData.forEach(item => {
        // 处理表格头部：变体
        li_head += _that.handleTableHeadVariant(item);
      });
      li_head += '</li>';
      let rows = $("#variantTree").find('li');
      rows.eq(0).before(li_head)
    },
    /**
     * 处理双击变体
     * @param variantId 变体ID
     */
    handleDbClickVariant(variantId) {
      let _that = this;
      if (_that.$api.isLook === '1') return;

      let inputObj = $("#variant-name-input" + variantId);
      let nameObj = $("#variant-name" + variantId);
      let btnObj = $("#variant-btn" + variantId);

      nameObj.css("display", "none");
      btnObj.css("display", "none");
      inputObj.css("display", "inline");
      let oldName = nameObj.text();
      inputObj.val(oldName);
      inputObj.focus();

      // 失去焦点
      inputObj.unbind('blur').blur(() => {
        if (_that.validateName(variantId, oldName)) {
          _that.updateVariant(variantId, oldName);
        }
      }).unbind('keyup').keyup((event) => {
        if (event.keyCode === 13) { // Enter
          if (_that.validateName(variantId, oldName)) {
            _that.updateVariant(variantId, oldName);
            inputObj.unbind('blur');
          }
        } else if (event.keyCode === 27) {  // Ecs
          inputObj.unbind('blur');
          _that.returnEditInput(variantId);
        }
      });
    },
    /**
     * 校验名称
     * @param variantId 变体ID
     * @param oldName 旧名称
     */
    validateName(variantId, oldName) {
      let _that = this;
      let newName = $("#variant-name-input" + variantId).val();
      if (!newName) {
        _that.$message.warning(this.$t('global-message.warn.name-is-required'));
        return false;
      }
      // 前后名称不变，直接return
      if (newName === oldName) {
        _that.returnEditInput(variantId);
        return false;
      }
      return true;
    },
    /**
     * 退回编辑状态下Input框
     * @param variantId 变体ID
     */
    returnEditInput(variantId) {
      $("#variant-name-input" + variantId).css("display", "none");
      $("#variant-name" + variantId).css("display", "inline");
      $("#variant-btn" + variantId).css("display", "inline");
    },
    /**
     * 修改变体
     * @param variantId 变体ID
     */
    updateVariant(variantId) {
      let _that = this;
      let newName = $("#variant-name-input" + variantId).val();
      _that.$api.updateVariantName({
        fmeaId: _that.$store.getters.rfmeaId,
        variantId: variantId,
        name: newName,
      }).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);
          $("#variant-name" + variantId).text(newName);
          $("#variant-name" + variantId).parent().attr('title', newName);
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      }).finally(() => {
        _that.returnEditInput(variantId);
      });
    },
    /**
     * 处理节点展开/折叠
     */
    handleNodeExpand() {
      let _that = this;
      let treeObj = $.fn.zTree.getZTreeObj("variantTree");
      let nodes = treeObj.getNodesByParam("open", false, null);
      if (nodes && nodes.length > 0) {
        let closeNodeIds = nodes.map(node => node.id);
        _that.variantTreeData.forEach(node => {
          node.open = closeNodeIds.indexOf(node.id) === -1;
        });
      }
    },
    /**
     * 保存变体
     */
    saveVariant() {
      let _that = this;
      let name = $('#add-modal-input').val();
      if (!name || name.trim().length === 0) {
        _that.$message.warning(this.$t('global-message.warn.name-is-required'));
        return;
      }
      _that.$api.saveVariant({
        fmeaId: _that.$store.getters.rfmeaId,
        name: name,
      }).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);
          _that.handleNodeExpand();
          _that.getTableVariant();
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      }).finally(() => {
        _that.closeAddModal();
        $('#add-modal-input').val('');
      });
    },
    /**
     * 删除变体
     * @param variantId 变体ID
     */
    delVariant(variantId) {
      let _that = this;
      _that.$confirm({
        title: this.$t('global-message.warn'),
        content: this.$t('global-message.warn.delete-variant-matrix'),
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onCancel() {
        },
        onOk() {
          _that.$api.deleteVariant({
            fmeaId: _that.$store.getters.rfmeaId,
            variantId: variantId,
          }).then((res) => {
            if (res.flag) {
              _that.$message.success(res.message, 1);
              _that.handleNodeExpand();
              _that.getTableVariant();
            } else {
              _that.$message.error(res.message, 1);
            }
          }).catch((error) => {
            _that.$message.error(error.response.data.message, 1);
          });
        },
      });
    },
    /**
     * 保存表格勾选
     * @param node 节点
     * @param variantId 变体ID
     * @param checked 勾选状态
     * @param treeObj tree对象
     * @param joinNodeIds 相关联节点ID
     */
    saveTableCheck(node, variantId, checked, treeObj, joinNodeIds) {
      let _that = this;
      if (_that.$api.isLook === '1') return;
      _that.$api.saveVariantMatrixTable({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: node.id,
        variantId: variantId,
        checked: checked ? 1 : 0,
      }).then((res) => {
        if (res.flag) {
          _that.$message.success(res.message, 1);

          treeObj.expandNode(node, true, true, false);
          for (let i = 0; i < joinNodeIds.length; i++) {
            let dom = $('#' + joinNodeIds[i] + variantId);
            if (checked) {
              dom.parent().addClass('ant-checkbox-checked');
            } else {
              dom.parent().removeClass('ant-checkbox-checked');
            }
            dom.prop("checked", checked);
          }
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
  },
}

/**
 * 勾选变体
 * @param id
 * @param variantId
 */
window.checkedVariant = function (id, variantId) {
  let checked = $('#' + id + variantId).prop('checked');
  let treeObj = $.fn.zTree.getZTreeObj("variantTree");
  let nodes = treeObj.getNodesByParam("id", id, null);

  // 关联节点ID
  let joinNodeIds = [];
  if (checked) {
    loopTreeNodeParent(id, joinNodeIds);
    loopTreeNodeChild(nodes, joinNodeIds);
  } else {
    loopTreeNodeChild(nodes, joinNodeIds);
  }
  // 保存表格勾选
  saveTableCheck(nodes[0], variantId, checked, treeObj, joinNodeIds);
}

/**
 * 处理检索
 */
window.handleSearch = function () {
  let keyWord = $("#fuzzySearchInput").val();
  fuzzySearch('variantTree', keyWord, true, true);
};

/**
 * 处理添加Modal
 * @param event
 */
window.handleAddModal = function (event) {
  let dom = $("#add-modal");
  dom.toggleClass('hide');
  dom.css({
    'left': event.clientX,
    'top': event.clientY + 10,
    'width': '200px',
    'height': '50px',
    'position': 'absolute',
    'background': '#fff',
    'box-shadow': '0 2px 8px rgb(0 0 0 / 15%)',
    'border-radius': '4px',
    'z-index': '1',
  });
};

/**
 * 删除变体
 * @param variantId 变体ID
 */
window.delVariant = function (variantId) {
  delVariant(variantId);
}

/**
 * 双击变体
 * @param variantId 变体ID
 */
window.dbClickVariant = function (variantId) {
  handleDbClickVariant(variantId);
}

</script>
<style lang="less" scoped>

// 设置model 全屏
/deep/ .ant-modal {
  top: 0 !important;
}

// 设置model 全屏
/deep/ .ant-modal-content {
  height: calc(100vh);
}

// 不加上弹窗就会有滚动条;
/deep/ .ant-modal-wrap {
  overflow: hidden !important
}

/** ztree start */
/deep/ .ztree li span.button {
  background-image: url("data:image/png;base64, ");
}

/deep/ .ztree li span.button.noline_docu {
  background: none !important;
}

/deep/ .ztree li > a .node_name {
  margin-left: 5px;
  font-size: 14px;
}

/deep/ .ztree li > a .variant span {
  margin-right: 0;
}

/deep/ .ztree li .variant {
  width: 220px !important;

  i {
    float: left;
    color: #1890FF;
    font-size: 18px;
    margin-left: 5px;
    cursor: pointer;
  }

  .variant-name {
    width: 170px;
    float: right;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    span {
      margin-right: 46px;
    }
  }
}

/deep/ .ztree li > a:hover {
  text-decoration: none;
  background-color: #e6fffc;
}

/deep/ .ztree li a.curSelectedNode {
  background-color: #9bf2eb;
  opacity: 1;
}

/deep/ .ztree {
  padding: 0;
  border: 1px solid #ddd;;
  border-radius: 4px;
  overflow: scroll;
}

/deep/ .ztree li a {
  vertical-align: middle;
  height: 32px;
  padding: 0;
  max-width: none;
}

/deep/ .ztree li {
  min-width: max-content;
}

/deep/ .ztree li ul {
  padding-left: 0;
}

/deep/ .ztree div.divTd span {
  line-height: 32px;
  vertical-align: middle;
}

/deep/ .ztree div.divTd {
  height: 100%;
  width: 500px;
  line-height: 32px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

/deep/ .ztree div.divTd:first-child {
  text-align: left;
  border-left: none;
}

/deep/ .ztree div.divTd:last-child {
  border-right: 1px solid #ddd;
}

/deep/ .ztree .head {
  background: #eee;
  height: 40px;

  .icon-add {
    i {
      font-size: 18px;
    }

    cursor: pointer;
    margin-left: 5px;
    color: #1890FF;
  }

  .variant .ant-input {
    width: 95%;
  }
}

/deep/ .ztree .head div.divTd {
  border-top: 0 !important;
  color: #393939;
  font-weight: bold;
  padding: 2px 0 0 0;
}

/deep/ .ztree .ck {
  padding: 0 5px;
  margin: 2px 3px 7px 3px;
}

/deep/ .ztree #variantTree_1 {
  max-height: calc(100vh - 156px);
  overflow: scroll;
}

/deep/ .ztree .ant-btn {
  padding: 0 15px;
}

/deep/ .ztree .ant-input {
  padding: 4px 11px;
}

/deep/ .ztree .divTd .ant-input-search {
  width: 90%;
}

/** ztree End */

</style>
