<template>
  <my-page :left-style="{width: '20vw'}">
    <template slot="left">
          <DfBrokerUser ref="dfBrokerUser"  :extraHeight="100"  @row-click="handleRowClick"></DfBrokerUser>
    </template>

    <BrokerProduct  ref="brokerUser" :extraHeight="100" style="height: 97%;margin-left: 8px;"
                    :rowData="rowData"></BrokerProduct>
  </my-page>
</template>

<script>
import BrokerProduct from './components/BrokerProduct.vue';
import BrokerProductTwo from './components/BrokerProductTwo.vue';
import BrokerProductByUserId from './components/BrokerProductByUserId';

// import DfBroker from './components/DfBroker.vue';
import DfBrokerUser from './components/DfBrokerUser.vue';

export default {
  name: "Recommend",
  components: {
    BrokerProduct,
    BrokerProductTwo,
    BrokerProductByUserId,
    DfBrokerUser,
  },
  data() {
    return {
      isUser: false,
      activeName: '1',
      rowData: null
    };
  },
  methods: {
    handleCollapseChange(newActiveName) {
      this.isUser = newActiveName === '2';
      if (this.$refs.dfBrokerUser) {
        this.$refs.dfBrokerUser.clearSelection();
      }
      if (this.$refs.dfBroker) {
        this.$refs.dfBroker.clearSelection();
      }
    },
    handleRowClick(row) {
      this.rowData = null;
      this.rowData = row;
    }
  }
};
</script>
