<template>
  <div>
    <show-data-table
      style="padding: -5px 0 10px 0"
      v-if="newTime !== ''"
      :newTime="newTime"
      :sitem="data"
      :columns="demandDetailColumns" 
    >
      <template #prepaymentType>
        <div class="flex-between align-center" style="height:18px;padding-top:5px">
          <p style="margin-left:5px">未设置</p>
          <el-button style="margin-right:5px;line-height:8px" type="primary" size="mini" @click="requsetModalVisible = true">申请预付</el-button>
        </div>
      </template>

      <template #prepaymentAmount>
        <div class="flex-between align-center" style="height:18px;padding-top:5px">
          <p style="margin-left:5px">0</p>
          <el-button style="margin-right:5px;line-height:8px" type="primary" size="mini" @click="uploadModalVisible = true">上传预付付款凭证</el-button>
        </div>
      </template>

      <template #currentStatus>
        <div class="align-center" style="height:18px;padding-top:5px">
          <p style="margin-left:5px">待供应商反馈评估预算函</p>
          <el-button style="margin-left:5px;line-height:8px" type="primary" size="mini">切换到上一节点</el-button>
          <el-button style="margin-right:5px;line-height:8px" type="primary" size="mini">切换到下一节点</el-button>
        </div>
      </template>
    </show-data-table>

    <request-perpayment-modal :visible.sync="requsetModalVisible" />
    <upload-cerfificate-modal :visible.sync="uploadModalVisible" />
  </div>
</template>

<script>
import { demandDetailColumns } from "./../../columns"
import RequestPerpaymentModal from "./requsetPerpaymentModal.vue"
import UploadCerfificateModal from "./uploadCertificateModal.vue"
export default {
  name:'demandDetail',
  components:{
    RequestPerpaymentModal,
    UploadCerfificateModal
  },
  props:{
    data:{
      type:Object,
      default:() => ({})
    }
  },
  watch:{
    data:{
      handler(){
        this.newTime = new Date().valueOf()
      },
      deep:true,
      immediate:true
    }
  },
  data(){
    return {
      requsetModalVisible:false, //申请预付模态框
      uploadModalVisible:false, // 上传预付凭证模态框
      demandDetailColumns,
      newTime:""
    }
  }
}
</script>
