<template>
  <div style="padding-bottom: 24px">
    <p
      class="el-icon-arrow-right"
      style="
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 15px;
        padding-left: 28px;
      "
    >
      单据信息
    </p>
    <el-table :data="received_list">
      <el-table-column
        prop="no"
        label="应收单编号"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="customerName"
        label="客户名称"
        show-overflow-tooltip
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="financeType"
        label="应收类型"
        min-width="120"
      ></el-table-column>
      <el-table-column prop="receiveMoney" label="实际应收金额" min-width="150">
        <template slot-scope="scope">
          {{ $_common.formattedNumber(scope.row.receiveMoney) }}
        </template>
      </el-table-column>
      <el-table-column prop="receiptTypeId" label="单据类型" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.receiptTypeId === 1 ? "销售订单" : "销售退货单" }}
        </template>
      </el-table-column>
      <el-table-column prop="auditStatus" label="状态" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus === 1" class="warning-status">
            待审核
          </span>
          <span v-else-if="scope.row.auditStatus === 2" class="success-status">
            已审核
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="160">
        <template slot-scope="scope">
          {{ $_common.formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="$accessCheck($Access.ReceivableListUpdateReceiveStatus)"
        label="操作"
        fixed="right"
        min-width="80"
      >
        <template slot-scope="scope">
          <el-button
            :disabled="parseInt(scope.row.auditStatus) === 2"
            type="text"
            @click="updateReceivableAuditStatus(scope.row)"
          >
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getReceivedByOrder, updateReceiveStatus } from "@/api/Finance";
  export default {
    name: "ReceiveDetail",
    props: {
      orderNo: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        received_list: [],
      };
    },
    created() {
      this.getReceivedByOrder();
    },
    methods: {
      // 根据订单no查询应收单
      async getReceivedByOrder() {
        const data = await getReceivedByOrder({
          sourceNo: this.orderNo,
        });

        if (data.data.id) {
          this.received_list = [data.data];
        }
      },
      //  审核
      async updateReceivableAuditStatus(row) {
        this.$confirm("确定要审核此应收单据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await updateReceiveStatus({
            id: row.id,
            createTime: row.createTime,
          });

          this.getReceivedByOrder();
          this.$message({
            type: "success",
            message: "审核成功",
          });
          this.$emit("auditSuccess");
        });
      },
    },
  };
</script>

<style scoped></style>
