<template>
  <basic-container>
    <Card class="cardTitle">
      <el-button type="primary" @click="backPage" style="width: 80px;"
        >返回</el-button
      >
    </Card>
    <div class="form">
      <div class="audit-title">
        开票审核
      </div>
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="开票主体">
              <el-input v-model="form.deptName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请企业">
              <el-input v-model="form.deptName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开票金额">
              <el-input v-model="form.invoiceAmount" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态">
              <el-input v-model="form.approvalStatusStr" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票类型">
              <el-input v-model="form.invoiceTypeStr" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮寄地址">
              <el-input v-model="form.address" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收件人姓名">
              <el-input v-model="form.addresseeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件人手机">
              <el-input v-model="form.addresseePhone" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button
            :disabled="form.approvalStatus !== 'PENDING' || type === 'disabled'"
            @click="submit('REJECTED')"
            >驳回</el-button
          >
          <el-button
            :disabled="form.approvalStatus !== 'PENDING' || type === 'disabled'"
            type="primary"
            @click="submit('PASSED')"
            >开票</el-button
          >
        </el-row>
      </el-form>
    </div>
    <div class="tab">
      <div class="audit-title">
        关联积分包
      </div>
      <div class="info">
        <span>积分包：{{ form.relationPackageNumber }}</span>
        <span>总积分值：{{ form.relationPackageScore }}</span>
      </div>
      <avue-crud
        :data="tableData"
        :option="auditOption"
        :page.sync="page"
        :table-loading="tableLoading"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </avue-crud>
    </div>
  </basic-container>
</template>

<script>
import {
  invoiceDetail,
  invoicePage,
  toApprove
} from "@/api/account/invoice/audit.js";
import { auditOption } from "@/const/crud/account/invioce/audit.js";
export default {
  data() {
    return {
      id: "",
      form: {},
      tableData: [],
      type: "",
      auditOption,
      page: {
        total: 0, // 总页数
        pageSize: 10,
        pagerCount: 0
      },
      tableLoading: false
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.getDetail();
  },
  methods: {
    backPage() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
    async getDetail() {
      let res = await invoiceDetail(this.id);
      console.log("res", res.data.data);
      this.form = res.data.data;
    },
    async getList(page, params) {
      this.tableLoading = true;
      let data = Object.assign(
        {
          current: page.currentPage,
          size: page.pageSize,
          invoiceId: this.id
        },
        params,
        this.searchForm
      );
      let res = await invoicePage(data);
      if (res.data.code === 0) {
        this.tableData = res.data.data.records;
        this.page.total = res.data.data.total;
      }
      this.tableLoading = false;
    },
    // 分页查询
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    async submit(type) {
      let obj = {
        invoiceId: this.id,
        approvalStatus: type
      };
      const res = await toApprove(obj);
      if (res.data.code === 0) {
        this.getDetail();
        this.getList(this.page);
        this.$message.success("操作成功！");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.audit-title {
  margin: 10px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
::v-deep .el-input {
  width: 80%;
}
.tab {
  margin-top: 30px;
}
.info {
  margin-bottom: 20px;
  span {
    margin-right: 30px;
  }
}
</style>
