<template>
  <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
    <div v-show="showSearch" v-loading="loading" class="mb-[10px]">
      <el-card shadow="hover">
        <el-form ref="formRef" :model="form" :rules="rules" :inline="true" label-width="80px">
          <el-form-item v-if="false" label="id" prop="id">
            <el-input v-model="form.id" disabled />
          </el-form-item>
          <el-form-item label="红冲流水号" prop="invoicingId">
            <el-input v-model="form.invoicingId" disabled />
          </el-form-item>
          <el-form-item label="红冲原因" prop="invoicingReason">
            <el-select v-model="form.invoicingReason" disabled placeholder="请选择红冲原因" clearable>
              <el-option v-for="item in bfs_invoicing_reason" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-form-item label="原因描述" prop="invoicingDetail">
              <el-input v-model="form.invoicingDetail" readonly type="textarea" style="width: 290px" :rows="4" placeholder="请输入原因描述"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </transition>
  <el-card class="box-card">
    <el-table v-loading="detailLoading" :data="invoicingDetailList">
      <el-table-column v-if="false" label="id" align="center" prop="id" />
      <el-table-column label="凭证号" align="center" prop="belnrSap" />
      <el-table-column label="凭证大类编码" align="center" prop="certificateId" />
      <el-table-column label="场景编码" align="center" prop="costId" width="150px" />
      <el-table-column label="总账科目" align="center" prop="finItemCode" width="150px" />
      <el-table-column label="明细科目" align="center" prop="subItemCode" width="150px" />
      <el-table-column label="借贷标记" align="center" prop="finItemType">
        <template #default="scope">
          <dict-tag :options="bfs_debit_and_credit" :value="scope.row.finItemType" />
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center" prop="amount" />
      <el-table-column label="记账日期" align="center" prop="accountDate" width="150px">
        <template #default="scope">
          <span>{{ parseTime(scope.row.accountDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务号码" align="center" prop="businessNo" width="200px" />
      <el-table-column label="业务机构" align="center" prop="manageCom" />
      <el-table-column label="交费年期" align="center" prop="payendyear" />
      <el-table-column label="保单号" align="center" prop="policyNo" width="200px" />
      <el-table-column label="分单号" align="center" prop="singlePolicyNo" width="200px" />
      <el-table-column label="手续费结算单位" align="center" prop="settlementUnit" width="100px" />
      <el-table-column label="银行对账码" align="center" prop="reconCode" width="200px" />
      <el-table-column label="销售渠道" align="center" prop="saleChnl" />
      <el-table-column label="往来单位分类" align="center" prop="businessPartners" />
      <el-table-column label="供应商" align="center" prop="intraBranch" />
      <el-table-column label="业务性质" align="center" prop="businessNature" />
      <el-table-column label="原因代码" align="center" prop="cashFlow" />
      <el-table-column label="开户行" align="center" prop="openingBank" />
      <el-table-column label="成本中心" align="center" prop="costCenter" />
      <el-table-column label="税率" align="center" prop="taxRate" />
      <el-table-column label="税码" align="center" prop="taxCode" />
      <el-table-column label="税项" align="center" prop="taxClass" />
      <el-table-column label="承诺项目" align="center" prop="budget" />
    </el-table>
    <pagination
      v-show="invoicingDetailTotal > 0"
      v-model:page="queryInvoicingParams.pageNum"
      v-model:limit="queryInvoicingParams.pageSize"
      :total="invoicingDetailTotal"
      @pagination="getInvoicingDetailList"
    />

    <el-form ref="invoicingFormRef" :inline="true" :model="invoicingForm" label-position="left" label-width="130px" style="margin-top: 20px">
      <el-form-item label="借方总额" prop="debitBalance">
        <el-input v-model="invoicingForm.debitBalance" readonly />
      </el-form-item>
      <el-form-item label="贷方总额" prop="creditBalance">
        <el-input v-model="invoicingForm.creditBalance" readonly />
      </el-form-item>
    </el-form>

    <el-form ref="comformRef" :model="comform" :inline="true" label-width="80px">
      <el-form-item style="margin-top: 20px">
        <el-select v-model="comform.invoicingKind" placeholder="请选择红冲方式" clearable>
          <el-option v-for="item in bfs_invoicing_kind" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item style="margin-top: 20px">
          <el-button type="primary" v-hasPermi="['bfs:redivoapply:auditpass']" icon="Refresh" @click="handleAuditPass">审核通过</el-button>
          <el-button type="primary" v-hasPermi="['bfs:redivoapply:auditfail']" icon="Refresh" @click="handleAuditFail">审核作废</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-card>
</template>
<script setup lang="ts">
import { getCacheList, getInvoicingDetail, invoicingAudit, quryInvoicingDetailList } from '@/api/bfs/busnessQury/redInvoicing';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { bfs_invoicing_type } = toRefs<any>(proxy?.useDict('bfs_invoicing_type'));
const { bfs_invoicing_reason } = toRefs<any>(proxy?.useDict('bfs_invoicing_reason'));
const { bfs_invoicing_kind } = toRefs<any>(proxy?.useDict('bfs_invoicing_kind'));
const { bfs_certificate_type, bfs_debit_and_credit } = toRefs<any>(proxy?.useDict('bfs_certificate_type', 'bfs_debit_and_credit'));

const showSearch = ref(true);
const loading = ref(false);
const formRef = ref<ElFormInstance>();
const comformRef = ref<ElFormInstance>();

const certificateList = ref([]);
const costList = ref([]);

const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);

const detailLoading = ref(false);
const invoicingDetailList = ref([]);
const invoicingDetailTotal = ref(0);
const invoicingForm = ref({});
const invoicingFormRef = ref<ElFormInstance>();

const initFormData = {
  id: '',
  invoicingId: '',
  invoicingReason: '',
  invoicingDetail: '',
  invoicingType: '',
  status: '',
  invoicingKind: '',
  applyBy: ''
};

const data = reactive({
  form: { ...initFormData },
  rules: {}
});

const { form, rules } = toRefs(data);

const comformData = reactive({
  comform: { invoicingKind: '' }
});
const { comform } = toRefs(comformData);

const quryInvoicingData = reactive({
  queryInvoicingParams: {
    pageNum: 1,
    pageSize: 10,
    invoicingId: undefined,
    params: {}
  },
  queryInvoicingRules: {}
});
const { queryInvoicingParams, queryInvoicingRules } = toRefs(quryInvoicingData);

const loadingPage = async (invoicingId: string) => {
  loading.value = true;
  try {
    const res = await getInvoicingDetail(invoicingId);
    Object.assign(form.value, res.data.invoicing);
    await getInvoicingDetailList();
  } finally {
    loading.value = false;
  }
};

/** 查询字典下拉信息 */
const getCache = async () => {
  const res = await getCacheList();
  certificateList.value = res.data.certificateTypeCache;
  costList.value = res.data.costTypeCache;
};

const getInvoicingDetailList = async () => {
  queryInvoicingParams.value.invoicingId = form.value.invoicingId;
  const res = await quryInvoicingDetailList(queryInvoicingParams.value);
  invoicingDetailList.value = res.rows;
  invoicingDetailTotal.value = res.total;
  invoicingFormRef.value?.resetFields();
  invoicingForm.value.debitBalance = res.otherMsg.dandc.debitBalance;
  invoicingForm.value.creditBalance = res.otherMsg.dandc.creditBalance;
};

const handleClose = () => {
  proxy?.$tab.closePage();
};

const handleAuditPass = async () => {
  if (!comform.value.invoicingKind) {
    proxy?.$modal.msgError('请选择红冲种类');
    return;
  }
  await proxy?.$modal.confirm('是否审核通过红冲申请');
  form.value.status = '2';
  form.value.invoicingKind = comform.value.invoicingKind;
  const res = await invoicingAudit(form.value);
  if (res.code === 200) {
    proxy?.$modal.msgSuccess('审核通过');
    handleClose();
  }
};

const handleAuditFail = async () => {
  await proxy?.$modal.confirm('是否审核作废红冲申请');
  form.value.status = '-1';
  const res = await invoicingAudit(form.value);
  if (res.code === 200) {
    proxy?.$modal.msgSuccess('审核通过');
    handleClose();
  }
};

onMounted(() => {
  const route = useRoute();
  const invoicingId = route.query.invoicingId;
  if (invoicingId) {
    loadingPage(typeof invoicingId === 'string' ? invoicingId : invoicingId.toString());
  }
  getCache();
});
</script>
<style scoped lang="scss"></style>
