<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <el-dialog
    v-model="operateDialogVisible"
    :close-on-click-modal="false"
    :title="$t('components.offlineManage.ApplyOnline')"
    :lock-scroll="true"
    :destroy-on-close="true"
    width="750px"
    top="4vh"
    class="Mall4j component-offline-manage"
  >
    <div class="off-shelf-mag">
      <div class="msg">
        <div class="msg-item">
          <div class="tit">
            {{ $t('components.offlineManage.handler') }}：
          </div>
          <div class="int">
            {{ offlineDetail.handler }}
          </div>
        </div>
        <div class="msg-item">
          <div class="tit">
            {{ $t('components.offlineManage.offlineTime') }}：
          </div>
          <div class="int">
            {{ offlineDetail.createTime }}
          </div>
        </div>
        <div class="msg-item">
          <div class="tit">
            {{ $t('components.offlineManage.processingStatus') }}：
          </div>
          <el-tag
            v-if="offlineDetail.status === 1"
            type="danger"
          >
            {{ takedown }}
          </el-tag>
          <el-tag
            v-if="offlineDetail.status === 2"
            type="warning"
          >
            {{ $t('components.offlineManage.pendingReview') }}
          </el-tag>
          <el-tag
            v-if="offlineDetail.status === 3"
            type="success"
          >
            {{ $t('components.offlineManage.approved') }}
          </el-tag>
          <el-tag
            v-if="offlineDetail.status === 4"
            type="danger"
          >
            {{ $t('components.offlineManage.AuditFailed') }}
          </el-tag>
        </div>
        <div class="msg-item">
          <div class="tit">
            {{ $t('components.offlineManage.offlineReason') }}：
          </div>
          <div class="int">
            {{ offlineDetail.offlineReason }}
          </div>
        </div>
        <div
          v-if="offlineDetail.status === 1 || offlineDetail.status === 4"
          class="msg-item"
        >
          <div class="tit reason">
            <span class="star">*</span>{{ $t('components.offlineManage.reasonApplication') }}：
          </div>
          <div class="int">
            <el-input
              v-model="reapplyReason"
              maxlength="200"
              type="textarea"
            />
          </div>
        </div>
      </div>
      <div
        v-if="offlineDetail.offlineHandleEventItemList && offlineDetail.offlineHandleEventItemList.length > 0"
        class="log"
      >
        <div class="log-tit">
          {{ $t('components.offlineManage.applicationHistory') }}
        </div>
        <div
          v-for="(item,index) in offlineDetail.offlineHandleEventItemList"
          :key="index"
          class="log-item"
        >
          <p>{{ $t('components.offlineManage.applicationTime') }}：{{ item.createTime }}</p>
          <div class="ints">
            <div class="ints-tit">
              {{ $t('components.offlineManage.reasonApplication') }}：
            </div>
            <div class="ints-content">
              {{ item.reapplyReason }}
            </div>
          </div>
          <p v-if="item.auditTime">
            {{ $t('components.offlineManage.AuditTime') }}：{{ item.auditTime }}
          </p>
          <div
            v-if="item.refuseReason"
            class="ints"
          >
            <div class="ints-tit">
              {{ $t('components.offlineManage.reasonRejection') }}：
            </div>
            <div class="ints-content">
              {{ item.refuseReason }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          plain
          @click="operateDialogVisible = false"
        >
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          v-if="offlineDetail.status === 1 || offlineDetail.status === 4"
          type="primary"
          @click="rereapplyDataSubmit()"
        >
          {{ $t('components.offlineManage.submitApplication') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const emit = defineEmits(['rereapplyDataSubmit'])

const operateDialogVisible = ref(false) // 操作对话框
const offlineDetail = ref({}) // 最新下线商品
const reapplyReason = ref('') // 申请理由
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  takedown: {
    type: String,
    default: () => {
      return '平台下架'
    }
  }
})

const init = (data) => {
  operateDialogVisible.value = true
  offlineDetail.value = data
}

/**
 * 提交上架申请
 */
const rereapplyDataSubmit = () => {
  if (!reapplyReason.value || !reapplyReason.value.trim()) {
    ElMessage({
      message: $t('components.offlineManage.applicationReasonTips'),
      type: 'warning',
      duration: 1000
    })
    return
  }
  const data = {
    eventId: offlineDetail.value.eventId,
    reapplyReason: reapplyReason.value
  }
  emit('rereapplyDataSubmit', data)
}

defineExpose({
  init
})

</script>

<style lang="scss" scoped>
@use "index";
</style>
