<template>
  <div class="tab-content">
    <div class="info-section">
      <div class="section-title-row">
        <div class="section-title-left">
          <span class="section-title-text">财务信息</span>
        </div>
        <el-button v-if="!isViewMode" type="primary" icon="Plus" @click="emit('addPayment')">新增财务信息</el-button>
      </div>
      <el-table :data="paymentInfoList" border style="width: 100%">
        <el-table-column prop="isture" label="是否主账号" align="center">
          <template #default="scope">
            <span>{{ Number(scope.row.isture) === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bankName" label="开户银行" align="center" />
        <el-table-column prop="bankNo" label="银行账户" align="center" />

        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button link type="primary" @click="emit('viewPayment', scope.row)">查看</el-button>
            <el-button v-if="!isViewMode" link type="primary" @click="emit('editPayment', scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  paymentInfoList: any[];
  isViewMode: boolean;
}>();

const emit = defineEmits<{
  (e: 'addPayment'): void;
  (e: 'viewPayment', row: any): void;
  (e: 'editPayment', row: any): void;
  (e: 'delete', row: any): void;
  (e: 'change-deafult', row: any): void;
}>();
</script>
