<template>
  <div class="payout-config" v-loading="loading">
    <el-table height="100%" class="sa-table" :data="tableData" stripe>
      <template #empty>
        <sa-empty />
      </template>

      <el-table-column :label="t('modules.payment.payoutMethod')" min-width="150" align="center">
        <template #default="scope">
          <span class="method-name">{{ scope.row.methodName }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="t('modules.payment.payoutChannel')" min-width="200" align="center">
        <template #default="scope">
          <div class="channel-list">
            <div v-for="channel in scope.row.midChannelMethodBOList" :key="channel.id" class="channel-item">
              {{ channel.paymentChannel.channelName }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column :label="t('modules.payment.channelStatus')" min-width="150" align="center">
        <template #default="scope">
          <div class="status-list">
            <div v-for="channel in scope.row.midChannelMethodBOList" :key="channel.id" class="status-item">
              <el-switch v-model="channel.status" :active-value="1" :inactive-value="0"
                @change="handleChannelStatusChange(channel)" />
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import api from '../../../api';

const { t } = useI18n();

const loading = ref(false);
const tableData = ref([]);

// 获取代付配置数据
async function getData() {
  loading.value = true;
  try {
    const { code, data } = await api.payment.method.list({
      agencyService: 2, // 代付
    });

    if (code == 200) {
      tableData.value = data || [];
    }
  } catch (error) {
    console.error('获取代付配置失败:', error);
    ElMessage.error(t('message.fetchDataFailed'));
  } finally {
    loading.value = false;
  }
}

// 处理通道状态变更
async function handleChannelStatusChange(channel) {
  try {
    const { code } = await api.payment.method.midUpdate({
      id: channel.id,
      status: channel.status,
    });

    if (code == 200) {
      ElMessage.success(t('modules.payment.channelStatusUpdateSuccess'));
    }
  } catch (error) {
    console.error('更新通道状态失败:', error);
    ElMessage.error(t('modules.payment.channelStatusUpdateFailed'));
    // 回滚状态
    channel.status = channel.status === 1 ? 0 : 1;
  }
}

// 暴露方法给父组件调用
defineExpose({
  getData,
});

onMounted(() => {
  getData();
});
</script>

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

  .method-cell {
    display: flex;
    align-items: center;

    .method-name {
      font-weight: 500;
    }
  }

  .channel-list,
  .weight-list,
  .status-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px;
  }

  .channel-item,
  .weight-item,
  .status-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    width: 100%;
    justify-content: center;

    &:not(:last-child) {
      border-bottom: 1px solid var(--el-border-color-light);
      margin-bottom: 8px;
      padding-bottom: 12px;
    }
  }

  .weight-display {
    color: #909399;
    font-style: italic;
  }
}
</style>
