<template>
  <div> 
    <show-data-table
      style="padding: -5px 0 10px 0"
      v-if="newTime !== ''"
      :newTime="newTime"
      :sitem="sitem"
      :columns="demandDetailColumns"
    >
      <template #prepaymentType>
        <div class="flex-between align-center" style="height:18px;padding-top:5px">
        <el-tag size="mini" style="margin-left:5px">{{
            (prepaymentTypeOptions.find(({value}) => value === String(sitem.prepay_type)) || {}).label || '--'
            }}</el-tag>
          <el-button 
             v-if="Number(sitem.status) === 6"
            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">{{sitem.prepay_amount}}</p>
          <el-button 
            v-if="Number(sitem.status) === 6"
            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">
          <el-tag size="mini" style="margin-left:5px">{{
            (demandStatusOptions.find(({value}) => value === String(sitem.status)) || {}).label || '--'
            }}</el-tag>
          <el-button 
            v-if="Number(sitem.status) >= 2 && Number(sitem.status) <= 5"
            style="margin-left:5px;line-height:8px" type="primary" size="mini"
             @click="handleSwitchNode('prev')">
             切换到上一节点
          </el-button>

          <el-button 
            v-if="Number(sitem.status) >= 1 && Number(sitem.status) <= 3"
            style="margin-left:5px;line-height:8px" 
            type="primary" size="mini" @click="handleSwitchNode('next')">
            切换到下一节点
          </el-button>
        </div>
      </template>
    </show-data-table>

    <request-perpayment-modal :sitem="sitem" :visible.sync="requsetModalVisible" @refresh="$emit('refresh')" />
    <upload-cerfificate-modal :sitem="sitem" :visible.sync="uploadModalVisible"  @refresh="$emit('refresh')" />
  </div>
</template>

<script>
import { demandDetailColumns, prepaymentTypeOptions } from "../../columns"
import RequestPerpaymentModal from "./requsetPerpaymentModal.vue"
import UploadCerfificateModal from "./uploadCertificateModal.vue"
import { demandStatusOptions } from '@/assets/js/statusList'

export default {
  name:'demandDetail',
  components:{ RequestPerpaymentModal, UploadCerfificateModal },
  props:{
    data:{
      type:Object,
      default:() => ({})
    },
    sitem:{
      type:Object,
      default:() => ({})
    }
  },
  watch:{
    data:{
      handler(){
        this.newTime = new Date().valueOf()
      },
      deep:true,
      immediate:true
    },
  },
  data(){
    return {
      demandStatusOptions,
      prepaymentTypeOptions,
      requsetModalVisible: false, //申请预付模态框
      uploadModalVisible: false, // 上传预付凭证模态框
      demandDetailColumns,
      newTime: ""
    }
  },
  methods:{
    handleSwitchNode(mode){
      this.$emit('switchNode', mode)
    }
  }
}
</script>
