<template>
  <PageWrapper content-class="bg-white p-5">
    <div
      v-if="projectInfo && projectStatusBgColorMap.has(projectInfo.status)"
      class="flex items-baseline"
      :class="prefixCls"
    >
      <span
        :class="projectStatusBgColorMap.get(projectInfo.status)"
        class="text-white rounded-md h-28px py-1 px-[.4rem] text-base leading-20px mr-2"
        >{{ projectStatusTextMap.get(projectInfo?.status) }}</span
      >
      <h4 class="text-3xl p-0 m-0">{{ projectInfo.name }}</h4>
    </div>
    <div>
      <a-tabs :default-active-key="activeKey" @change="tabChange">
        <a-tab-pane key="1" tab="项目信息">
          <ProjectInfo
            v-if="projectInfo"
            :info="projectInfo"
            @updateInfo:info="updateInfo"
            :has-permission="hasPermission"
          />
        </a-tab-pane>
        <a-tab-pane key="2" tab="项目账号">
          <ProjectAccount :active-id="activeKey" :id="projectInfo?.id" :has-permission="hasPermission" />
        </a-tab-pane>
        <!-- <a-tab-pane key="3" tab="项目标段" />
        <a-tab-pane key="4" tab="办事处共享" />
        <a-tab-pane key="5" tab="功能设置" /> -->
      </a-tabs>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { Tabs } from 'ant-design-vue'
  import { PageWrapper } from '/@/components/Page'
  import { ProjectListItem } from '/@/api/sys/model/projectModel'
  import { getProjectById } from '/@/api/sys/project'
  import { useDesign } from '/@/hooks/web/useDesign'
  import { projectStatusBgColorMap, projectStatusTextMap } from '/@/enums/statusEnum'
  import ProjectInfo from './components/info.vue'
  import ProjectAccount from './components/account.vue'
  import { useUserStore } from '/@/store/modules/user'
  export default defineComponent({
    name: 'Project',
    components: {
      PageWrapper,
      ATabs: Tabs,
      ATabPane: Tabs.TabPane,
      ProjectInfo,
      ProjectAccount
    },
    setup() {
      const activeKey = ref('1')
      const { prefixCls } = useDesign('project')
      const projectInfo = ref<Nullable<ProjectListItem>>(null)
      // const hasAdmin = computed(() => projectInfo.value?.userId !== 'xCi4xUL6uur0h7fVI--NeA')
      const userStore = useUserStore()
      const hasPermission = computed(
        () => !!userStore.getUserInfo.isAdmin || projectInfo.value?.staffIdEncrypted === userStore.getUserInfo.staffId
      )
      const route = useRoute()
      async function fetchProjectInfo(id: string) {
        const project = await getProjectById({ id })
        projectInfo.value = project
      }
      fetchProjectInfo(route.params.id as string)
      watch(
        () => route.params.id,
        async (newId: string) => {
          if (newId) {
            await fetchProjectInfo(newId)
          }
        }
      )
      const updateInfo = (info: ProjectListItem) => {
        projectInfo.value = info
      }

      const tabChange = (key: string) => {
        activeKey.value = key
      }

      return {
        activeKey,
        projectInfo,
        projectStatusBgColorMap,
        projectStatusTextMap,
        prefixCls,
        updateInfo,
        tabChange,
        hasPermission
      }
    }
  })
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-project';

  html {
    .@{prefix-cls} {
      font-size: 14px;
    }
  }
</style>
