<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>

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

          <el-button 
             v-if="
              (Number(sitem.status) >= 6) 
              && sitem.prepay_type !== 1 
              && sitem.prepay_type !== 2"
            style="margin-right:5px;line-height:8px" 
            type="primary" 
            size="mini" 
            @click="requsetModalVisible = true"
          >申请预付</el-button>
        </div>
      </template>

      <template #act_time>
        {{actTime}} , 共{{sitem.act_day_count}}天
      </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) 
              && !sitem.prepay_image 
              && Number(sitem.prepay_amount) === 0"
            style="margin-right:5px;line-height:8px" 
            type="primary" size="mini" @click="uploadModalVisible = true"
          >上传预付付款凭证</el-button>
        </div>
      </template>

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

      <template #pz>
        <div v-if="sitem.ReqProof_customer" style="display:flex;margin-right:5px">
          <div v-viewer v-for="image in sitem.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>

      <template #req_demand_name>
        <el-tooltip placement="top" :content="'项目需求 : ' + sitem.req_demand_name.map(({name}) => name).join('+')">
          <i class="text">
             {{ sitem.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">{{sitem.flow_stage}}:{{
            (demandStatusOptions.find(({value}) => value === String(sitem.status)) || {}).label || '--'}}
          </el-tag>

          <component :is="
            (Number(sitem.status) >= 2 && Number(sitem.status) <= 5) &&
            (Number(sitem.status) >= 1 && Number(sitem.status) <= 3) 
            ? 'el-button-group' 
            :'div'
          ">
            <el-button
             icon="el-icon-arrow-left"
             style="margin-left:10px"
             plain
             v-if="Number(sitem.status) >= 2 && Number(sitem.status) <= 5"
             type="primary" 
             size="mini"
            @click="handleSwitchNode('prev')">
             上一节点
            </el-button>
            <el-button 
              plain
              v-if="Number(sitem.status) >= 1 && Number(sitem.status) <= 3"
              type="primary" 
              size="mini" 
              @click="handleSwitchNode('next')">
              下一节点
              <i class="el-icon-arrow-right"></i>
             </el-button>
          </component>

          <!-- <el-button-group> -->
          <!-- </el-button-group>   -->
        </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'
import dayjs from "dayjs"

export default {
  name:'demandDetail',
  components:{ RequestPerpaymentModal, UploadCerfificateModal },
  props:{
    data:{
      type:Object,
      default:() => ({})
    },
    sitem:{
      type:Object,
      default:() => ({})
    }
  },
  computed:{
    actTime(){
      const { act_time, act_day_count } = this.sitem;
      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}`
    }
  },
  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>

<style scoped>
.text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
