<template>
  <HeadPanl v-bind="({class: 'project-detail-header'} as any)">
    <div class="meta">
      <div class="header">
        <h3>{{ project?.projectName }}</h3>
        <div
          v-if="project?.projectStatus === ProjectStatus.undone"
          class="actions"
        >
          <a-button @click="updateProject">{{
            $t('project.updateTitle')
          }}</a-button>
          <a-button @click="deleteProject">{{
            $t('project.delTitle')
          }}</a-button>
          <a-button type="primary" @click="finishProject">
            {{ $t('project.finshTitle') }}
          </a-button>
        </div>
      </div>
      <div class="body">
        <div class="info">
          <div class="meta">
            <p>
              <span>{{ $t('project.projectCreaterLabel') }}</span
              >{{ project?.projectCreater }}
            </p>
            <p>
              <span>{{ $t('project.createTimeLabel') }}</span
              >{{ project?.createTime }}
            </p>
            <p>
              <span>{{ $t('project.updateTimeLabel') }}</span
              >{{ project?.updateTime }}
            </p>
          </div>
          <p class="desc">{{ project?.projectMsg }}</p>
        </div>
      </div>

      <a-tabs :active-key="activeTabName" @change="changeTab">
        <a-tab-pane
          v-for="option in tabOptions"
          :key="option.key"
          :tab="option.label"
        />
      </a-tabs>
    </div>
  </HeadPanl>

  <BodyPanl>
    <RouterView v-slot="{ Component }">
      <KeepAlive>
        <component :is="Component" />
      </KeepAlive>
    </RouterView>
  </BodyPanl>
</template>

<script setup lang="ts">
import EditProject from './edit.vue'
import { Modal } from 'ant-design-vue'
import { HeadPanl, BodyPanl } from '@/layout/panl'
import { router, RoutesName, routesMetas } from '@/router'
import { computed, onActivated, onDeactivated, ref, toRef, watch } from 'vue'
import { useProject, ProjectStatus } from '@/store'
import { useRealtime } from '@/hook'
import { renderModal } from '@/helper'
import { uploadFile } from '@/api'
import { ui18n } from '@/lang'

const allOptions = [
  // RoutesName.projectMaterial,
  RoutesName.projectScenes,
  RoutesName.projectTaggings,
  RoutesName.projectMembers,
  RoutesName.projectRoles
].map(name => ({
  key: name,
  label: routesMetas[name].title
}))

const tabOptions = ref(allOptions)

watch(
  () => useProject().roleMenus,
  enables => {
    tabOptions.value = allOptions.filter(option => enables.includes(option.key))
  },
  { immediate: true }
)

const activeTabName = computed(
  () => router.currentRoute.value.name as RoutesName
)
const changeTab = (name: any) => {
  router.replace({ name, params: router.currentRoute.value.params })
}

const projectStore = useProject()
const project = toRef(projectStore.$state, 'current')

useRealtime(() => {
  const id = Number(router.currentRoute.value.params.id)
  const back = () => router.back()
  if (!id || id < 0) {
    // back()
    throw ui18n.t('sys.404')
  }
  return projectStore.setCurrent(id)
})

watch(
  () => router.currentRoute.value.params,
  params => {
    if (params.id) {
      projectStore.setRoles(Number(params.id))
    }
  },
  { immediate: true }
)

let interval: number
onActivated(() => {
  interval = setInterval(() => {
    const id = Number(router.currentRoute.value.params.id)
    id && projectStore.setCurrent(id)
  }, 1000)
})
onDeactivated(() => {
  projectStore.setRoles(null)
  clearInterval(interval)
})

const deleteProject = () => {
  Modal.confirm({
    content: ui18n.t('sys.delTip'),
    title: ui18n.t('project.delTitle'),
    width: '400px',
    okText: ui18n.t('sys.del'),
    icon: null,
    cancelText: ui18n.t('sys.cancel'),
    onOk: async () => {
      await projectStore.delete()
      router.replace({ name: RoutesName.projects })
    }
  })
}
const finishProject = async () => {
  await projectStore.finish()
  router.replace({ name: RoutesName.projects })
}
const updateProject = async () => {
  renderModal(EditProject, {
    project: projectStore.current!,
    async onSave({ projectImg, bimFile, ...data }) {
      const img =
        projectImg && typeof projectImg !== 'string'
          ? await uploadFile(projectImg as File)
          : projectImg

      await projectStore.update({ ...data, projectImg: img as string })
    }
  })
}
</script>

<style lang="scss" scoped>
.project-detail-header {
  padding-bottom: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  align-items: center;

  h3 {
    font-size: 20px;
    color: #323233;
    margin: 0;
  }

  .actions button {
    margin-left: 16px;
  }
}

.body {
  display: flex;
  justify-content: space-between;

  .meta {
    display: flex;
    margin-bottom: 16px;
    p {
      color: #888888;
      margin-right: 20px;
      margin-bottom: 0;
      span {
        color: #323233;
        margin-right: 3px;
        &::after {
          content: '：';
        }
      }
    }
  }

  .desc {
    flex: 1;
    max-width: 800px;
    padding: 14px 10px;
    background: #fafafa;
    color: #646566;
    line-height: 20px;
    font-size: 14px;
  }

  .tabs {
    margin-top: 16px;
  }
}
</style>

<style lang="scss">
.project-detail-header .ant-tabs-top > .ant-tabs-nav {
  margin: 0;
}
</style>
