<template>
  <el-dialog title="招投标记录详情" :visible.sync="visibleProxy" width="1100px" append-to-body>
    <div class="detail-container">
      <el-divider content-position="left">基本信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="采购事项ID">{{ detail.purchaseId || "-" }}</el-descriptions-item>
        <el-descriptions-item label="采购类别">{{ detail.purchaseCategory || "-" }}</el-descriptions-item>
        <el-descriptions-item label="项目名称" :span="2">{{ detail.projectName || "-" }}</el-descriptions-item>
        <el-descriptions-item label="标的物名称">{{ detail.subjectName || "-" }}</el-descriptions-item>
        <el-descriptions-item label="采购方式">{{ detail.purchaseMethod || "-" }}</el-descriptions-item>
        <el-descriptions-item label="标的物描述" :span="2">{{ detail.subjectDesc || "-" }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">数量与金额</el-divider>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="采购数量">{{ detail.purchaseQty || "-" }}</el-descriptions-item>
        <el-descriptions-item label="预算金额(元)">{{ detail.budgetAmount || "-" }}</el-descriptions-item>
        <el-descriptions-item label="中标金额(元)">{{ detail.bidAmount || "-" }}</el-descriptions-item>
        <el-descriptions-item label="实际采购金额(元)">{{ detail.actualAmount || "-" }}</el-descriptions-item>
        <el-descriptions-item label="合同金额(元)">{{ detail.contractAmount || "-" }}</el-descriptions-item>
        <el-descriptions-item label="结算金额(元)">{{ detail.settlementAmount || "-" }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">供应商明细</el-divider>
      <el-empty
        v-if="!supplierList.length"
        :image-size="72"
        description="未录入供应商信息"
      />
      <el-table v-else :data="supplierList" border size="small">
        <el-table-column label="排序" prop="sortOrder" width="90" align="center" />
        <el-table-column label="中标结果" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isBidWinner === 1 ? 'danger' : 'info'" size="mini">
              {{ scope.row.isBidWinner === 1 ? "中标" : "参标" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="供应商名称" prop="supplierName" min-width="220" :show-overflow-tooltip="true" />
        <el-table-column label="统一信用代码" prop="supplierUscc" min-width="180" :show-overflow-tooltip="true" />
        <el-table-column label="供应商联系人" prop="contactPerson" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="供应商联系电话" prop="contactPhone" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="供应商银行账户" prop="supplierBankAccount" min-width="180" :show-overflow-tooltip="true" />
      </el-table>

      <el-divider content-position="left">日期信息</el-divider>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="采购申请日期">{{ detail.applyDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="计划批准日期">{{ detail.planApproveDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="公告发布日期">{{ detail.announceDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="开标日期">{{ detail.bidOpenDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="合同签订日期">{{ detail.contractSignDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="预计交货日期">{{ detail.expectedDeliveryDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="实际交货日期">{{ detail.actualDeliveryDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="验收日期">{{ detail.acceptanceDate || "-" }}</el-descriptions-item>
        <el-descriptions-item label="结算日期">{{ detail.settlementDate || "-" }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">申请人信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="申请人姓名">{{ detail.applicantName || "-" }}</el-descriptions-item>
        <el-descriptions-item label="申请人工号">{{ detail.applicantId || "-" }}</el-descriptions-item>
        <el-descriptions-item label="申请部门" :span="2">{{ detail.applyDepartment || "-" }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">采购负责人信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="采购负责人姓名">{{ detail.purchaseLeaderName || "-" }}</el-descriptions-item>
        <el-descriptions-item label="采购负责人工号">{{ detail.purchaseLeaderId || "-" }}</el-descriptions-item>
        <el-descriptions-item label="采购部门" :span="2">{{ detail.purchaseDepartment || "-" }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">审计信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="创建人">{{ detail.createdBy || "-" }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.createTime || "-" }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{ detail.updatedBy || "-" }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ detail.updateTime || "-" }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visibleProxy = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ExtendedPurchaseDetailDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    visibleProxy: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    },
    supplierList() {
      return Array.isArray(this.detail && this.detail.supplierList) ? this.detail.supplierList : [];
    }
  }
};
</script>
