<!-- components/FormPage.vue -->
<template>
  <div class="form-page">
    <el-form ref="formRef" :model="localData" label-width="120px" size="default">
      <!-- Tabs -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick" :before-leave="handleBeforeLeave">
        <el-tab-pane label="基础信息" name="basic"></el-tab-pane>
        <el-tab-pane label="产品计划" name="productPlan"></el-tab-pane>
        <!-- <el-tab-pane label="首期缴费" name="firstPayment"></el-tab-pane> -->
        <el-tab-pane label="介绍人" name="introducer"></el-tab-pane>
        <el-tab-pane label="邮寄信息" name="postal"></el-tab-pane>
        <el-tab-pane label="关联记录" name="related"></el-tab-pane>
        <el-tab-pane label="附件" name="attachment"></el-tab-pane>
      </el-tabs>

      <!-- 基础信息 Tab 内容 -->
      <div v-if="activeTab === 'basic'" class="tab-content">
        <!-- 签单信息 -->
        <div class="section">
          <h3 class="sectionTitle">基础信息</h3>
          <SearchForm
            ref="basicInfoFormRef"
            :config="basicInfoFormConfig"
            v-model="basicInfoFormData"
          />
        </div>

        <!-- 保单信息 -->
        <div class="section">
          <h3 class="sectionTitle">保单信息</h3>
          <SearchForm
            ref="policyInfoFormRef"
            :config="policyInfoFormConfig"
            v-model="policyInfoFormData"
          />
        </div>
      </div>
      <!-- 产品计划 Tab 内容 -->
      <div v-else-if="activeTab === 'productPlan'" class="tab-content">
        <!-- 基本计划 -->
        <div class="section">
          <h3 class="sectionTitle">基本计划</h3>
          <SearchForm
            ref="basicPlanFormRef"
            :config="basicPlanFormConfig"
            v-model="basicPlanFormData"
            @selectChange="
              (prop, value, item) => handleSelectChange(prop, value, item, 'basicPlan')
            "
          />
        </div>

        <!-- 附加计划（可编辑表格） -->
        <!-- <div class="section">
          <h3 class="sectionTitle">附加计划</h3>
          <EditableTable
            v-model="localData.additionalPlans"
            :row-config="additionalPlansConfig"
            @batch-save="handleBatchSave"
            :disabled="props.mode === 'viewDetail'"
          />
        </div> -->
      </div>
      <!-- 首期缴费 Tab 内容 -->
      <div v-else-if="activeTab === 'firstPayment'" class="tab-content">
        <div class="section">
          <h3 class="sectionTitle">缴费信息</h3>
          <SearchForm
            ref="firstPremiumFormRef"
            :config="firstPremiumFormConfig"
            v-model="firstPremiumFormData"
          />
          <h3 class="sectionTitle">首期对账信息</h3>
          <el-table :data="firstPremiumTableData" border style="width: 100%">
            <el-table-column
              prop="createTime"
              label="申请对账日期"
              width="180"
              :formatter="(row, col, val) => formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss')"
            />
            <el-table-column prop="reconciliationStatus" label="对账状态" width="180" />
            <el-table-column prop="paymentMethod" label="缴费方式" width="180" />
            <el-table-column prop="paymentAmount" label="汇款金额" width="180" />
            <el-table-column prop="paymentCurrency" label="汇款币种" width="180" />
            <el-table-column prop="recognizedAmount" label="认定金额" width="180" />
            <el-table-column prop="recognizedCurrency" label="认定币种" width="180" />
          </el-table>
        </div>
      </div>
      <!-- 介绍人 Tab 内容 -->
      <div v-else-if="activeTab === 'introducer'" class="tab-content">
        <!-- 签单信息 -->
        <div class="section">
          <h3 class="sectionTitle">介绍人信息</h3>
          <h5>
            第一位默认是客户主要负责人，客户资料出现在介绍人（主）账号下，其他介绍人不会看到客户信息
          </h5>
          <EditableTable
            v-model="introducerTableData"
            :row-config="introducerConfig"
            @batch-save="handleBatchSave"
            :disabled="props.mode === 'viewDetail'"
          />
        </div>
      </div>
      <!-- 邮寄信息 Tab 内容 -->
      <div v-else-if="activeTab === 'postal'" class="tab-content">
        <div class="section">
          <h3 class="sectionTitle">邮寄信息</h3>
          <SearchForm ref="postalFormRef" :config="postalFormConfig" v-model="postalFormData" />
        </div>
      </div>
      <!-- 关联记录 Tab 内容 -->
      <div v-else-if="activeTab === 'related'" class="tab-content">
        <div class="section">
          <h3 class="sectionTitle">关联记录</h3>
          <el-table :data="relatedTableData" border style="width: 100%">
            <el-table-column prop="fnaNo" label="流程编号" width="180" />
            <el-table-column prop="policyNo" label="保单号" width="180" />
            <el-table-column prop="customerName" label="客户姓名" width="180" />
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="180"
              :formatter="row => formatToDate(row.createTime)"
            />
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default>
                <el-button link type="primary" size="small" @click="viewRecordDetail">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 附件 Tab 内容 -->
      <div v-else-if="activeTab === 'attachment'" class="tab-content">
        <div class="section">
          <h3 class="sectionTitle">附件</h3>
          <el-button
            type="primary"
            @click="fileUploadDialogFlag = true"
            :disabled="props.mode === 'viewDetail'"
          >
            <el-icon class="el-icon--right"> <Upload /> </el-icon>上传附件
          </el-button>
          <el-table :data="attachmentTableData" border style="width: 100%">
            <el-table-column
              v-for="(column, index) in attachmentTableColumns"
              :key="index"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
              :sortable="column.sortable"
              :formatter="column.formatter"
            />
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default="scope">
                <div style="display: flex; gap: 8px;">
                  
                  <!-- 👇 新增：查看按钮 -->
                  <!-- <el-button
                    link
                    type="primary"
                    size="small"
                    @click="viewFile(scope.row)"
                    :disabled="!scope.row.fileUrl" 
                  >
                    查看
                  </el-button> -->

                  <!-- 原有：删除按钮 (带确认框) -->
                  <el-popconfirm title="确定删除吗?" @confirm="deleteFile(scope.row)">
                    <template #reference>
                      <el-button
                        link
                        type="danger"
                        size="small"
                        :disabled="props.mode === 'viewDetail'"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                  
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 其他 Tab 占位（你可以按需填充） -->
      <div v-else class="tab-placeholder">
        <el-empty description="该 Tab 内容待开发" />
      </div>
      <!-- 底部按钮 -->
      <div class="form-footer">
        <el-button size="default" @click="handleCancel">取消</el-button>
        <el-button type="primary" size="default" @click="handleSubmit">确认</el-button>
      </div>
    </el-form>

    <CommonDialog
      dialogTitle="文件导入"
      dialogWidth="80%"
      :openDialog="fileUploadDialogFlag"
      :showAction="false"
      :showClose="true"
      @close="handleDialogClose"
    >
    <FileUploader
      :tenant-biz-id="userStore.projectInfo.tenantBizId"
      :project-biz-id="userStore.projectInfo.projectBizId"
      :object-biz-id="props.policyBizId"
      :object-type="'DOCUMENT'"
      :project-type="'pc'"
      :upload-concurrency="3"
      ref="uploaderRef"
      />
      <!-- <FileUpload
        v-model="files"
        :data="{ obiectTableName: 'policy_follow', objectBizId: props.policyBizId }"
        :file-type="['xlsx', 'xls', 'doc', 'docx', 'pdf', 'txt', 'jpg', 'jpeg', 'png', 'gif']"
        :action="'/oss/api/oss/batch/upload'"
        :limit="10"
        :fileSize="15"
        :name="'files'"
        @uploadEnd="handleUploadEnd"
      /> -->
    </CommonDialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch, nextTick, onMounted, computed } from 'vue'
import SearchForm from '@/components/SearchForm/SearchForm.vue'
import CommonDialog from '@/components/commonDialog'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { getPolicyfollow, getProductList } from '@/api/sign/underwritingMain'
import { uploadOssFileList,delUploadFile } from '@/api/common'
import { getProcessDetail } from '@/api/sign/fna'
import { premiumReconciliationList } from '@/api/sign/policy'
import { loadDicts, getDictLabel } from '@/utils/useDict'
import { getNowTime, formatToDate, formatToDateTime } from '@/utils/date'
import EditableTable from '@/components/csf-common/EditableTable.vue'
import useUserStore from '@/store/modules/user'

import FileUploader from '@/components/LargeFileUploader/index.vue';

const { proxy } = getCurrentInstance()
proxy.useDictLists([
  'sys_no_yes',
  'csf_ap_frequency',
  'bx_currency_type',
  'csf_ap_first_issue',
  'csf_ap_dividend',
  'csf_fortune_status',
  'csf_ap_mailing_method',
  'receipt_status'
])
const router = useRouter()
const userStore = useUserStore()
const files = ref('')
const fileUploadDialogFlag = ref(false)
// 记录每个 tab 是否有未保存的修改（dirty 状态）
const tabDirty = ref({
  basic: false,
  productPlan: false,
  firstPayment: false,
  introducer: false,
  postal: false,
  related: false,
  attachment: false
})
// ===== Props & Emits =====
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  mode: {
    type: String,
    default: 'viewDetail'
  },
  policyBizId: {
    type: String,
    default: ''
  }
})
const uploaderRef = ref(null);
// 【关键】当弹窗关闭时，强制清空上传组件列表
const handleDialogClose = () => {
  if (uploaderRef.value) {
    // 调用子组件暴露的清空方法
    // 你需要在子组件中使用 defineExpose 暴露 clearList 方法
    uploaderRef.value.clearList(); 
    fileUploadDialogFlag.value = false  
    getAttachmentListDetail(props.policyBizId)
  }
};
const emit = defineEmits(['update:modelValue', 'submit', 'cancel', 'saveRow'])

const introducerTableData = ref([])
const introducerConfig = [
  {
    type: 'select',
    prop: 'brokerBizId',
    label: '转介人',
    api: '/insurance/base/api/userSaleExpand/page',
    keywordField: 'realName',
    requestParams: { pageNo: 1, pageSize: 500 },
    placeholder: '输入转介人名称搜索',
    debounceWait: 500, // 自定义防抖时间
    onChangeExtraFields: {
      broker: 'realName', // 选中后自动填 broker = raw.realName
      brokerName: 'realName',
      internalCode: 'internalNumber',
      team: 'deptName',
      phone: 'phone',
      teamBizId:'deptBizId'
    },
    transform: res => {
      return (res?.data.records || []).map(item => ({
        value: item.clientUserBizId,
        label: item.realName,
        ...item
      }))
    }
  },
  {
    type: 'input',
    prop: 'brokerName',
    label: '转介人姓名',
    span: 4,
    disabled: true
  },
  // {
  //     type: 'select',
  //     prop: 'gender',
  //     label: '性别',
  //     span: 4,
  //     options: [
  //         { value: 'male', label: '男' },
  //         { value: 'female', label: '女' }
  //     ]
  // },
  {
    type: 'input',
    prop: 'phone',
    label: '手机号码',
    span: 4,
    disabled: true
  },
  {
    type: 'input',
    prop: 'internalCode',
    label: '内部编号',
    span: 4,
    disabled: true
  },
  {
    type: 'input',
    prop: 'team',
    label: '所属团队',
    span: 4,
    disabled: true
  },
  {
    type: 'input',
    prop: 'brokerRatio',
    label: '分配比例%',
    span: 4,
    inputType: 'integer',
    rules: [
      { required: true, message: '请输入比例' },
      {
        validator: (rule, value, cb) => {
          const n = Number(value)
          if (isNaN(n) || n < 0 || n > 100) cb(new Error('0～100'))
          else cb()
        }
      }
    ]
  },
  {
    type: 'textarea',
    prop: 'remark',
    label: '备注',
    span: 4
  }
]

// 附加计划表格
const additionalPlansConfig = [
  {
    type: 'input',
    prop: 'product',
    label: '产品名称',
    span: 4
  },
  {
    type: 'input',
    prop: 'frequency',
    label: '付款频率',
    span: 4
  },
  {
    type: 'input',
    prop: 'term',
    label: '保障期限',
    span: 4
  },
  {
    type: 'input',
    prop: 'phone',
    label: '付款频率',
    span: 4
  },
  {
    type: 'input',
    prop: 'periods',
    label: '供款期数',
    span: 4
  },
  {
    type: 'input',
    prop: 'currency',
    label: '保单币种',
    span: 4
  },
  {
    type: 'input',
    prop: 'premium',
    label: '每期保费',
    span: 4
  },
  {
    type: 'input',
    prop: 'fee',
    label: '保单征费',
    span: 4
  }
]

function handleBatchSave(validRows) {
  console.log('批量提交:', validRows)
  // 调用 API
  introducerTableData.value = validRows
}

function applyViewMode(fields, mode) {
  if (mode === 'viewDetail') {
    return fields.map(item => ({
      ...item,
      disabled: true
    }))
  }
  // 非查看模式：保留原对象，可选择性移除 disabled
  return fields.map(item => {
    // 如果你希望编辑模式下完全不禁用，可以删除 disabled 属性
    const newItem = { ...item }
    delete newItem.disabled
    return newItem
  })
}

const newOrderData = ref({})
const basicInfoFormRef = ref()
const basicInfoFormData = ref({})
const basicInfoFormConfig = ref([
  {
    type: 'date',
    prop: 'signDate',
    label: '签单日'
  },
  {
    type: 'select',
    prop: 'signer',
    label: '签单员',
    api: '/insurance/base/api/userSignExpand/page',
    keywordField: 'realName',
    requestParams: { pageNo: 1, pageSize: 20 },
    placeholder: '输入签单员姓名搜索',
    debounceWait: 500, // 自定义防抖时间
    onChangeExtraFields: {
      signerBizId: 'userSignBizId',
      practiceCode: 'practiceCode'
    },
    valueKey: 'realName',
    labelKey: 'realName',
    transform: res => {
      return res?.data.records || []
    },
    rules: [{ required: true, message: '请选择签单员', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'practiceCode',
    label: '签单员执业编号'
  },
  {
    type: 'select',
    prop: 'signLocation',
    label: '签单地点',
    dictType: 'csf_ap_meeting_point'
  }
])

// 保单信息
const policyInfoFormRef = ref()
const policyInfoFormData = ref({})
const policyInfoFormConfig = ref([
  {
    type: 'input',
    prop: 'policyNo',
    label: '保单号'
  },
  {
    type: 'select',
    prop: 'reconciliationCompanyBizId',
    label: '出单经纪公司',
    api: '/insurance/base/api/insuranceReconciliationCompany/page',
    keywordField: 'queryContent',
    requestParams: { pageNo: 1, pageSize: 500 },
    placeholder: '输入公司名称搜索',
    debounceWait: 500, // 自定义防抖时间
    valueKey: 'reconciliationCompanyBizId',
    labelKey: 'name',
    transform: res => {
      return res?.data.records || []
    },
    onChangeExtraFields: {
      reconciliationCompany: 'name',
      reconciliationCode: 'code'
    },
    rules: [{ required: true, message: '请选择出单经纪公司', trigger: 'blur' }]
  },
  {
    type: 'select',
    prop: 'professionalInvestor',
    label: '专业投资者',
    defaultValue :'No',
    options: [
      { label: '是', value: 'Yes' },
      { label: '否', value: 'No' }
    ]
  },
  {
    type: 'input',
    prop: 'coolingOffDays',
    label: '冷静期(天)',
    inputType: 'decimal',
    rules: [{ pattern: /^\d+$/, message: '只能输入正整数', trigger: 'blur' }]
  },
  {
    type: 'date',
    prop: 'coolingOffEndDate',
    label: '冷静期结束日期'
  },
  {
    type: 'date',
    prop: 'latestPaymentDate',
    label: '最晚缴费日'
  },
  {
    type: 'select',
    prop: 'policyType',
    label: '保单类型',
    options: [
      { label: '电子保单', value: '1' },
      { label: '纸质保单', value: '2' }
    ]
  },
  {
    type: 'date',
    prop: 'effectiveDate',
    label: '保单生效日'
  },
  {
    type: 'date',
    prop: 'policyExpirationDate',
    label: '保单截止日'
  },
  {
    type: 'date',
    prop: 'underwritingDate',
    label: '保单核保日'
  },
  {
    type: 'date',
    prop: 'receiptDate',
    label: '保单回执日'
  },
  {
    type: 'select',
    prop: 'receiptStatus',
    label: '回执状态',
    dictType: 'receipt_status'
  },
  {
    type: 'select',
    prop: 'directPaymentEnabled',
    label: '是否开通直接支付',
    dictType: 'sys_no_yes'
  },
  {
    type: 'input',
    prop: 'policyHolder',
    label: '保单持有人'
  },
  {
    type: 'input',
    prop: 'insured',
    label: '保单受保人'
  },
  {
    type: 'input',
    prop: 'insuredAge',
    label: '受保人年龄'
  },
  {
    type: 'input',
    prop: 'gracePeriod',
    label: '宽限期（天）',
    inputType: 'decimal',
    rules: [{ pattern: /^\d+$/, message: '只能输入正整数', trigger: 'blur' }]
  },
  {
    type: 'select',
    prop: 'isJoin',
    label: '是否参加递增保障权益',
    dictType: 'sys_no_yes'
  }
])

// 基本计划
const basicPlanFormRef = ref()
const basicPlanFormData = ref({})
const basicPlanFormConfig = ref([
  {
    type: 'select',
    prop: 'insuranceCompanyBizId',
    label: '保险公司',
    api: '/insurance/base/api/insuranceCompany/page',
    keywordField: 'queryContent',
    requestParams: { pageNo: 1, pageSize: 500 },
    placeholder: '输入保险公司名称搜索',
    debounceWait: 500, // 自定义防抖时间
    valueKey: 'insuranceCompanyBizId',
    labelKey: 'fullName',
    transform: res => {
      return res?.data.records || []
    },
    onChangeExtraFields: {
      insuranceCompany: 'fullName',
      companyId: 'insuranceCompanyId',
      companyName: 'fullName'
    }
  },
  {
    type: 'select',
    prop: 'productCate',
    label: '保险种类',
    api: '/insurance/base/api/insuranceCategory/page',
    keywordField: 'name',
    requestParams: { pageNo: 1, pageSize: 20 },
    placeholder: '输入保险种类名称搜索',
    debounceWait: 500, // 自定义防抖时间
    valueKey: 'insuranceCategoryBizId',
    labelKey: 'name',
    transform: res => {
      return res?.data.records || []
    },
    onChangeExtraFields: {
      insuranceCategoryCode: 'code'
    }
  },
  {
    type: 'select',
    prop: 'productName',
    label: '产品名称',
    api: '/product/api/relProjectProductLaunch/parameter/page',
    keywordField: 'productName',
    requestParams: () => ({
      tenantBizId: userStore.projectInfo.tenantBizId,
      projectBizId: userStore.projectInfo.projectBizId,
      fieldBizId: 'field_olk1qZe81qHHKXbw',
      fieldValueBizId: 'field_value_uOfJH5ucA2YwJpbn',
      // ✅ 确认这里用的是正确的字段（code 或 bizId）
      categoryCodeList: [basicPlanFormData.value.insuranceCategoryCode || ''],
      insuranceCompanyBizIdList: [basicPlanFormData.value.insuranceCompanyBizId || ''],
      pageNo: 1,
      pageSize: 20
    }),
    placeholder: '请选择产品名称',
    debounceWait: 500,
    valueKey: 'productName',
    labelKey: 'productName',
    transform: res => {
      // console.log('======子组件选择选项后，父组件接收的值产品名称:', res?.data.records || [])
      return res?.data.records || []
    },
    onChangeExtraFields: {
      apiAttributeSettingDtoList: 'apiAttributeSettingDtoList',
      productLaunchBizId: 'productLaunchBizId',
      insuranceCategoryCode: 'code'
      // 如果需要，也可以回填其他字段
    }
  },
  {
    type: 'select',
    prop: 'paymentFrequency',
    label: '付款频率',
    dictType: 'csf_ap_frequency'
  },
  {
    type: 'input',
    prop: 'issueNumber',
    label: '供款期数'
  },
  {
    type: 'input',
    prop: 'guaranteePeriod',
    label: '保障年期',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [{ pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'sumInsured',
    label: '保额（重疾险）',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [{ pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }]
  },
  {
    type: 'select',
    prop: 'policyCurrency',
    label: '保单币种',
    dictType: 'bx_currency_type'
  },
  {
    type: 'input',
    prop: 'eachIssuePremium',
    label: '每期保费',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  },
  {
    type: 'input',
    prop: 'policyLevy',
    label: '保单征费',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  },
  {
    type: 'select',
    prop: 'isPrepay',
    label: '是否预缴',
    dictType: 'sys_no_yes'
  },
  {
    type: 'input',
    prop: 'prepaymentPeriod',
    label: '预缴年期',
    inputType: 'decimal',
    visible: formData => formData.isPrepay == '1'
  },
  {
    type: 'select',
    prop: 'isTraceable',
    label: '是否追溯',
    dictType: 'sys_no_yes'
  },
  {
    type: 'date',
    prop: 'retroactiveDate',
    label: '回溯日期',
    visible: formData => formData.isTraceable == '1'
  },
  {
    type: 'select',
    prop: 'initialPaymentMethod',
    label: '首期付款方式',
    dictType: 'csf_ap_first_issue'
  },
  {
    type: 'select',
    prop: 'renewalPaymentMethod',
    label: '续期付款方式',
    dictType: 'csf_ap_first_issue'
  },
  {
    type: 'select',
    prop: 'dividendDistributionMethod',
    label: '红利付款方式',
    dictType: 'csf_ap_dividend'
  }
])

// 首期保费
const firstPremiumTableData = ref([])
const firstPremiumFormRef = ref()
const firstPremiumFormData = ref({})
const firstPremiumFormConfig = ref([
  {
    type: 'input',
    prop: 'initialPremium',
    label: '首期保费',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  },
  {
    type: 'input',
    prop: 'policyLevy',
    label: '保单征费',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  },
  {
    type: 'select',
    prop: 'initialPaymentMethod',
    label: '首期缴费方式',
    dictType: 'csf_ap_first_issue'
  },
  {
    type: 'input',
    prop: 'initialPremiumPaid',
    label: '首期已缴保费',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  },
  {
    type: 'input',
    prop: 'initialPremiumDue',
    label: '首期待缴保费',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  },
  {
    type: 'input',
    prop: 'initialPremiumTotal',
    label: '首期缴费总额',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  },
  // {
  //     type: 'select',
  //     prop: 'initialPaymentStatus',
  //     label: '缴费状态',
  //     multiple: true,
  //     dictType: 'reconciliation_status'
  // },
  {
    type: 'date',
    prop: 'latestPaymentDate',
    label: '最晚缴费日',
    placeholder: '请选择'
  },
  {
    type: 'input',
    prop: 'initialPremiumDiscount',
    label: '首期保费优惠金额',
    inputType: 'decimal',
    decimalDigits: 4,
    rules: [
      { required: true, message: '请输入金额', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,4})?$/, message: '最多四位小数', trigger: 'blur' }
    ]
  }
])

// 邮寄信息
const postalFormRef = ref(null)
const postalFormData = ref({})
const postalFormConfig = ref([
  {
    type: 'select',
    prop: 'mailingMethod',
    label: '寄送方式',
    dictType: 'csf_mailing_method'
  },
  {
    type: 'input',
    prop: 'deliveryNo',
    label: '快递单号',
    visible: formData => formData.mailingMethod == '2'
  },
  {
    type: 'date',
    prop: 'brokerSignDate',
    label: '我司签收日',
    rules: [{ required: true, message: '请输入我司签收日', trigger: 'blur' }]
  },
  {
    type: 'date',
    prop: 'customerSignDate',
    label: '客户签收日',
    rules: [{ required: true, message: '请输入客户签收日', trigger: 'blur' }]
  }
])

// 关联记录
const relatedTableData = ref([])
const attachmentTableData = ref([])
const attachmentTableColumns = ref([
  {
    prop: 'originalName',
    label: '文件名',
    sortable: true,
    width: '300',
    formatter: row => row.originalName || '-'
  },
  {
    prop: 'fileType',
    label: '文件类型',
    sortable: true,
    width: '150',
    formatter: row => row.fileType || '-'
  },
  {
    prop: 'createTime',
    label: '上传时间',
    sortable: true,
    width: '200',
    formatter: row => formatToDateTime(row.createTime || '-')
  },
  {
    prop: 'creatorName',
    label: '上传人',
    sortable: true,
    width: '150',
    formatter: row => row.creatorName || '-'
  }
])

// ===== 本地响应式数据 =====
const defaultFormData = () => ({})

// ✅ 使用 ref 而不是 reactive
const localData = ref(defaultFormData())

// ✅ 只在挂载时初始化一次（避免 watch 形成闭环）
onMounted(async () => {
  if (props.modelValue) {
    console.log('🚀 父组件 props.modelValue 挂载时:', props.modelValue)
    // 深拷贝 + 合并默认值，防止缺失字段
    localData.value = { ...defaultFormData(), ...props.modelValue }
  }
  try {
    getPolicyfollowDetail()
  } catch (error) {
    console.error('字典加载失败', error)
  } finally {
  }
  // 应用查看模式到基本信息表格
  basicInfoFormConfig.value = basicInfoFormConfig
    ? applyViewMode(basicInfoFormConfig.value, props.mode)
    : []
  policyInfoFormConfig.value = policyInfoFormConfig
    ? applyViewMode(policyInfoFormConfig.value, props.mode)
    : []
})
// 监听基本信息（basic）
watch(
  [basicInfoFormData, policyInfoFormData],
  () => {
    tabDirty.value.basic = true
  },
  { deep: true }
)
// 监听首期保费（firstPayment）
watch(
  firstPremiumFormData,
  () => {
    tabDirty.value.firstPayment = true
  },
  { deep: true }
)
// 监听邮寄信息
watch(
  postalFormData,
  () => {
    tabDirty.value.postal = true
  },
  { deep: true }
)
// 监听基本计划（productPlan）
watch(
  basicPlanFormData,
  () => {
    tabDirty.value.productPlan = true
  },
  { deep: true }
)
// ✅ 监听 localData 变化，emit 出去（用于 v-model）
watch(
  () => localData.value,
  newVal => {
    console.log('========父组件监测的localData:', newVal)
    emit('update:modelValue', newVal)
  },
  { deep: true }
)
// ===== 表单引用 & 验证规则 =====
const formRef = ref()
const activeTab = ref('basic')
// ========================
// ✅ 新增：切换前确认
// ========================
const handleBeforeLeave = async (newTabName, oldTabName) => {
  // console.log('切换前确认-----------------------', newTabName, oldTabName)
  // console.log(tabDirty.value)
  if(props.mode === 'viewDetail'){return;}
  if (tabDirty.value[oldTabName]) {
    try {
      await ElMessageBox.confirm(`“${getTabLabel(oldTabName)}” 未提交，确定要切换吗？`, '提示', {
        confirmButtonText: '继续切换',
        cancelButtonText: '取消',
        type: 'warning'
      })
      return true // 允许切换
    } catch {
      return false // 阻止切换
    }
  }
  return true // 无未保存内容，允许切换
}
const getTabLabel = name => {
  const labels = {
    basic: '基础信息',
    productPlan: '产品计划',
    firstPayment: '首期缴费',
    introducer: '介绍人',
    postal: '邮寄信息',
    related: '关联记录',
    attachment: '附件'
  }
  return labels[name] || name
}
const handleTabClick = tab => {
  if (tab.props.name === 'firstPayment') {
    firstPremiumFormConfig.value = firstPremiumFormConfig
      ? applyViewMode(firstPremiumFormConfig.value, props.mode)
      : []
    if (!policyInfoFormData.value.policyNo) return
    getPremiumReconciliationList(policyInfoFormData.value.policyNo)
  } else if (tab.props.name === 'postal') {
    postalFormConfig.value = postalFormConfig
      ? applyViewMode(postalFormConfig.value, props.mode)
      : []
  } else if (tab.props.name === 'related') {
    getRelationRecord(newOrderData.value.fnaBizId)
  } else if (tab.props.name === 'attachment') {
    getAttachmentListDetail(newOrderData.value.policyBizId)
  } else if (tab.props.name === 'productPlan') {
    basicPlanFormConfig.value = basicPlanFormConfig
      ? applyViewMode(basicPlanFormConfig.value, props.mode)
      : []
  } else if (tab.props.name === 'introducer') {
    // introducerConfig.value = introducerConfig ? applyViewMode(introducerConfig.value, props.mode) : []
  } else if (tab.props.name === 'basic') {
    basicInfoFormConfig.value = basicInfoFormConfig
      ? applyViewMode(basicInfoFormConfig.value, props.mode)
      : []
  }
}

const handleSubmit = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      console.log('提交数据', introducerTableData.value)
      if (activeTab.value === 'postal') {
        tabDirty.value.postal = false
        emit('submit', { ...postalFormData.value, activeTab: activeTab.value })
      } else if (activeTab.value === 'firstPayment') {
        tabDirty.value.firstPayment = false
        emit('submit', { ...firstPremiumFormData.value, activeTab: activeTab.value })
      } else if (activeTab.value === 'attachment') {
        emit('submit', { activeTab: activeTab.value })
        tabDirty.value.attachment = false
      } else if (activeTab.value === 'introducer') {
        emit('submit', { ...introducerTableData.value, activeTab: activeTab.value })
        tabDirty.value.introducer = false
      } else if (activeTab.value === 'basic') {
        tabDirty.value.basic = false
        emit('submit', {
          ...basicInfoFormData.value,
          activeTab: activeTab.value,
          ...policyInfoFormData.value
        })
      } else if (activeTab.value === 'productPlan') {
        tabDirty.value.productPlan = false
        emit('submit', {
          ...basicPlanFormData.value,
          activeTab: activeTab.value,
          ...localData.additionalPlans
        })
      }else if (activeTab.value === 'attachment'){
        tabDirty.value.attachment = false
        emit('submit', {
          activeTab: activeTab.value
        })
      }
    }
  })
}

const handleCancel = () => {
  emit('cancel')
}
// 删除附件
const deleteFile = (row)=>{
  console.log(row)
  const fileBizId = row.fileBizId || '';
  delUploadFile(fileBizId,userStore.projectInfo.projectBizId).then(res=>{
    console.log(res)
    if(res.code===200){
      getAttachmentListDetail(props.policyBizId)
    }else{
      ElMessage.error('删除文件失败')
    }
    
  })
}

// 如果外部 modelValue 更新（比如重新加载数据），同步到 localData
watch(
  () => props.modelValue,
  newVal => {
    if (newVal) {
      Object.assign(localData, defaultFormData(), newVal)
    }
  },
  { deep: true }
)

// 查询新单跟进详情
const getPolicyfollowDetail = () => {
  if (!props.policyBizId) {
    return
  }
  getPolicyfollow(props.policyBizId).then(res => {
    if (res.code === 200) {
      console.log('====父组件在赋值basicPlanFormData前', basicPlanFormData.value)
      newOrderData.value = res.data
      policyInfoFormData.value = { ...transformToFormData(res.data, policyInfoFormConfig.value) }
      basicPlanFormData.value = { ...transformToFormData(res.data, basicPlanFormConfig.value) }
      basicInfoFormData.value = { ...transformToFormData(res.data, basicInfoFormConfig.value) }
      firstPremiumFormData.value = {
        ...transformToFormData(res.data, firstPremiumFormConfig.value)
      }
      postalFormData.value = {
        ...transformToFormData(res.data, postalFormConfig.value)
      }
      introducerTableData.value = res.data.brokerList || []
      console.log('====父组件在赋值basicPlanFormData后', basicPlanFormData.value)
    }
  })
}

// 查询附件列表
const getAttachmentListDetail = policyBizId => {
  if (!policyBizId) {
    return
  }
  const params = {
    objectBizId: policyBizId,
    pageNo: 1,
    pageSize: 100
  }
  uploadOssFileList(params).then(res => {
    if (res.code === 200) {
      attachmentTableData.value = res.data || []
    }
  })
}

// 附件上传方法
const handleUploadEnd = code => {
  if (code === 200) {
    ElMessage.success('上传文件成功')
    fileUploadDialogFlag.value = false
    files.value = ''
    getAttachmentListDetail(props.policyBizId)
  } else {
    ElMessage.error('上传文件失败')
  }
}

// 组装表单数据
const transformToFormData = (apiData, formConfig) => {
  const formData = {}

  formConfig.forEach(item => {
    const { prop, dictType } = item

    let value = null

    // 特殊映射（按需添加）
    switch (prop) {
      case 'signLocation':
        value = apiData.signLocation
        break
      default:
        value = apiData[prop]
    }

    // 处理字典字段：如果配置了 dictType，且值是 number，转为 string
    if (dictType && typeof value === 'number') {
      value = String(value)
    }

    formData[prop] = value ?? null
  })

  return formData
}
// 获取首期保费对账列表
const getPremiumReconciliationList = policyNo => {
  const params = {
    policyNo: policyNo,
    pageNo: 1,
    pageSize: 100
  }
  premiumReconciliationList(params).then(res => {
    if (res.code === 200) {
      firstPremiumTableData.value = res.data.records || []
    }
  })
}

// 获取关联流程记录
const getRelationRecord = fnaBizId => {
  getProcessDetail(fnaBizId).then(res => {
    if (res.code === 200) {
      relatedTableData.value = [res.data] || []
      console.log('relationRecordData', res.data)
    }
  })
}

const viewRecordDetail = e => {
  router.push({
    path: '/sign/FnaList/edit',
    query: {
      fnaBizId: newOrderData.value.fnaBizId,
      type: 'edit',
      status: newOrderData.value.status,
      source: 'newOrder',
      appointmentBizId: newOrderData.value.appointmentBizId
    }
  })
}
const handleSelectChange = async (prop, value, item, type) => {
  console.log('🔔 父组件收到 selectChange:', prop, value, type)

  await nextTick() // 确保 DOM 和响应式数据更新

  if (type === 'basicPlan') {
    // 只有当改变的是“保险公司”时，才刷新“产品名称”
    if (prop === 'insuranceCompanyBizId') {
      console.log('🔄 检测到保险公司变更，准备刷新产品列表...')

      // 1. 检查 Ref 是否存在
      if (!basicPlanFormRef.value) {
        console.error('❌ basicPlanFormRef 为空，无法调用方法')
        return
      }

      // 2. 检查方法是否存在
      if (typeof basicPlanFormRef.value.refreshRemoteOptions !== 'function') {
        console.error('❌ refreshRemoteOptions 方法未暴露或不存在')
        console.log('当前暴露的方法:', Object.keys(basicPlanFormRef.value))
        return
      }

      try {
        // 3. 可选：先清空产品字段的值，避免选中了旧公司的产品
        basicPlanFormData.value.productName = ''
        basicPlanFormData.value.productLaunchBizId = ''
        basicPlanFormData.value.insuranceCategoryCode = '' // 如果分类也依赖公司，可能也要清空

        console.log('🚀 正在调用子组件 refreshRemoteOptions...')

        // 4. 调用刷新
        await basicPlanFormRef.value.refreshRemoteOptions('productName')

        console.log('✅ 产品列表刷新指令执行完毕')
        // ElMessage.success('产品列表已更新')
      } catch (err) {
        console.error('💥 刷新产品列表出错:', err)
        ElMessage.error('产品列表更新失败，请重试')
      }
    }
  }
}

// 获取产品列表
const getProductLists = params => {
  getProductList(params).then(res => {
    if (res.code === 200) {
      console.log('productList', res.data.records || [])
      // productList.value = res.data.records || []
    }
  })
}

defineExpose({
  getPolicyfollowDetail
})
</script>

<style scoped>
.form-page {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  padding-top: 0;
}

.tab-placeholder {
  padding: 40px 0;
}

.form-footer {
  text-align: center;
  margin-top: 30px;
}

.sectionTitle {
  margin: 0 0 15px 0;
  font-size: 16px;
  line-height: 1;
  position: relative;
  padding-left: 16px;
}

.sectionTitle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 20px;
  background-color: #007bff;
  border-radius: 5px;
}

.section h5 {
  margin: 0;
  font-size: 14px;
  line-height: 1;
  position: relative;
  background-color: rgba(0, 119, 238, 0.05);
  color: #383838;
  padding: 15px 10px;
  border-radius: 4px;
}
</style>
