<!--
  @description: 验收情况-验收结果弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2021-2-26-13:26
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="acceptanceResultVisibleDialog"
    :close-on-click-modal="false"
    title="验收结果"
    width="940px"
    append-to-body
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <el-table ref="smallTable" v-loading="loading" :data="tableData">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      />
      <el-table-column
        prop="zyszb"
        label="验收指标编号"
        header-align="center"
        align="center"
        min-width="100"
      />
      <el-table-column
        prop="zyszbms"
        label="验收指标描述"
        header-align="center"
        min-width="150"
      />
      <el-table-column
        prop="zfzr"
        label="负责人帐号"
        header-align="center"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="zgwbh"
        label="岗位编号"
        header-align="center"
        min-width="150"
        align="center"
      />
      <el-table-column
        prop="zysjg"
        label="验收结果"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="zysjgms"
        label="验收结果描述"
        header-align="center"
        min-width="150"
      />
      <el-table-column
        prop="zzdyc"
        label="重大异常"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="zbz1"
        label="指标细分"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="zbz2"
        label="备注"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="zchangeddate"
        label="修改日期"
        header-align="center"
        align="center"
        min-width="150"
      >
        <template slot-scope="scope">
          {{ scope.row.zchangeddate && $Moment(scope.row.zchangeddate).format(momentDate) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="zchangedby"
        label="修改人"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="zdlby"
        label="结果录入人"
        header-align="center"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="zdldate"
        label="录入日期"
        header-align="center"
        align="center"
        width="140"
      >
        <template slot-scope="scope">
          {{ scope.row.zdldate && $Moment(scope.row.zdldate).format(momentDate) }}
        </template>
      </el-table-column>
    </el-table>
    <pagination :pagination-data="paginationData" @change="getSapAcceptanceCertificateResultList" />
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button @click="acceptanceResultVisibleDialog = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* api*/
import { sapAcceptanceCertificateResultList } from '@api/procurement/purchasplan'
import pagination from '@comp/common/pagination/pagination' // 分页组件
import { ListMixin } from '@/mixins/ListMixin' // 分页
export default {
  name: 'AcceptanceSituationinvoiceInfoDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: true,
      acceptanceResultVisibleDialog: false,
      tableData: [],
      sapAcceptanceCertificate: {} // 验收情况行信息
    }
  },
  methods: {
    // 打开弹框查看详情
    acceptanceResultDetail(row) {
      this.sapAcceptanceCertificate = row
      this.getSapAcceptanceCertificateResultList()
      this.acceptanceResultVisibleDialog = true
    },
    // Sap验收单结果信息列表
    getSapAcceptanceCertificateResultList() {
      const params = {
        ...this.paginationData,
        zysbh: this.sapAcceptanceCertificate.zysbh, // 验收任务编号
        zysh: this.sapAcceptanceCertificate.zysh // 验收行
      }
      sapAcceptanceCertificateResultList(params).then(res => {
        const { data: { records, total }} = res
        this.tableData = records
        this.paginationData.total = total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
