<template>
  <a-card class="general-card" style="margin-top: 8px">
    <a-page-header
      :style="{ background: 'var(--color-bg-2)' }"
      :title="detail.outcome?.name"
      @back="redirectOutcomeListPage()"
    >
      <template #subtitle>
        <a-space>
          <span>交付物详情</span>
        </a-space>
      </template>
      <a-row style="padding: 5px 20px" :gutter="[10, 10]">
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              创建人：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.creator_name }}
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              创建日期：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.created_at }}
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              修改日期：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.updated_at }}
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              编号：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.id }}
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              状态：
            </div>
            <div class="editor-descriptions-content">
              <a-tag :color="outcomeStatus(detail.outcome?.status)?.color">{{
                outcomeStatus(detail.outcome?.status)?.label
              }}</a-tag>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              计划交付时间：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.plan_time }}
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              负责人：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.handler_name }}
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              所属项目：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.prj_name }}
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              所属任务：
            </div>
            <div class="editor-descriptions-content">
              {{ detail.outcome?.task_name }}
            </div>
          </div>
        </a-col>
        <a-col v-if="detail.outcome?.uploaded" :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              附件名称：
            </div>
            <div class="editor-descriptions-content">
              <a-space align="center">
                <a-tooltip content="点击下载">
                  <a-typography-text
                    type="primary"
                    style="cursor: pointer"
                    @click="
                      showDownloadModal(
                        detail.outcome?.id,
                        detail.outcome?.name,
                        detail.outcome?.object_name,
                        detail.outcome?.filename
                      )
                    "
                    >{{ detail.outcome?.filename }}</a-typography-text
                  >
                </a-tooltip>
                <a-tooltip content="点击删除">
                  <icon-delete
                    :size="16"
                    style="color: rgb(var(--danger-6)); cursor: pointer"
                    @click="
                      showRemoveModal(detail.outcome?.id, detail.outcome?.name)
                    "
                  />
                </a-tooltip>
              </a-space>
            </div>
          </div>
        </a-col>
        <a-col v-if="detail.outcome?.uploaded" :span="8">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              文件大小：
            </div>
            <div class="editor-descriptions-content">
              <a-typography-text type="primary">
                {{
                  formatBytesOptimized(detail.outcome?.file_size)
                }}</a-typography-text
              >
            </div>
          </div>
        </a-col>
        <!-- <a-col :span="24">
          <div class="editor-descriptions-container">
            <div class="editor-descriptions-label" style="min-width: inherit">
              描述：
            </div>
            <div class="editor-descriptions-content"></div>
          </div>
        </a-col> -->
        <!-- <a-col :span="24">
          <a-textarea
            :default-value="detail.outcome?.description"
            class="c-textarea"
            :auto-size="{
              minRows: 4
            }"
            readonly
            placeholder="备注信息"
            allow-clear
            style="background: revert"
          />
        </a-col> -->
      </a-row>
    </a-page-header>
    <RemoveModal ref="removeModalRef" />
    <DownloadModal ref="downloadModalRef" />
  </a-card>
</template>

<script setup lang="ts">
import { getOutcomeDetail } from '@/api/project/outcome'
import { OutcomeStatusList } from '@/enums/api'
import { useEmitt } from '@/logics/mitt/useEmitt'
import { OutcomeDetailResParams } from '@/types/outcome'
import { onMounted, reactive, ref } from 'vue'
import { formatBytesOptimized } from '@/utils'
import RemoveModal from './remove.vue'
import DownloadModal from './download.vue'

const props = defineProps({
  draft: {
    type: Boolean,
    required: true,
    default: () => {
      return false
    }
  },
  outcomeId: {
    type: String,
    required: true
  }
})

const detail = reactive<{ outcome?: OutcomeDetailResParams }>({
  outcome: undefined
}) // 客户详情

const removeModalRef = ref()
const downloadModalRef = ref()
const { emitter } = useEmitt()

const redirectOutcomeListPage = () => {
  emitter.emit('redirectOutcomeListPage')
}

// 根据交付物状态获取对应样式标签
const outcomeStatus = (status?: number) => {
  return OutcomeStatusList.find(item => item.status === status)
}

const getDetail = async () => {
  detail.outcome = await getOutcomeDetail({
    draft: props.draft,
    outcome_id: props.outcomeId
  })
}

/**
 * 删除文件
 * @param objectName
 * @param name
 */
const showRemoveModal = (objectName?: string, name?: string) => {
  removeModalRef.value?.showRemoveModal(objectName!, name!)
}

// 显示下载交付物
const showDownloadModal = (
  id?: string,
  name?: string,
  objectName?: string,
  filename?: string
) => {
  downloadModalRef.value?.showDownloadModal(id!, name!, objectName!, filename!)
}

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'get-outcome-detail',
  callback: () => {
    getDetail()
  }
})

onMounted(() => {
  getDetail()
})
</script>

<style lang="less" scoped>
:deep(.arco-page-header-content) {
  padding: 0;
}
.arco-textarea-wrapper:focus-within,
.arco-textarea-wrapper.arco-textarea-focus {
  border-color: rgb(var(--primary-6)) !important;
}
.arco-textarea-wrapper,
.arco-textarea-wrapper.arco-textarea-focus {
  border: 1px solid var(--color-fill-4);
}
</style>
