<template>
    <show-data-table
      style="margin-bottom:10px"
      :newTime="newTime"
      :sitem="demandInfo"
      :columns="demandDetailColumns"
    >
      <template #currentStatus>
        <el-tag size="mini" style="margin-left:5px">
          {{(demandStatusOptions.find(({value}) => value === String(demandInfo.status)) || {}).label || '--'}}
        </el-tag>
      </template>

      <template #prepaymentType>
        <p style="margin-left:5px">
          {{demandInfo.prepay_type}}
        </p>
      </template>
    </show-data-table>
</template>

<script>
import { demandStatusOptions } from '@/assets/js/statusList'
import demandRequest from "@/apis/service/customerService/demandOrder";
export default {
  props: ['id'],
  name:'DemandDetail',
  data(){
    return {
      loading:false,
      demandInfo:{},
      demandStatusOptions,
      demandDetailColumns:[
        {
          prop:'reqCode',
          label:"需求订单编号",
          span:8
        },
        {
          prop:'req_user_name',
          label:'创建人',
          span:8
        },
        {
          prop:'create_time',
          label:'创建时间',
          span:8
        },
        {
          prop:'shortname',
          label:'活动城市',
          span:8
        },
        {
          prop:'require_item',
          label:'活动需求',
          span:8
        },
        {
          prop:'act_time',
          label:'活动时间',
          span:8
        },  
        {
          prop:'participant',
          label:'活动人数',
          span:8
        },
        {
          prop:'req_demand',
          label:'项目需求',
          span:8
        },
        {
          prop:'req_endtime',
          label:'招标截止时间',
          span:8
        },
        {
          prop: 'companyName',
          label: '需求公司',
          span:8
        },
        {
          prop:'flow_stage',
          label:'当前阶段',
          span:8
        },
        {
          prop:'supplierName',
          label:'活动执行供应商',
          span:8
        },
        {
          prop:'budget',
          label:'需求预算',
          span:8
        },
        {
          prop:'TODO',
          label:'预付类型',
          span:8,
          _slot_:'prepaymentType'
        },
        {
          label:'预付金额',
          span:8,
          _slot_:'prepaymentAmount'
        },
        {
          prop:'ainv_fee',
          label:'已开票金额',
          span:6
        },
        {
          prop:'winv_fee',
          label:'未开票金额',
          span:6
        },
        {
          prop:'apay_amount',
          label:'已付款金额',
          span:6
        },
        {
          prop:'wpay_amount',
          label:'未付款金额',
          span:6
        },
        {
          prop:'settle_amount',
          label:'活动结算金额',
          span:6
        },
        {
          label:'当前状态',
          span:18,
          _slot_:'currentStatus'
        }
      ]
    }
  },
  watch:{
    id:{
      handler(id){
        if(!id) return
        this.getDemandDetail(id)
      },
      immediate:true
    }
  },
  methods:{
    async getDemandDetail(id){
      this.loading = true
      const { data, code } = await demandRequest.detail({ id })
      this.loading = false
      if(code !== 1) return
      this.demandInfo = data
    }
  }
}
</script>
