<template>
  <el-container class="payment-config">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane :label="t('modules.payment.collectionConfig')" name="collection"></el-tab-pane>
        <el-tab-pane :label="t('modules.payment.payoutConfig')" name="payout"></el-tab-pane>
        <el-tab-pane :label="t('modules.payment.paymentChannel')" name="channel"></el-tab-pane>
      </el-tabs>
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left"></span>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="refreshCurrentTab"></el-button>
          <el-button v-if="activeTab === 'channel'" icon="Plus" type="primary" @click="addChannel">
            {{ t('modules.payment.addChannel') }}
          </el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0">
      <div class="sa-table-wrap panel-block panel-block--bottom">
        <CollectionConfig v-if="activeTab === 'collection'" ref="collectionRef" />
        <PayoutConfig v-if="activeTab === 'payout'" ref="payoutRef" />
        <ChannelManage v-if="activeTab === 'channel'" ref="channelRef" />
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useModal } from '@/sheep/hooks';
import CollectionConfig from './components/CollectionConfig.vue';
import PayoutConfig from './components/PayoutConfig.vue';
import ChannelManage from './components/ChannelManage.vue';
import ChannelEdit from './edit.vue';

const { t } = useI18n();

// 当前激活的Tab
const activeTab = ref('collection');

// 组件引用
const collectionRef = ref();
const payoutRef = ref();
const channelRef = ref();

// Tab切换处理
function handleTabChange(tabName) {
  activeTab.value = tabName;
  // 切换Tab时重新调用对应组件的接口
  refreshCurrentTab();
}

// 刷新当前Tab的数据
function refreshCurrentTab() {
  switch (activeTab.value) {
    case 'collection':
      collectionRef.value?.getData?.();
      break;
    case 'payout':
      payoutRef.value?.getData?.();
      break;
    case 'channel':
      channelRef.value?.getData?.();
      break;
  }
}

// 新增支付通道
function addChannel() {
  useModal(
    ChannelEdit,
    {
      title: t('modules.payment.addPaymentChannel'),
      type: 'add',
    },
    {
      confirm: () => {
        channelRef.value?.getData?.();
      },
    },
  );
}
</script>

<style lang="scss" scoped>
.payment-config {
  height: 100%;

  .payment-tabs {
    height: 100%;

    :deep(.el-tabs__content) {
      height: calc(100% - 40px);
      padding: 0;
    }

    :deep(.el-tab-pane) {
      height: 100%;
    }
  }
}
</style>
