<template>
  <div class="app-container">
    <el-card class="cardStyle" style="padding: 10px 0" >
      <div v-if="data.status === '0'" style="display: flex;justify-content: space-between;align-items: center">
        <div style="margin-right: 10px">当前状态为未开票，请点击按钮完成开票</div>
        <el-button type="primary" round @click="dialogVisible=true">完成开票</el-button>
      </div>
      <div v-if="data.status === '1'" style="display: flex;justify-content: space-between;align-items: center">
        <div style="margin-right: 10px">当前状态为已开票，{{data.updateTime}}完成开票</div>
      </div>
    </el-card>
    <el-card class="cardStyle">
      <h3>开票明细</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="抬头类型">{{ invoiceTitle.titleType }}</el-descriptions-item>
        <el-descriptions-item label="名称" labelStyle="width: 80px" contentStyle="width: 150px">{{ invoiceTitle.titleName }}</el-descriptions-item>
        <el-descriptions-item label="税号">{{ invoiceTitle.taxId }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ invoiceTitle.unitAddress }}</el-descriptions-item>
        <el-descriptions-item label="电话号码">{{ invoiceTitle.phoneNumber }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ invoiceTitle.email }}</el-descriptions-item>
      </el-descriptions>
      <div class="marginTop"></div>
    </el-card>
    <el-card class="cardStyle">
      <h3>关联申请订单明细</h3>
      <el-table :data="orderList" border show-summary style="width: 100%">
        <el-table-column prop="orderCode" label="订单号" align="center" width="180"></el-table-column>
        <el-table-column prop="totalElectricityAmount" align="center" label="电费总金额"></el-table-column>
        <el-table-column prop="totalServiceAmount" align="center" label="服务费总金额"></el-table-column>
        <el-table-column prop="totalOrderAmount" align="center" label="订单总金额"></el-table-column>
      </el-table>
      <div class="marginTop"></div>
    </el-card>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="35%"
    >
      点击确定，将此记录更改为已开票状态！
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateInvoiceStatus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {getInvoice, updateInvoice} from "@/api/order/invoice";

export default {
  name: "",
  data() {
    return {
      // 申请开票 id
      invoiceRecordId: null,
      // 接口返回结果
      data: {},
      // 订单金额列表
      orderList: [],
      // 发票抬头
      invoiceTitle: {},
      dialogVisible: false,
    };
  },
  created() {
    this.invoiceRecordId = this.$route.params.id;
    console.log("发票详情：", this.invoiceRecordId);//打印结果为{user:'david'}
    this.selectInvoiceRecord();
  },
  methods: {
    // 查询申请开票信息详情
    selectInvoiceRecord() {
      getInvoice(this.invoiceRecordId).then(response => {
        console.log("查询申请开票信息详情结果", response);
        this.data = response.data;
        this.orderList = this.data.orderList;
        this.invoiceTitle = response.data.invoiceTitle;
      });
    },
    // 修改开票为已开票
    updateInvoiceStatus() {
      console.log('修改申请开票状态', this.invoiceRecordId);
      const param = {
        id: this.invoiceRecordId,
        status: "1"
      };
      updateInvoice(param).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.dialogVisible = false;
        this.selectInvoiceRecord();
      });
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    }
  }
};
</script>
<style >
.cardStyle{
  margin-bottom: 10px;
}
.marginTop{
  margin-top: 10px;
}
</style>
