<template>
  <div
    class="operateCard"
    :style="{width: foldCard ? '24px': width}"
  >
    <div
      v-if="!foldCard"
      class="card"
    >
      <div class="title">
        <div
          v-if="iconLeftList?.length >0"
          class="left"
        >
          <el-tooltip
            v-for="(item,index) in iconLeftList"
            :key="index"
            :content="item.text"
            placement="bottom"
            effect="dark"
            class="custom-tooltip"
          >
            <i
              :class="[item.type,'left-icon']"
              @click="item.callback(value)"
            />
          </el-tooltip>
        </div>

        <div class="center">
          <span class="ctitle">{{ title }}</span>
          <slot />
        </div>

        <div
          v-if="iconRightList?.length >0"
          class="right"
        >
          <i
            v-for="(item,index) in iconRightList"
            :key="index"
            :class="[item.type,'right-icon']"
            @click="item.callback()"
          />
          <i
            v-if="showFold"
            :class="['el-icon-d-arrow-left','right-icon']"
            @click="handlefoldCard(true)"
          />
        </div>
      </div>
      <div class="content">

        <el-input
          style="width: 90%;margin-left: 7%;margin-top: 8px;margin-bottom: 8px;"
          v-if="showSearch"
          placeholder="输入关键词，可快速查找..."
          v-model="filterText">
        </el-input>

        <el-tree
          ref="tree"
          :node-key="nodeKey"
          :data="formList"
          :render-content="renderContent"
          :props="{
            children: children,
            label: label
          }"
          v-bind="operateCardTreeAttrs"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
        />
      </div>
    </div>
    <div
      v-if="foldCard"
      class="fold"
    >
      <i
        v-if="showFold"
        :class="['el-icon-d-arrow-right']"
        @click="handlefoldCard(false)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'OperatedCard',
  props: {
    // 
    showSearch: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: '',
    },
    // key
    nodeKey: {
      type: String,
      default: 'id',
    },
    iconLeftList: {
      type: Array,
      default: () => [],
    },
    iconRightList: {
      type: Array,
      default: () => [],
    },
    formList: {
      type: Array,
      default: () => [],
    },
    // 折叠按钮
    showFold: {
      type: Boolean,
      default: false,
    },
    // 组件宽度
    width: {
      type: String,
      default: '220px',
    },
    //
    children: {
      type: String,
      default: 'children',
    },
    //
    label: {
      type: String,
      default: 'label',
    },
    operateCardTreeAttrs: {
      type: Object,
      default: () => {},
    },
    // 是否自定义渲染节点
    customRenderContent: {
      type: Boolean,
      default: false,
    },
    renderContent: {
      type: Function,
      require: false,
      default: (h, { node, data }) => {
        return (<span class="">{data}</span>);
      },
    },
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
  },
  data() {
    return {
      filterText: '',
      foldCard: false,
    };
  },
  
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data[this.label].indexOf(value) !== -1;
    },
    handlefoldCard(bool) {
      this.foldCard = bool;
    },
    handleNodeClick(row) {
      this.$emit('handleNodeClick', row);
    },
  },
};
</script>

<style lang="scss" scoped>
.operateCard {
  height: 100%;
  .card {
    width: 100%;
    height: 100%;
    background: var(--desktop-bg-color-1);
    // border: 1px solid var(--input-border);
    .title {
      width: 100%;
      height: 30px;
      padding: 0 5px;
      border-bottom: 1px solid var(--input-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-icon {
        margin-right: 12px;
        cursor: pointer;
      }
      .center {
        font-size: 14px;
        .ctitle {
          font-weight: 700;
          margin-left: 12px;
        }
      }
      .right-icon {
        cursor: pointer;
      }
    }
    .content {
      height: calc(100% - 30px);
      // padding: 12px;
      overflow: scroll;
      .content-items {
        height: 32px;
        white-space: nowrap;
        cursor: pointer;
        padding-left: 19px;
        font-size: 12px;
        line-height: 32px;
      }
      .content-items:hover {
        background-color: #e6f2ff;
      }
      .content-items-selected {
        height: 32px;
        white-space: nowrap;
        cursor: pointer;
        padding-left: 19px;
        font-size: 12px;
        line-height: 32px;
        background: var(--blue-50);
        color: var(--card-bg);
      }
    }
  }
  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
      background: var(--blue-20);
  }
  :deep(.el-tree>.el-tree-node){
    min-width:100%;
    display: inline-block;
}
  .fold {
    height: 100%;
    text-align: center;
    padding-left: 2px;
    background: var(--card-bg);
    border: 1px solid var(--input-border);
  }
}

.custom-tooltip {
  --el-tooltip-fill: #000000; /* 背景色 */
  --el-tooltip-color: #ffffff; /* 文字颜色 */
}
</style>
