<template>
 <show-data-table
      style="padding: -5px 0 10px 0"
      v-if="newTime !== ''"
      :newTime="newTime"
      :sitem="demandInfo"
      :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(demandInfo.prepay_type)) || {}).label || '暂无预付'}}
          </el-tag>

          <div v-if="demandInfo.prepay_image" style="display:flex;margin-right:5px">
            <div v-viewer v-for="image in demandInfo.prepay_image.split(',')" :key="image" style="height:20px;width:20px;cursor:pointer">
              <img style="width:100%;height:100%" :src="image" />
            </div>
          </div>
        </div>
      </template>

      <template #act_time>
        {{getActTime()}} , 共{{demandInfo.act_day_count}}天
      </template>

      <template #prepaymentAmount>
        <div class="flex-between align-center" style="height:18px;padding-top:5px">
          <p style="margin-left:5px">{{demandInfo.prepay_amount}}</p>
        </div>
      </template>

      <template #participant>
        <span v-if="Number(demandInfo.participant_max) === 0">{{ demandInfo.participant_min }}+</span>
        <span v-else>{{demandInfo.participant_min}} ~ {{demandInfo.participant_max}}</span>人
      </template>

      <template #req_demand_name>
        <el-tooltip v-if="demandInfo.req_demand_name" placement="top" :content="'项目需求 : ' + demandInfo.req_demand_name.map(({name}) => name).join('+')">
          <i class="text">
             {{ demandInfo.req_demand_name.map(({name}) => name).join(" + ") }}
          </i>
        </el-tooltip>
      </template>

      <template #currentStatus>
        <div class="align-center" style="height:18px; padding-top:5px">
          <el-tag size="mini" style="margin-left:5px">{{demandInfo.flow_stage}}:{{
            (demandStatusOptions.find(({value}) => value === String(demandInfo.status)) || {}).label || '--'
            }}
          </el-tag>
        </div>
      </template>

      <template #pz>
        <div v-if="demandInfo.ReqProof_customer" style="display:flex;margin-right:5px">
          <div v-viewer v-for="image in demandInfo.ReqProof_customer.filter(({user_type, status}) => user_type === 1 && status === 1)" 
            :key="image.proof_url" 
            style="height:20px;width:20px;cursor:pointer;margin-left:5px"
          >
            <img style="width:100%;height:100%" :src="image.proof_url" />
          </div>
        </div>
      </template>
    </show-data-table>
</template>

<script>
import { demandStatusOptions } from '@/assets/js/statusList'
import demandRequest from "@/apis/service/customerService/demandOrder";
import { prepaymentTypeOptions } from '../../../views/customerService/demandOrder/columns';
import dayjs from 'dayjs';

export default {
  props: ['id'],
  name:'DemandDetail',
  data(){
    return {
      prepaymentTypeOptions,
      loading:false,
      demandInfo:{},
      demandStatusOptions,
      demandDetailColumns:[
        {
          prop:'reqCode',
          label:"需求订单编号",
          span:8
        },
        {
          label:'当前状态',
          span:16,
          _slot_:'currentStatus'
        },
        {
          prop:'require_item_name',
          label:'活动类型',
          span:8
        },
        {
          prop:'req_demand',
          label:'项目需求',
          span:16,
          _slot_:'req_demand_name'
        },
        {
          prop:'shortname',
          label:'意向位置',
          span:8
        },
        {
          prop:'act_time',
          label:'活动时间',
          span:8,
          _slot_:'act_time'
        },  
        {
          prop:'participant',
          label:'活动人数',
          span:8,
          _slot_: 'participant'
        },
        {
          prop:'budget_name',
          label:'活动预算',
          span:8
        },
        {
          prop:'req_tel',
          label:'联系电话',
          span:8
        },
        {
          prop:'create_time',
          label:'创建时间',
          span:8
        },
        {
          prop:'settle_amount',
          label:'订单结算金额',
          span:8
        },
        {
          prop:'TODO',
          label:'预付类型',
          span:8,
          _slot_:'prepaymentType'
        },
        {
          label:'预付金额',
          span:8,
          _slot_:'prepaymentAmount'
        },
        {
          prop: 'companyName',
          label: '客户名称',
          span:8
        },
        {
          prop:'ainv_fee',
          label:'已回票金额',
          span:8
        },
        {
          prop:'winv_fee',
          label:'未回票金额',
          span:8
        },
        {
          props:'store_name',
          label:'店铺名称',
          span:8
        },
        {
          prop:'apay_amount',
          label:'已付款金额',
          span:8
        },
        {
          prop:'wpay_amount',
          label:'未付款金额',
          span:8
        },
        {
          label:'凭证图片',
          _slot_:'pz',
          span:24
        }
      ]
    }
  },
  watch:{
    id:{
      handler(id){
        if(!id) return
        this.getDemandDetail(id)
      },
      immediate:true
    }
  },
  methods:{
    getActTime(){
      const { act_time, act_day_count } = this.demandInfo;
      const end_time = dayjs(act_time).subtract(Number(act_day_count) - Number(act_day_count) * 2,'day').format('MM.DD')
      return `${dayjs(act_time).format('MM.DD')} ~ ${end_time}`
    },
    async getDemandDetail(id){
      this.loading = true
      const { data, code } = await demandRequest.detail({ id })
      console.log(data)
      this.loading = false
      if(code !== 1) return
      this.demandInfo = data
    }
  }
}
</script>
