<template>
  <div class="pd20">
    <div v-for="b in list" class="item">
      <div class="title">
        <label class="orangeTag"> {{ b.applicatTypeName }} </label>
        <span>{{ language == 0 ? '订单编号：' : 'No.' }} {{ b.id }}</span>
      </div>

      <div class="status-po">
        <span v-if="b.status == '0'" class="bg-gary">{{ 'Under Review' }}</span>
        <span v-if="b.status == '1'" class="bg-blue">{{ 'Approved' }}</span>
        <span v-if="b.status == '2'" class="bg-danger">{{ 'Rejected' }}</span>
      </div>

      <el-row align="middle" class="pd20 mt10" justify="space-between">
        <el-col :lg="8" :md="12" :sm="12" :xs="24">
          <div>
            <p class="text-warning" style="margin: -10px 0 8px"> {{ b.invitationTypeName }} </p>
            <h3 class="name">{{ b.fullName }}</h3>
            <p>{{ b.email }}</p>
            <p>{{ b.createTime }}</p>
          </div>
        </el-col>
        <el-col :lg="8" :md="12" :sm="12" :xs="24">
          <span class="text-danger" v-if="b.status == '2'">Reason for rejection: {{ b.remarks2 }} </span>
          <br/>
          <el-button  style="margin-top: 10px" v-if="b.status == '2' &&!min" class="mb10" plain round size="small" type="warning" @click="handleReVisa(b)">
            {{ language == 0 ? '重新提交' : 'Resubmit' }}
          </el-button>
        </el-col>
        <el-col :lg="8" :md="24" :sm="24" :xs="24">
          <div class="text-right">
            <el-button class="mb10" :disabled="b.emailFlag!='1'" plain round size="small" type="primary"
                       @click="handleDownload(b)">
              {{ language == 0 ? '下载邀请函' : 'Download Invitation' }}
            </el-button>
            <el-button class="mb10" plain round size="small" type="primary" @click="goDetail(b)">
              {{ language == 0 ? '详情' : 'Detail' }}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <affix-invitation-view ref="affixInvitationRef"></affix-invitation-view>
    <affix-invitation ref="dialogInvitationRef" @refresh="refresh"/>
  </div>
</template>

<script setup >
import {getUplaodFile} from "/src/apiPc/match";
import {fillImgUrl} from "/src/utils/ruoyi";
import AffixInvitationView from "/src/viewsPc/match/components/affix-invitation-view.vue";
import {ref} from "vue";
import {useStorage} from "@vueuse/core";
import AffixInvitation from "/@/viewsPc/match/components/affix-invitation.vue";

const emit = defineEmits(['refresh'])
const language = useStorage('language', 0)
const affixInvitationRef = ref(null)
const dialogInvitationRef = ref(null)

defineProps({
  list: {
    type: Array,
    default: () => []
  },
  min: {
    type: Boolean,
    default: false
  },
})

function goDetail(b) {
  affixInvitationRef.value.open(b)
}

function handleDownload(b) {
  getUplaodFile({id: b.id}).then(res => {
    window.open(fillImgUrl(res.msg), '_blank')
  })
}

function handleReVisa(b) {
  dialogInvitationRef.value.reOpen(b.id)
}

function refresh(){
  emit('refresh')
}

</script>

<style scoped lang="scss">
.bigMoney {
  font-size: 24px;
  font-family: "DIN Alternate";
}

.name {
  font-size: 18px;
  margin: 0;
}

.status-po {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  color: #FFFFFF;

  span {
    border-radius: 0px 10px 0px 10px;
    padding: 4px 10px;
  }

  .bg-danger {
    background: #E60012;
  }

  .bg-warning {
    background: #e89f39;
  }

  .bg-pink {
    background: #F740A6;
  }

  .bg-primary {
    background: var(--el-color-primary)
  }

  .bg-blue {
    background: #00a0e9
  }
}

.indexTitle {
  margin: 20px 0 12px;
  overflow: visible;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;

  .fr {
    margin: -8px 0 0
  }

  h3 {
    display: inline-block;
    font-size: 16px;
    color: var(--el-color-primary);
  }
}

.item {
  .name {
    font-size: 18px;
    color: #000000;
    margin: 0 0 10px;
  }

  p {
    margin: 8px 0 0;
    color: #707070;
    font-size: 14px;
  }

  margin: 0 0 20px;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  position: relative;

  .bbody {
    padding: 0 15px 20px;
  }

  .title {
    background: #F7F7F7;
    border-bottom: 1px solid #E5E5E5;

    span {
      font-size: 14px;
      color: #4C5359;
    }
  }

  .title label {
    border-radius: 5px 0 5px 0;
    font-size: 12px;
    color: #fff;
    padding: 4px 10px;
    margin-right: 10px;
  }

  .blueTag {
    background-color: #1EC886;
  }

  .purpleTag {
    background-color: #717bef;
  }

  .orangeTag {
    background-color: #ff8124;
  }
}

.billFoot {
  .price {
    width: 100%;
    justify-content: space-between;
  }
}

.billFoot .tip {
  font-size: 24px;
  color: #999;
  font-weight: 500;
  margin: 0 20px;
}

.status {
  position: absolute;
  right: 10px;
  bottom: 60px;
  white-space: nowrap;

  .warning {
    color: #ff8124;
  }

  .danger {
    color: #da2a2a;
  }

  .gary {
    color: #666;
  }

  .success {
    color: #1EC886;
  }
}
</style>