<style scoped lang="scss">
.dialog-body {
  .info-section {
    margin-bottom: 16px;
  }
  .info-title {
    font-size: 14px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #409eff;
  }
  .warning-tip {
    margin-top: 16px;
    padding: 10px 16px;
    background: #fdf6ec;
    border: 1px solid #e6a23c;
    border-radius: 4px;
    color: #e6a23c;
    font-size: 13px;
    line-height: 1.6;
  }
}
</style>
<template>
  <div class="system-dialog-container">
    <el-dialog
        title="确认手动开票"
        v-model="state.dialog.isShowDialog"
        width="700px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        @close="onClose"
        align-center>
      <div class="dialog-body" v-if="state.invoice">
        <div class="info-section">
          <div class="info-title">发票基本信息</div>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="发票ID">{{ state.invoice.id }}</el-descriptions-item>
            <el-descriptions-item label="发票申请单号">{{ state.invoice.applyId }}</el-descriptions-item>
            <el-descriptions-item label="发票类型">
              <ext-d-label type="Invoice.type" :model-value="state.invoice.invoiceType"/>
            </el-descriptions-item>
            <el-descriptions-item label="开票金额">{{ u.fmt.fmtMoney(state.invoice.invoiceAmount) }}</el-descriptions-item>
            <el-descriptions-item label="订单总额">{{ u.fmt.fmtMoney(state.invoice.totalMoney) }}</el-descriptions-item>
            <el-descriptions-item label="总电量(度)">{{ state.invoice.totalPower }}</el-descriptions-item>
            <el-descriptions-item label="电费">{{ u.fmt.fmtMoney(state.invoice.elecMoney) }}</el-descriptions-item>
            <el-descriptions-item label="服务费">{{ u.fmt.fmtMoney(state.invoice.serviceMoney) }}</el-descriptions-item>
            <el-descriptions-item label="服务费优惠">{{ u.fmt.fmtMoney(state.invoice.serviceMoneyDiscount) }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="info-section">
          <div class="info-title">购买方信息</div>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="发票抬头">{{ state.invoice.invoiceTitle || '-' }}</el-descriptions-item>
            <el-descriptions-item label="公司税号">{{ state.invoice.taxId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="公司地址">{{ state.invoice.address || '-' }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ state.invoice.telephone || '-' }}</el-descriptions-item>
            <el-descriptions-item label="开户银行">{{ state.invoice.bankName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="银行账户">{{ state.invoice.bankAccount || '-' }}</el-descriptions-item>
            <el-descriptions-item label="接收邮箱">{{ state.invoice.email || '-' }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ state.invoice.phone || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="info-section" v-if="state.invoice.orderDetails && state.invoice.orderDetails.length > 0">
          <div class="info-title">关联订单</div>
          <el-table :data="state.invoice.orderDetails" border size="small">
            <el-table-column label="充电订单号" prop="startChargeSeq"/>
            <el-table-column label="总电量(度)" prop="totalPower"/>
            <el-table-column label="订单总额">
              <template #default="{row}">{{ u.fmt.fmtMoney(row.totalMoney) }}</template>
            </el-table-column>
            <el-table-column label="电费">
              <template #default="{row}">{{ u.fmt.fmtMoney(row.elecMoney) }}</template>
            </el-table-column>
            <el-table-column label="服务费">
              <template #default="{row}">{{ u.fmt.fmtMoney(row.serviceMoney) }}</template>
            </el-table-column>
            <el-table-column label="服务费优惠">
              <template #default="{row}">{{ u.fmt.fmtMoney(row.serviceMoneyDiscount) }}</template>
            </el-table-column>
          </el-table>
        </div>

        <div class="warning-tip">
          请仔细核对以上发票信息与手动开票数据是否一致。确认后系统将自动完成开票后处理（更新发票状态、关联订单开票状态等），此操作不可撤销。
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button :loading="state.btnLoading" type="primary" @click="onConfirm" size="default">确认已手动开票</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="ConfirmManualDialog">
import { reactive, ref } from 'vue';
import { Msg } from "/@/utils/message";
import { $post } from "/@/utils/request";
import u from '/@/utils/u'
import ExtDLabel from "/@/components/form/ExtDLabel.vue";

const emit = defineEmits(['refresh']);

const initState = () => ({
  invoice: null as any,
  btnLoading: false,
  dialog: {
    isShowDialog: false,
  },
});

const state = reactive(initState());

const open = (row: any) => {
  state.invoice = row;
  state.dialog.isShowDialog = true;
};

const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState());
};

const onCancel = () => {
  onClose();
};

const onConfirm = () => {
  state.btnLoading = true;
  $post(`/finance/confirmManualInvoice/${state.invoice.id}`).then(() => {
    state.btnLoading = false;
    Msg.message('手动开票确认成功');
    onClose();
    emit('refresh');
  }).catch(() => {
    state.btnLoading = false;
  });
};

defineExpose({
  open
});
</script>
