<template>
  <div
    class="operateCard"
    :style="{width: foldCard ? '24px': width}"
  >
    <div
      v-if="!foldCard"
      class="card"
    >
      <div class="title">
        <div 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"><slot /></div>

        <div 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-tree
          :data="formList"
          :props="{
            children: children,
            label: label
          }"
          v-bind="operateCardTreeAttrs"
          @node-click="handleNodeClick"
        />
      </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: {
    iconLeftList: {
      type: Array,
      default: () => [],
    },
    iconRightList: {
      type: Array,
      default: () => [],
    },
    formList: {
      type: Array,
      default: () => [],
    },
    // 折叠按钮
    showFold: {
      type: Boolean,
      default: false,
    },
    // 组件宽度
    width: {
      type: String,
      default: '200px',
    },
    //
    children: {
      type: String,
      default: 'children',
    },
    //
    label: {
      type: String,
      default: 'label',
    },
    operateCardTreeAttrs: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      foldCard: false,
    };
  },
  methods: {
    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(--card-bg);
    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;
      }
      .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: #7489ff;
        color: #ffffff;
      }
    }
  }
  :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>
