<template>
  <my-page :left-style="{width: '20vw'}">
    <template slot="left">
      <el-collapse v-model="activeName" accordion @change="handleCollapseChange">
        <el-collapse-item title="代理商" name="1">
          <DfBroker ref="dfBroker" style="height: 100%; width: 100%;" @row-click="handleRowClick"></DfBroker>
        </el-collapse-item>
        <el-collapse-item title="经纪人" name="2">
          <DfBrokerUser ref="dfBrokerUser" style="height: 100%; width: 100%;" @row-click="handleRowClick"></DfBrokerUser>
        </el-collapse-item>
      </el-collapse>
    </template>

    <BrokerProduct  v-if="!isUser" ref="brokerUser" :extraHeight="100" style="height: 97%;margin-left: 8px;"
                    :rowData="rowData"></BrokerProduct>
    <div v-if="isUser" style="display: flex; height: 97%; margin-left: 8px;">
      <BrokerProductByUserId
        v-if="isUser"
        ref="brokerUser"
        :extraHeight="100"
        style="flex: 1; margin-right: 8px; height: 100%; width: 40%;"
        :rowData="rowData"
      ></BrokerProductByUserId>
      <BrokerProductTwo
        v-if="isUser"
        ref="brokerUser"
        :extraHeight="100"
        style="flex: 1; height: 100%; width: 40%;"
        :rowData="rowData"
      ></BrokerProductTwo>
    </div>
  </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: "Product",
  components: {
    BrokerProduct,
    BrokerProductTwo,
    BrokerProductByUserId,
    DfBrokerUser,
    DfBroker,
  },
  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;
      if (this.rowData.userId) {
        this.isUser = true;
      } else {
        this.isUser = false;
      }
    }
  }
};
</script>
