tenant-Platform/src/views/receivable/handingFee/report.vue

<template>
  <PageMain class="vh100">
    <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="handleClick">
      <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
        <el-form v-model="recordForm" label-width="80">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="companyId" label="保险公司">
                <el-cascader filterable clearable placeholder="请选择" v-model="recordForm.companyId"
                  :options="companyList" :props="companyIdprops" style="width: 100%;" @change="handleCompanyChange" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="time" label="创建时间">
                <el-date-picker v-model="recordForm.time" type="daterange" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="time" label="开票时间">
                <el-date-picker v-model="recordForm.invoiceTime" type="daterange" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="time" label="结算时间">
                <el-date-picker v-model="recordForm.settlementTime" type="daterange" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="status" label="结算状态">
                <el-select v-model="recordForm.status" filterable clearable>
                  <el-option v-for="item in settlement_status" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="accountsReceivable" label="应收项">
                <el-select v-model="recordForm.accountsReceivable" clearable>
                  <el-option v-for="item in optionObj['invoice_risk_type']" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="invoiceStatus" label="开票状态">
                <el-select v-model="recordForm.invoiceStatus" filterable clearable>
                  <el-option v-for="item in invoice_status" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="time" label="签单时间">
                <el-date-picker v-model="recordForm.signTimeRange" type="daterange" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch(1)">查询</el-button>
              <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table height="calc(100% - 200px)" :data="recordData" show-summary
          :summary-method="val => getSummaries(val, ['totalReceivable', 'totalOverinflatedAmount', 'superviseFee', 'SxfInvoicedAmount', 'sxfSettledAmount', 'SxfUnInvoicedAmount', 'sxfUnSettledAmount', 'settlementPaymentDifference'])">
          <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
          <el-table-column prop="totalReceivable" label="应收金额"></el-table-column>
          <el-table-column prop="totalOverinflatedAmount" label="虚增金额合计"></el-table-column>
          <el-table-column prop="superviseFee" label="应收手续费"></el-table-column>
          <el-table-column prop="SxfInvoicedAmount" label="已开票"></el-table-column>
          <el-table-column prop="sxfSettledAmount" label="已结算"></el-table-column>
          <el-table-column prop="SxfUnInvoicedAmount" label="未开票"></el-table-column>
          <el-table-column prop="sxfUnSettledAmount" label="未结算"></el-table-column>
          <el-table-column prop="settlementPaymentDifference" label="回款差额合计"></el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template #default="scope">
              <div class="flex a-c">
                <el-dropdown placement="bottom-start" trigger="click">
                  <span class="el-dropdown-link">
                    查看明细
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleSettlementDetail(scope.row)">结算明细</el-dropdown-item>
                      <el-dropdown-item :disabled="!['10','20'].includes(recordForm.accountsReceivable)"
                        @click="handleInvoiceRecord(scope.row)">开票明细</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane style="height: 100%" name="2" label="结算记录">
        <el-form v-model="recordForm1" label-width="120">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="settlementId" label="结算记录编号">
                <el-input v-model="recordForm1.settlementId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="companyIda" label="保险公司">
                <el-select v-model="recordForm1.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="invoiceParty" label="开票方">
                <el-select v-model="recordForm1.invoiceParty" clearable>
                  <el-option v-for="item in optionObj['invoice_party']" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="invoiceType" label="应收项">
                <el-select v-model="recordForm1.invoiceRiskType" clearable>
                  <el-option v-for="item in optionObj['invoice_risk_type']" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="status" label="结算状态">
                <el-select v-model="recordForm1.status" clearable>
                  <el-option v-for="item in optionObj['settlement_status']" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="settlementPerson" label="结算人">
                <el-input v-model="recordForm1.settlementPerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="settlementTime" label="结算时间">
                <el-date-picker v-model="recordForm1.settlementTime" type="daterange" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="invoiceId" label="开票记录编号">
                <el-input v-model="recordForm1.invoiceId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch(2)">查询</el-button>
              <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
              <el-button type="primary" @click="handleExport(2)">导出结算记录</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table height="calc(100% - 192px)" :data="recordData1" show-summary
          :summary-method="val => getSummaries(val, ['taxPoint', 'actualReceivedAmount'])">
          <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
          <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
          <el-table-column prop="invoiceType" label="应收项" width="100"></el-table-column>
          <el-table-column prop="taxPoint" label="税点" width="100"></el-table-column>
          <el-table-column prop="actualReceivedAmount" label="实收金额" width="100"></el-table-column>
          <el-table-column prop="settlementPaymentDifference" label="回款差额" width="100"></el-table-column>
          <el-table-column prop="settlementPaymentReason" label="回款差额原因" width="200"></el-table-column>
          <el-table-column prop="receivePaymentDate" label="收款日期" width="150"></el-table-column>
          <el-table-column label="收款凭证" width="100">
            <template #default="scope">
              <el-button link type="primary" v-if="scope.row.fileUrl" @click="view(scope.row)">查看凭证（{{
                scope.row.fileUrl.split(',').length }}）</el-button>
              <span v-else>无凭证</span>
            </template>
          </el-table-column>
          <el-table-column prop="createBy" label="结算人" width="100"></el-table-column>
          <el-table-column prop="createTime" label="结算时间" width="200"></el-table-column>
          <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
          <el-table-column label="操作" width="200" align="center" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)">删除</el-button>
              <el-button link type="primary" @click="handleAssociateInvoice(scope.row)">关联发票</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total1"
            @size-change="handleSizeChange($event, '2')"
            @current-change="handleCurrentChange($event, '2')"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
        <el-form v-model="recordForm2" label-width="120">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="invoiceId" label="开票记录编号">
                <el-input v-model="recordForm2.invoiceId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="companyId" label="保险公司">
                <el-select v-model="recordForm2.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="invoiceParty" label="开票方">
                <el-select v-model="recordForm2.invoiceParty">
                  <el-option v-for="item in optionObj['invoice_party']" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="settlementPerson" label="结算人">
                <el-input v-model="recordForm2.settlementPerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="settlementTime" label="结算时间">
                <el-date-picker v-model="recordForm2.settlementTime" type="daterange" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="status" label="状态">
                <el-select v-model="recordForm2.status">
                  <el-option value="1" label="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch(3)">查询</el-button>
              <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
              <el-button type="primary" @click="handleExport(3)">导出明细</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table height="calc(100% - 192px)" :data="recordData2" show-summary
          :summary-method="val => getSummaries(val, ['receivableSuperviseCosts', 'jqPremium', 'taxPremium', 'syPremium', 'jqSuperviseCostsProportion', 'sySuperviseCostsProportion'])">
          <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
          <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
          <el-table-column prop="status" label="状态" width="100"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="productName" label="险种" width="120"></el-table-column>
          <el-table-column prop="superviseCostPremiums4Car" label="应收手续费" width="100"></el-table-column>
          <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
          <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
          <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="100"></el-table-column>
          <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
          <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例" width="100"></el-table-column>
          <el-table-column prop="jqPolicyNo" label="交强险保单号" width="200"></el-table-column>
          <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
          <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
          <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
          <el-table-column prop="settlementPerson" label="结算人" width="100"></el-table-column>
          <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total2"
            @size-change="handleSizeChange($event, '3')"
            @current-change="handleCurrentChange($event, '3')"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane style="height: 100%" name="4" label="非车结算明细">
        <el-form v-model="recordForm3" label-width="120">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="invoiceId" label="开票记录编号">
                <el-input v-model="recordForm3.invoiceId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="companyId" label="保险公司">
                <el-select v-model="recordForm3.companyId" placeholder="请选择" clearable filterable>
                  <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="invoiceParty" label="开票方">
                <el-select v-model="recordForm3.invoiceParty">
                  <el-option v-for="item in optionObj['invoice_party']" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="settlementPerson" label="结算人">
                <el-input v-model="recordForm3.settlementPerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="settlementTime" label="结算时间">
                <el-date-picker v-model="recordForm3.settlementTime" type="daterange" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="status" label="状态">
                <el-select v-model="recordForm3.status">
                  <el-option value="1" label="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="handleSearch(4)">查询</el-button>
              <el-button plain type="primary" @click="handleReset(4)">重置</el-button>
              <el-button type="primary" @click="handleExport(4)">导出明细</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table height="calc(100% - 192px)" :data="recordData3" show-summary
          :summary-method="val => getSummaries(val, ['receivableSuperviseCosts', 'jyPremium', 'jySuperviseCostsProportion'])">
          <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
          <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
          <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
          <el-table-column prop="status" label="状态" width="100"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
          <el-table-column prop="productName" label="险种" width="120"></el-table-column>
          <el-table-column prop="jySuperviseCostsPremiums" label="应收手续费" width="100"></el-table-column>
          <el-table-column prop="jyPremium" label="非车险保费" width="100"></el-table-column>
          <el-table-column prop="jySuperviseCostsProportion" label="非车险手续费比例" width="100"></el-table-column>
          <el-table-column prop="jyPolicyNo" label="非车险保单号" width="200"></el-table-column>
          <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
          <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
          <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:current-page="pages" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total3"
            @size-change="handleSizeChange($event, '4')"
            @current-change="handleCurrentChange($event, '4')"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </PageMain>
  <el-dialog :close-on-click-modal="false" v-model="viewCredential" title="查看凭证" width="500">
    <div class="text-center text-[14px] text-[red] pb-[20px]">点击图片放大预览</div>
    <div class="flex a-c f-wrap">
      <el-image v-for="(item, index) in CredentialList" :key="index" class=""
        style="width: 100px; height: 100px;margin:0  20px;" :src="item" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
        :preview-src-list="CredentialList" show-progress :initial-index="index" alt="凭证图片" hide-on-click-modal
        fit="cover" />
    </div>

  </el-dialog>
</template>

<script setup lang="ts">
import api from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';

const router = useRouter()
const route = useRoute()
const invoice_status = ref([
  {
    value: '0',
    label: '未开票'
  },
  {
    value: '1',
    label: '已开票'
  },
  {
    value: ' ',
    label: '全部'
  },
])
const settlement_status = ref([
  {
    value: '0',
    label: '未结算'
  },
  {
    value: '1',
    label: '已结算'
  },
  {
    value: ' ',
    label: '全部'
  },
])
const companyIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
// 保险公司选择器改变时触发
const handleCompanyChange = (e) => {
  console.log(e)

  recordForm.value.companyId = e[e.length - 1] || ''
}
let activeName = ref('1')
const handleClick = (e) => {
  pages.value = 1
  size.value = 10
  switch (e.props.name) {
    case '1':
      initData1()
      break;
    case '2':
      initData2()
      break;
    case '3':
      initData3(['1'])
      break;
    case '4':
      initData3(['3'])
      break;
  }
}
const viewCredential = ref(false)//查看凭证弹窗
const CredentialList = ref([])//凭证图片
// 保险公司
let companyList = ref([])
const initCompany = () => {
  api.agreementApi.findTree({ name: "", systemCode: localStorage.getItem('login_system') }).then((res: any) => {
    if (res.code == 200) {
      companyList.value = res.data
    }
  })
}

// 分页
let pages = ref(1)
let size = ref(10)
let total = ref(0)
let total1 = ref(0)
let total2 = ref(0)
let total3 = ref(0)
const handleSizeChange = (size1, type) => {
  size.value = size1
  switch (type) {
    case '2':
      initData2()
      break;
    case '3':
      initData3('1')
      break;
    case '4':
      initData3('2')
      break;
  }
}
const handleCurrentChange = (page, type) => {
  pages.value = page
  switch (type) {
    case '2':
      initData2()
      break;
    case '3':
      initData3('1')
      break;
    case '4':
      initData3('3')
      break;
  }
}

const getSummaries = (param, list) => {
  console.log(param)
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  // 指定需要计算的字段列表（可根据需求添加字段名）
  const specifiedFields = list // 替换为您需要的字段名

  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
        '',
      ])
      return
    }
    // 计算数字类型字段和指定字段
    const values = data.map((item) => {
      const val = item[column.property]
      // 排除空值
      if (val === '' || val === null || val === undefined) {
        return NaN
      }
      // 如果是数字类型，直接参与计算
      if (typeof val === 'number') {
        return val
      }
      // 如果字段在指定列表中，尝试转换为数字
      if (specifiedFields.includes(column.property)) {
        const num = Number(val)
        return Number.isNaN(num) ? NaN : num
      }
      // 其他情况不参与计算
      return NaN
    })
    if (!values.every((value) => Number.isNaN(value))) {
      const total = values.reduce((prev, curr) => {
        if (!Number.isNaN(curr)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      // 保留五位小数
      sums[index] = ` ${total.toFixed(5)}`
    } else {
      sums[index] = '-'
    }
  })
  return sums
}

// 结算记录
let recordForm = ref({})
let recordForm1 = ref({})
let recordForm2 = ref({})
let recordForm3 = ref({})
let recordData = ref([])
let recordData1 = ref([])
let recordData2 = ref([])
let recordData3 = ref([])

const view = (scope) => {
  CredentialList.value = scope.fileUrl.split(',')
  viewCredential.value = true
}

const initData1 = () => {
  api.settlementApi.companySuperviseSettlementReport({
    companyId: recordForm.value.companyId,
    startTime: recordForm.value.time?.[0],
    endTime: recordForm.value.time?.[1],
    accountsReceivable: recordForm.value.accountsReceivable,
    invoiceStartTime: recordForm.value.invoiceTime?.[0],
    invoiceEndTime: recordForm.value.invoiceTime?.[1],
    settlementStartTime: recordForm.value.settlementTime?.[0],
    settlementEndTime: recordForm.value.settlementTime?.[1],
    signingStartTime: recordForm.value.signTimeRange?.[0],
    signingEndTime: recordForm.value.signTimeRange?.[1],
    status: recordForm.value.status,
    invoiceStatus: recordForm.value.invoiceStatus,
    invoiceTypes: ['1', '3'],
    agreementType: '2'
  }).then((res: any) => {
    if (res.code == 200) {
      recordData.value = res.data
    }
  })
}
const initData2 = () => {
  api.settlementApi.superviseSettlementExcel({
    agreementType: '2',
    settlementId: recordForm1.value.settlementId,
    invoiceParty: recordForm1.value.invoiceParty,
    invoiceRiskType: recordForm1.value.invoiceRiskType,
    status: recordForm1.value.status,
    invoiceStatus: recordForm1.value.invoiceStatus,
    companyId: recordForm1.value.companyId,
    invoiceType: recordForm1.value.invoiceType,
    settlementPerson: recordForm1.value.settlementPerson,
    invoiceId: recordForm1.value.invoiceId,
    settlementDateStart: recordForm1.value.settlementTime?.[0],
    settlementDateEnd: recordForm1.value.settlementTime?.[1],
    pages: pages.value,
    size: size.value,
    invoiceTypes: ['1', '3']
  }).then((res: any) => {
    if (res.code == 200) {
      recordData1.value = res.data.records
      total1.value = res.data.total
    }
  })
}
const initData3 = (invoiceTypes) => {
  let params = invoiceTypes.includes('1') ?
    {
      invoiceId: recordForm2.value.invoiceId,
      companyId: recordForm2.value.companyId,
      invoiceParty: recordForm2.value.invoiceParty,
      settlementPerson: recordForm2.value.settlementPerson,
      status: recordForm2.value.status,
      settlementTimeStart: recordForm2.value.settlementTime?.[0],
      settlementTimeEnd: recordForm2.value.settlementTime?.[1],
      pages: pages.value,
      size: size.value,
      invoiceTypes: invoiceTypes
    } :
    invoiceTypes.includes('3') ?
      {
        invoiceId: recordForm3.value.invoiceId,
        companyId: recordForm3.value.companyId,
        invoiceParty: recordForm3.value.invoiceParty,
        settlementPerson: recordForm3.value.settlementPerson,
        status: recordForm3.value.status,
        settlementTimeStart: recordForm3.value.settlementTime?.[0],
        settlementTimeEnd: recordForm3.value.settlementTime?.[1],
        pages: pages.value,
        size: size.value,
        invoiceTypes: invoiceTypes
      } :
      {}
  api.settlementApi.superviseSettlementDetailExcel({
    ...params
  }).then((res: any) => {
    if (res.code == 200) {
      recordData2.value = res.data.records
      recordData3.value = res.data.records
      total2.value = res.data.total
      total3.value = res.data.total
    }
  })
}

const handleSearch = (type) => {
  switch (type) {
    case 1:
      initData1()
      break;
    case 2:
      initData2()
      break;
    case 3:
      initData3(['1'])
      break;
    case 4:
      initData3(['3'])
      break;
  }
}
const handleReset = (type) => {
  pages.value = 1
  size.value = 10
  switch (type) {
    case 1:
      recordForm.value = {
        companyId: '',
        time: [],
        status: ''
      }
      initData1()
      break;
    case 2:
      recordForm1.value = {
        settlementId: '',
        companyId: '',
        invoiceParty: '',
        invoiceType: '',
        status: '',
        settlementPerson: '',
        settlementTime: [],
        invoiceId: ''
      }
      initData2()
      break;
    case 3:
      recordForm2.value = {
        invoiceId: '',
        companyId: '',
        invoiceParty: '',
        settlementPerson: '',
        settlementTime: [],
        status: ''
      }
      initData3(['1'])
      break;
    case 4:
      recordForm3.value = {
        invoiceId: '',
        companyId: '',
        invoiceParty: '',
        settlementPerson: '',
        settlementTime: [],
        status: ''
      }
      initData3(['3'])
      break;
  }

}
// 结算明细
const handleSettlementDetail = (row) => {
  activeName.value = '2'
  recordForm1.value.companyId = row.id
  initData2()
}
// 开票明细
const handleInvoiceRecord = (row) => {
  switch (recordForm.value.accountsReceivable) {
    case '10':
      activeName.value = '3'
      recordForm2.value.companyId = row.id
      initData3(['1'])
      break;
    case '20':
      activeName.value = '4'
      recordForm3.value.companyId = row.id
      initData3(['3'])
      break;
    default:
  }

}

const handleExport = (type) => {
  switch (type) {
    case 2:
      exportSuperviseSettlementExcel()
      break;
    case 3:
      exportSuperviseSettlementDetailExcel()
      break;
    case 4:
      exportSuperviseSettlementDetailJyExcel()
      break;
  }
}
const exportSuperviseSettlementExcel = () => {
  api.settlementApi.exportSuperviseSettlementExcel({
    agreementType: '2',
    settlementId: recordForm1.value.settlementId,
    invoiceParty: recordForm1.value.invoiceParty,
    invoiceRiskType: recordForm1.value.invoiceRiskType,
    status: recordForm1.value.status,
    companyId: recordForm1.value.companyId,
    invoiceType: recordForm1.value.invoiceType,
    settlementPerson: recordForm1.value.settlementPerson,
    invoiceId: recordForm1.value.invoiceId,
    settlementDateStart: recordForm1.value.settlementTime?.[0],
    settlementDateEnd: recordForm1.value.settlementTime?.[1],
    pages: pages.value,
    size: size.value,
    invoiceTypes: ['1', '3']
  }).then((res: any) => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
    const fileName = '手续费应收结算报表明细' + new Date().getTime() + '.xlsx';
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  })
}
const exportSuperviseSettlementDetailExcel = () => {
  api.settlementApi.exportSuperviseSettlementDetailExcel({

  }).then((res: any) => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
    const fileName = '手续费应收车险结算报表明细' + new Date().getTime() + '.xlsx';
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  })
}
const exportSuperviseSettlementDetailJyExcel = () => {
  api.settlementApi.exportSuperviseSettlementDetailJyExcel({

  }).then((res: any) => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
    const fileName = '手续费应收非车险结算报表明细' + new Date().getTime() + '.xlsx';
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  })
}

const optionObj = ref({})
const initOption = () => {
  let list = ['invoice_risk_type', 'invoice_party', 'settlement_status']
  list.forEach(item => {
    api.additionalApi.dictDetails(item).then((res: any) => {
      if (res.code == 200) {
        if (res.data) {
          optionObj.value[item] = res.data
        }
      }
    })
  })
}
const handleDetail = (type) => {
  console.log(type.settlementId)
  ElMessageBox.confirm(
    '确定删除该记录吗？',
    '删除',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.settlementApi.deleteSettlement(type.settlementId).then((res: any) => {
        if (res.code == 200) {
          ElMessage({
            message: '删除成功',
            type: 'success'
          })
          initData2()
        }
      })
    })
    .catch(() => {
    })
}
const handleAssociateInvoice = (row) => {
  router.push({
    path: '/receivable/private/invoiceRecord',
    query: {
      invoiceId: row.invoiceId
    }
  })
}
const handleOrderDetail = (type: any) => {
  router.push({
    path: '/insurancePolicy/order/insurancePolicyOrderDetail',
    query: {
      orderNo: type.orderNo
    }
  })
}

onMounted(() => {
  initOption();
  initCompany();
  activeName.value = route.query.activeName;
  if (route.query.activeName == "2") {
    recordForm1.value.invoiceId = route.query.id
    initData2();
  } else if (route.query.activeName == "3") {
    recordForm2.value.invoiceId = route.query.id
    initData3(['1']);
  }else if (route.query.activeName == "4") {
    recordForm3.value.invoiceId = route.query.id
    initData3(['3']);
  } else {
    initData1();
  }
})

</script>

<style scoped lang="scss">
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

:deep(.subTable .el-table__header-wrapper) {
  display: none;
}

:deep(.el-dropdown-link) {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>