<!--
 * @Tite: 带关键字过滤树形控件的交互类组件
 * @Des: 拥有可以通过关键字过滤的树形控件和交互功能的组件
 * @Author: Rockery <1113269755@qq.com>
-->

<template>
  <div class="commonfilterselecttreemainpage">
    <el-container class="cfstreepage-container">
      <!-- 顶部插槽 -->
      <slot name="bottomHeader" />

      <!-- 左侧带关键字过滤功能树形控件区域 -->
      <el-aside class="cfstreepage-container-left" v-show="showCotaampLeftCont">
        <!-- 左侧顶部插槽 -->
        <slot name="leftHeader" />
        <cust-filter-select-tree
          ref="filterSelectTreeRef"
          :tree-data="selectTreeDataList"
          :isTreeLazy="isSelectTreeLazy"
          :defaultProps="selectTreeDefaultProps"
          :treeNodeKey="selectTreeNodeKey"
          :treeLazyRequstParam="selectTreeLazyRequstParam"
          :treeLazyRequstFun="selectTreeLazyRequstFun"
          :filterKeyWord="selectTreeFilterKeyWord"
          :defaultExpandedKeys="isDefaultExpanded ? getDefaultExpandedKeys() : []"
          @selectTreeNodeClick="selectTreeNodeClick"
        />

        <!-- 左侧底部部插槽 -->
        <slot name="leftBottom" />
      </el-aside>

      <!-- 列表区域 -->
      <el-main
        class="cfstreepage-container-right"
        :class="showCotaampSwitchRightBtn?'cfstreepage-container-rightdefault':''"
      >
        <!-- 数据区域插槽 -->
        <slot name="rightContainer" />
      </el-main>

      <!-- 底部部插槽 -->
      <slot name="bottomContainer" />

      <!-- 隐藏左侧带关键字过滤功能树形控件 -->
      <div class="cfstreepage-container-switch">
        <el-tooltip content="隐藏左侧控件" effect="dark" placement="bottom">
          <i
            v-show="showCotaampSwitchLeftBtn"
            class="el-icon-d-arrow-left cfstreepage-container-switch-leftbtn"
            @click="classHouseSwitchLeftBtn"
          />
        </el-tooltip>
        <el-tooltip content="显示左侧控件" effect="dark" placement="bottom">
          <i
            v-show="showCotaampSwitchRightBtn"
            class="el-icon-d-arrow-right cfstreepage-container-switch-rightbtn"
            @click="classHouseSwitchRightBtn"
          />
        </el-tooltip>
      </div>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'CommonFilterSelectTreeMainpage',
  props: {
    // 树形控件数据对象
    selectTreeDataList: {
      required: false,
      type: Array,
      default() {
        return [{
          id: '0001',
          label: '一级 1',
          children: [{
            id: '00010001',
            label: '二级 1-1',
            children: [{
              id: '000100010001',
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: '0002',
          label: '一级 2',
          children: [{
            id: '00020001',
            label: '二级 2-1',
            children: [{
              id: '000200010001',
              label: '三级 2-1-1'
            }]
          }, {
            id: '00020002',
            label: '二级 2-2',
            children: [{
              id: '000200020001',
              label: '三级 2-2-1'
            }]
          }]
        }, {
          id: '0003',
          label: '一级 3',
          children: [{
            id: '00030001',
            label: '二级 3-1',
            children: [{
              id: '00030002',
              label: '三级 3-1-1'
            }]
          }, {
            id: '00030002',
            label: '二级 3-2',
            children: [{
              id: '000300020001',
              label: '三级 3-2-1'
            }]
          }]
        }];
      }
    },
    // 树形控件默认属性
    selectTreeDefaultProps: {
      required: false,
      type: Object,
      default() {
        return {
          children: 'children',
          label: 'label',
          isLeaf: 'leaf'
        };
      }
    },
    // 树形控件节点标识
    selectTreeNodeKey: {
      required: false,
      type: String,
      default: 'id'
    },
    // 树形控件过滤字段标识
    selectTreeFilterKeyWord: {
      required: false,
      type: String,
      default: 'label'
    },
    // 是否默认展开
    isDefaultExpanded: {
      required: false,
      type: Boolean,
      default: false
    },
    // 是否懒加载
    isSelectTreeLazy: {
      required: false,
      type: Boolean,
      default: false
    },
    // 懒加载数据请求方法
    selectTreeLazyRequstFun: {
      type: Function,
      require: false
    },
    // 懒加载数据请求参数Key值
    selectTreeLazyRequstParam: {
      type: Array,
      require: false,
      default() {
        return [
          {
            key: 'parentId',
            value: 'id'
          }
        ];
      }
    }
  },
  data() {
    return {
      // 是否显示左侧带关键字过滤功能树形控件
      showCotaampLeftCont: true,
      // 是否隐藏左侧带关键字过滤功能树形控件
      showCotaampSwitchLeftBtn: true,
      // 是否展示左侧带关键字过滤功能树形控件
      showCotaampSwitchRightBtn: false
    };
  },
  components: {
    CustFilterSelectTree: () => import('@/components/CommonFilterSelectTree') // 树形控件
  },
  methods: {
    /** 获取树形控件默认展开唯一标识key */
    getDefaultExpandedKeys() {
      for (let dataIndex = 0, dataLength = this.selectTreeDataList?.length ?? 0; dataIndex < dataLength; dataIndex++) {
        this.selectTreeExpandedKeys.push(this.selectTreeDataList[dataIndex][this.selectTreeNodeKey]);
      }
    },
    /**
    * 带关键字过滤功能树形控件选择节点数据
    * @param {Object} nodeObj
    * @return void
    * @emits {Object} commSelectTreeNodeClick
    */
    selectTreeNodeClick(nodeObj) {
      // 发送节点选择数据通信
      this.$emit('commSelectTreeNodeClick', nodeObj);
    },
    /**
     * 隐藏左侧带关键字过滤功能树形控件
     * @return void
     * @emits {Object} switchShowLeftContainer
    */
    classHouseSwitchLeftBtn() {
      this.showCotaampSwitchLeftBtn = false;
      this.showCotaampSwitchRightBtn = true;
      this.$nextTick(() => {
        this.showCotaampLeftCont = false;
        this.$emit('switchShowLeftContainer', 'LEFT');
      });
    },
    /**
     * 展示左侧带关键字过滤功能树形控件
     * @return void
     * @emits {Object} switchShowLeftContainer
     */
    classHouseSwitchRightBtn() {
      this.showCotaampSwitchRightBtn = false;
      this.showCotaampSwitchLeftBtn = true;
      this.$nextTick(() => {
        this.showCotaampLeftCont = true;
        this.$emit('switchShowLeftContainer', 'RIGHT');
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.commonfilterselecttreemainpage {
  width: 100%;

  .cfstreepage-container {
    width: 100%;

    &-left {
      background: #fff;
      padding: 0;
      width: 260px !important;
      border-radius: 10px;
      margin: 0 0 0 10px;
    }

    &-switch {
      font-size: 28px;
      cursor: pointer;
      color: #1890ff;

      &-leftbtn {
        position: absolute;
        top: 50%;
        left: 260px;
        cursor: pointer;
      }

      &-rightbtn {
        position: absolute;
        top: 50%;
        left: 0;
        cursor: pointer;
      }
    }

    &-right {
      padding: 0 10px;
      width: auto;
      /* background: #f5f5f5; */
    }
  }
}
</style>
