<template>
    <div v-if="show" class="mine-policy-detail">
        <policy-detail ref="policyDetail" @closed="show = false"></policy-detail>
    </div>

    <div v-else class="mine-content">
        <el-tabs v-model="element">
            <el-tab-pane v-for="(label, key) in myBusinessTab" :key="key" :label="label" :name="key"></el-tab-pane>
        </el-tabs>

        <component :is="allComps[element]" @replyAll="table_detail"></component>
    </div>
</template>

<script>
import { myBusinessTab } from "@/views/myAffairs/main";
import allComps from "@/views/myAffairs/component/index";
import policyDetail from "@/views/home/policyDetail.vue";

export default {
    components: {
        policyDetail
    },

    data() {
        return {
            allComps,
            myBusinessTab,

            element: "toDo",

            show: false
        }
    },

    methods: {
        table_detail(row) {
            this.show = true;
            nextTick(() => this.$refs.policyDetail.setData(row, 5));
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-policy-detail :deep(.tjm_card_style_custom) > .el-card__body {
  max-height: calc(
    $base-main-height - $base-padding - 2 * var(--el-card-padding) - 54px
  );
  overflow: auto;
}

.mine-content {
  padding-top: 10px;
  background: #fff;
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow-light);

  .el-tabs {
    padding: 0 20px;

    :deep(.el-tabs__content) {
      display: none;
    }
  }
}
</style>