<template>
  <el-col :span="hideSideBar ? colSpan : 0"
    :xs="24"
    class="col"
    @click.native="cancelSel">
    <div v-show="hideSideBar"
      class="content">
      <div class="buttons_wrap">
        <!-- 扩展的按钮集合 -->
        <slot name="buttons"></slot>
        <el-input v-model="searchValue"
          :placeholder="placeholder"
          clearable
          size="small"
          prefix-icon="el-icon-search" />
      </div>
      <div class="scroll" :class="{'row_gap': rowGap}">
        <el-tree :data="options"
          v-loading="loading"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          :node-key="nodeKey"
          highlight-current
          default
          :default-expanded-keys="defaultExpandList"
          @node-click="handleNodeClick">
          <template class="custom-tree-node"
            v-slot="{ node, data }"
            :style="{margin: rowGap * 3 + 'px !important'}">
            <svg-icon v-if="showIcon" icon-class="tab" style="fill: #409eff; stroke: red; margin-right: 10px;"/>
            <span>{{ node.label }}</span>
            <span v-if="showEditDel"
              class="edit_del">
              <span style="margin-right: 10px;">创建人：{{ data.createBy }}</span>
              <i class="el-icon-edit"
                @click.stop="$emit('flodEdit', data)"></i>
              <i class="el-icon-delete"
                @click.stop="$emit('flodDel', data)"></i>
            </span>
          </template>
        </el-tree>
        <!-- 分页 -->
        <pagination v-if="isPagination" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getPageList" />
        <!-- 折叠箭头 -->
        <div class="arrow"
          @click="hideSideBar = false">
          <svg-icon icon-class="left-arrow" />
        </div>
      </div>
    </div>
    <!-- 表格折叠箭头 -->
    <div class="arrow"
      v-show="!hideSideBar"
      @click="hideSideBar = !hideSideBar">
      <svg-icon icon-class="right-arrow" />
    </div>
  </el-col>
</template>

<script>
export default {
  name: "FlodSidebar",
  props: {
    // 树结构数据
    options: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    // 树结构主键
    nodeKey: {
      type: String,
      default: 'id'
    },
    // 树结构使用字段
    defaultProps: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 默认展开哪些行
    defaultExpandList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 搜索占位符
    placeholder: {
      type: String,
      default: ''
    },
    // 选中某行数据对象
    value: {
      type: [Number, String]
    },
    // 占 el-col 几份宽度
    colSpan: {
      type: Number,
      default: 6
    },
    // 左侧分类框右侧是否出现编辑和删除按钮
    showEditDel: {
      type: Boolean,
      default: false
    },
    // 数据重载中
    loading: {
      type: Boolean,
      default: false
    },
    // 是否展示图标
    showIcon: {
      type: Boolean,
      default: false
    },
    // 行之间的间隙
    rowGap: {
      type: Boolean,
      default: false
    },
    // 开启分页
    isPagination: {
      type: Boolean,
      default: false
    },
    // （若有分页功能）- 总数
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 侧边栏展开与否
      hideSideBar: true,
      // 搜索关键字
      searchValue: '',
      // 上次点击的行对象-唯一值
      lastRowId: null,
      // 分页参数
      
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
    };
  },
  watch: {
    // 根据名称筛选树
    searchValue(val) {
      // 如果做了分页走网络搜索
      if (!this.isPagination) {
        // 没有分页，用本地列表搜索
        this.$refs.tree.filter(val);
      } else {
        // 有分页，走外面搜索
        this.queryParams.searchKey = val
        this.$emit('pageChange', this.queryParams)
      }
    },
    value(val) {
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(val)
        this.lastRowId = val
      })
    }
  },
  methods: {
    // 空白位置-取消选中效果
    cancelSel() {
      // 刚才有过点击的某行
      if (this.lastRow) {
        this.$refs.tree.setCurrentKey(null)
        this.lastRow = null
        this.$emit('input', '')
        this.$emit('search')
      }
    },
    // 点击某行
    handleNodeClick(row) {
      // 当前点击和上次点击一样->取消
      if (this.lastRowId === row[this.nodeKey]) {
        this.$refs.tree.setCurrentKey(null)
        this.lastRowId = null
      } else {
        this.lastRowId = row[this.nodeKey]
      }
      this.$emit('input', this.lastRowId ? row[this.nodeKey] : '')
      this.$emit('search')
    },
    // tree 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    // 分页逻辑触发
    getPageList(){
      this.$emit('pageChange', this.queryParams)
    }
  }
};
</script>

<style scoped
  lang="scss">
  ::v-deep(.custom-tree-node) {
    width: 100%;
    padding-right: 20px;
    font-size: 14px;

    .edit_del {
      float: right;

      i {
        margin-right: 5px;
        font-size: 13px;
      }
    }
  }
  /* 间距放大 */
  ::v-deep(.row_gap .el-tree-node .el-tree-node__content){
    padding: 10px 0;
    height: auto;
  }
  // el-tree 取消选中时背景还有个颜色去掉
  ::v-deep(.el-tree-node:focus>.el-tree-node__content) {
    background-color: transparent;
  }

  // el-tree 选中时的背景色设置
  ::v-deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
    background-color: #edf6ff !important;
  }

  ::v-deep .el-input--small {
    padding-right: 10px;
  }

  .col {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all .3s;
    position: relative;

    .arrow {
      position: absolute;
      top: 40%;
      width: 10px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      font-size: 12px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      background-color: white;
    }

    .content {
      height: 100%;
      display: flex;
      flex-direction: column;

      /* 按钮集合 */
      .buttons_wrap {
        display: flex;
        gap: 50px;
        margin-bottom: 20px;
      }

      .scroll {
        flex: 1;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 20px;

        &::-webkit-scrollbar {
          width: 0;
        }
      }

      // 向左折叠的箭头
      .arrow {
        right: 7.5px;
      }

      & {
        border-right: 1px solid rgb(208, 208, 208);
      }
    }

  }

  ::v-deep .el-input__suffix:last-of-type{
    padding-right: 10px;
  }

</style>
