<!--
 * @Author: xiejiang
 * @Date: 2024-12-08 09:25:35
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 20:23:37
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <Drawer :drawer-visible="drawerVisible" width="960px" title="版本详情" @close="close" :footer="false">
    <InfoLable class="mb-[16px]" label="当前终端" :value="state.platformType == 1 ? '平台端' : '机构端'" />
    <InfoLable class="mb-[16px]" label="版本号" :value="state.version" />
    <InfoLable class="mb-[16px]" label="更新说明"><div v-html="state.description || '-'"></div> </InfoLable>
    <InfoLable class="mb-[16px]" label="版本备注" :value="state.remark || '-'" />
    <InfoLable class="mb-[16px]" label="添加人" :value="state.inputUserName" />
    <InfoLable label="添加时间" :value="state.inputTime" />
    <PageTitle title="状态变更记录" class="my-[24px]" />
    <t-table :data="tableData" :columns="columns" max-height="400px">
      <!-- 保留自定义列插槽 -->
      <template v-for="(_, name) in $slots" #[name]="scope">
        <slot :name="name" v-bind="scope" />
      </template>
      <template v-for="col in columns" #[soltName(col)]="{ row }" :key="col.colKey">
        <template v-if="col.colKey != 'operation'">
          <div class="cell-content">{{ row[col.colKey as string] || '-' }}</div>
        </template>
      </template>
    </t-table>
  </Drawer>
</template>

<script setup lang="tsx" name="version-detail">
import { PrimaryTableCol } from 'tdesign-vue-next'
import { statusVersionTxt } from '@/utils/status'
import { soltName } from '@/utils'
import { getVersionDetail } from '@/api/modules/version/index'
import { ResVersion } from '@/api/interface/version'

const drawerVisible = ref(false)

const state = ref<ResVersion>({})
const tableData = ref<any[]>([])
// 表格columns配置
const columns: PrimaryTableCol[] = [
  {
    title: '序号',
    colKey: 'serial-number',
    width: 70
  },
  {
    title: '变更前状态',
    colKey: 'beforeStatus',
    cell: (h, { row }) => {
      return <span>{statusVersionTxt(row.beforeStatus)?.title}</span>
    }
  },
  {
    title: '变更后状态',
    colKey: 'afterStatus',
    cell: (h, { row }) => {
      return <span>{statusVersionTxt(row.afterStatus)?.title}</span>
    }
  },
  { title: '操作人', colKey: 'inputUserName' },
  { title: '操作时间', colKey: 'inputTime' }
]

const open = (val: ResVersion) => {
  getVersionDetail({ versionId: val.versionId as string }).then(res => {
    state.value = res.data
    tableData.value = res.data?.platformVersionLogs || []
  })
  drawerVisible.value = true
}

const close = () => {
  drawerVisible.value = false
}

defineExpose({
  open,
  close
})
</script>

<style lang="less" scoped>
:deep(.info-label__label) {
  min-width: 70px;
}
</style>
