<template>
  <div class="RCSbox">
    <OperateCard
      class="cleft"
      width="220px"
      show-fold
      custom-render-content
      showSearch
      title="金融产品"
      label="text"
      :form-list="leftSelectList"
      @handleNodeClick="handleLeftNodeClick"
      :renderContent="renderLeft"
    />
    <div class="cright">
      <CCenter :value="node" />
    </div>
  </div>
</template>

<script>
import OperateCard from '@/components/operateCard';
import CCenter from './lineCenter/index.vue'
const menuIds = [8010302, 801020103, 801020104, 8010308]
export default {
  components: {
    OperateCard,
    CCenter
  },
  data() {
    return {
      leftSelectList: [],
      node:{},
    };
  },
  mounted() {
    this.getLeft();
  },
  methods: {
    handleLeftNodeClick(node) {
      this.node = node
    },
    getLeft() {
      const userApplGroups = JSON.parse(Eui.Share.get('userApplGroups'));
      const menuArr = (userApplGroups.find(e => e.groupId === 'rcs'))?.menus || [];
      const tradeMenu = menuArr.filter((item) => item.id === 801)[0]?.children || [];
      const menu = this.findNodesByIds(tradeMenu, menuIds);
      this.leftSelectList = tradeMenu;
      // console.log('tradeMenu', tradeMenu);
    },
    renderLeft(h, { node, data }) {
      return (<span style="font-size: 12px;">{this.$t(data.text)}</span>);
    },
    findNodesByIds(nodeList, targetIds) {
      let result = [];
      nodeList.forEach(node => {
        if (targetIds.includes(node.id)) {
          result.push(node);
        }
        if (node.children && node.children.length > 0) {
          result = result.concat(this.findNodesByIds(node.children, targetIds));
        }
      });
      return result;
    },
  },
};
</script>

<style lang="scss" scoped>
.RCSbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  .cright {
    width: calc(100% - 228px);
    margin-left: 8px;
  }
}
</style>
