<!--
 * @Author: xiejiang
 * @Date: 2024-12-01 10:37:37
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 18:15:00
 * @Description:  机构详情
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <div class="bg-white p-[12px] h-full">
    <Back />
    <main class="m-auto max-w-[1012px]">
      <!-- 基本信息 -->
      <PageTitle class="mb-[24px] mt-[12px]">
        <div class="flex items-center justify-between w-full">
          <span>基本信息</span>
          <t-button class="ml-[12px]" theme="primary" size="small" @click="handelEdit"> 编辑机构</t-button>
        </div>
      </PageTitle>
      <div class="flex flex-wrap">
        <DetailTable label="机构名称" :value="state?.companyName" />
        <DetailTable label="机构类型" :value="state?.companyTypeName" />
        <DetailTable label="机构状态"
          ><span>
            {{ statusTxt(state?.companyStatus as number)?.title }}
          </span></DetailTable
        >
        <DetailTable label="服务状态" :value="state?.serviceStatus == 1 ? '服务中' : '已结束'" />
        <DetailTable label="机构管理员" width="100%">
          <div>
            <p class="m-0 mb-[8px]">管理员姓名：{{ state?.adminUserName }}</p>
            <p class="m-0">管理员手机号码： {{ state?.adminUserMobile }}</p>
          </div>
        </DetailTable>
        <DetailTable label="机构备注" width="100%" :value="state?.remark" />
        <DetailTable label="添加人" :value="state?.inputUserName" />
        <DetailTable label="添加时间" :value="state?.inputTime" />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="institution-detail">
import { useRoute, useRouter } from 'vue-router'
import { useBasic } from '@/hooks/useBasic'
import { statusTxt } from '@/utils/status'
import { ResCompany } from '@/api/interface/institution/index'
import { getDetail } from '@/api/modules/institution/index'

const { setBreadcrumb } = useBasic()
const route = useRoute()
const router = useRouter()

const state = ref<ResCompany>()

const getData = () => {
  getDetail({ companyId: route.query.companyId as string }).then(res => {
    state.value = res.data
  })
}

// 编辑新增
const handelEdit = () => {
  router.push({
    name: 'institution-edit',
    query: {
      companyId: route.query.companyId
    }
  })
}

onMounted(() => {
  setBreadcrumb([
    {
      title: '客户中心'
    },
    {
      title: '机构管理',
      name: 'institution'
    },
    {
      title: '机构详情'
    }
  ])
  getData()
})
</script>

<style lang="less" scoped>
:deep(.title) {
  width: 100%;
}

:deep(.prefix) {
  margin-top: 4px;
}
</style>
