<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    width="80%"
    top="5vh"
    :close-on-click-modal="false"
    class="detail-dialog"
    @update:model-value="handleVisibleChange"
    @close="handleClose"
  >
    <el-tabs v-model="activeTab" class="detail-tabs">
      <!-- 保单信息 -->
      <el-tab-pane label="保单信息" name="policy">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="保单号">{{ detailData.policyNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ detailData.customerName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="签单日期">{{ detailData.signDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="签单人">{{ detailData.signer || '-' }}</el-descriptions-item>
          <el-descriptions-item label="供款年期">{{ detailData.paymentTerm || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ detailData.productName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="保险公司">{{ detailData.insurer || '-' }}</el-descriptions-item>
          <el-descriptions-item label="对账公司">{{ detailData.reconciliationCompany || '-' }}</el-descriptions-item>
          <el-descriptions-item label="保单持有人">{{ detailData.policyHolder || '-' }}</el-descriptions-item>
          <el-descriptions-item label="受保人">{{ detailData.insured || '-' }}</el-descriptions-item>
          <el-descriptions-item label="币种">{{ detailData.currency || '-' }}</el-descriptions-item>
          <el-descriptions-item label="首期保费">{{ numberWithCommas(detailData.initialPremium || 0) }}</el-descriptions-item>
          <el-descriptions-item label="新单状态">{{ convertStatusToDict(detailData.status) || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <!-- 入账信息 -->
      <el-tab-pane label="入账信息" name="income">
          <el-table :data="expectedCommissionList" border size="small">
            <el-table-column type="index" width="30" />
            <el-table-column prop="reconciliationCompany" label="对账公司" align="center" />
            <el-table-column prop="commissionPeriod" label="佣金期数" align="center" />
            <el-table-column prop="totalPeriod" label="总佣金期数" align="center" />
            <el-table-column prop="commissionName" label="来佣名称" align="center" />
            <!-- <el-table-column prop="commissionType" label="来佣类型" align="center" /> -->
            <el-table-column prop="amount" label="来佣金额" align="center" />
            <el-table-column prop="currency" label="币种" align="center" />
            <el-table-column prop="commissionDate" label="来佣日期" align="center" />
            <el-table-column prop="commissionStatusLabel" label="来佣状态" align="center" />
            <el-table-column prop="remark" label="备注" align="center" />
            <el-table-column prop="creatorId" label="创建人" align="center" />
            <el-table-column prop="updaterId" label="更新人" align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center" />
            <el-table-column prop="updateTime" label="更新时间" align="center" />
            <!-- <template #append>
             <div style="padding: 20px;display: flex;justify-content: end;">
                 <el-pagination
                v-model:current-page="currentPage1"
                :page-size="pageSize1"
                background
                layout="total, prev, pager, next"
                :total="total1"
                @current-change="handleCurrentChange('expectedCommissionList')"
                />
             </div>
            </template> -->
        </el-table>
      </el-tab-pane>

      <!-- 出账信息 -->
      <el-tab-pane label="出账信息" name="expense">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="出账状态">{{ detailData.expenseStatus || '-' }}</el-descriptions-item>
          <el-descriptions-item label="出账金额">{{ numberWithCommas(detailData.expenseAmount || 0) }}</el-descriptions-item>
          <el-descriptions-item label="出账日期">{{ detailData.expenseDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="出账银行">{{ detailData.expenseBank || '-' }}</el-descriptions-item>
          <el-descriptions-item label="出账账号">{{ detailData.expenseAccount || '-' }}</el-descriptions-item>
          <el-descriptions-item label="出账凭证号">{{ detailData.expenseVoucherNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="出账备注">{{ detailData.expenseRemark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
          <!-- 转介人信息 -->
      <el-tab-pane label="转介人信息" name="broker">
       <el-table :data="detailData.brokerList" border size="small">
            <el-table-column prop="brokerName" label="姓名" align="center" />
            <el-table-column prop="team" label="团队" align="center" />
            <el-table-column prop="brokerRatio" label="介绍费占比" align="center" />
            <el-table-column prop="remark" label="备注" align="center" />
        </el-table>
      </el-tab-pane>

      <!-- 其他信息 -->
      <el-tab-pane label="其他信息" name="other">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建时间">{{ detailData.createTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ detailData.updateTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ detailData.createBy || '-' }}</el-descriptions-item>
          <el-descriptions-item label="更新人">{{ detailData.updateBy || '-' }}</el-descriptions-item>
          <el-descriptions-item label="备注信息" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { numberWithCommas } from '@/utils/index.js'

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  detailData: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: '数据详情'
  },
  policyFollowStatusList: {
    type: Array,
    default: () => []
  },
  expectedCommissionList: {
    type: Array,
    default: () => []
  },
})

// 定义emits
const emit = defineEmits(['update:visible', 'close', 'current-change'])

// 响应式数据
const activeTab = ref('policy')
const currentPage1 = ref(1)
const total1 = ref(1000)  
const pageSize1 = ref(100)  

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    activeTab.value = 'policy'
  }
})

// 处理visible变化
const handleVisibleChange = (value) => {
  emit('update:visible', value)
}

// 状态转换函数
const convertStatusToDict = (status) => {
  const dictItem = props.policyFollowStatusList.find(item => item.itemValue == status)
  return dictItem?.itemLabel ?? status
}

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 表格分页当前页改变
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
  emit('current-change', val,currentPage1.value)
}




</script>

<style scoped>
.detail-dialog {
  max-height: 80vh;
}

.detail-tabs {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-tabs .el-tab-pane {
  padding: 20px;
}

.broker-section {
  margin-top: 20px;
}

.broker-section h4 {
  margin-bottom: 15px;
  color: #303133;
  font-weight: 600;
}

/* 响应式调整详情弹窗 */
@media (max-width: 768px) {
  .detail-dialog {
    width: 95% !important;
  }
  
  .detail-tabs .el-descriptions {
    font-size: 12px;
  }
}
</style>