<!-- 设备台账新增或编辑页面 -->
<script lang="ts" setup name="measureDevice">
import type { certificate, checkedRecord, fixedAssetsType, menuType, stateChangedRecord, usedRecord } from '../standingBook-interface'
import baseInfo from './baseInfo.vue' // 基本信息
import TemplateTable from './templateTable.vue'
import { assetsDetailApi, queryStateChangeLogList, queryUseLogList } from '@/api/device/standingBook'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const $router = useRouter()
const $route = useRoute()
const title = ref('') // 页面类型-新建/编辑等
const name = ref('') // 设备类型-设备台账
const pageType = ref('detail') // add/detail/edit
const id = ref('') // 设备id
const showAssetsItem = ref(false) // 是否显示固定资产输入项
// 表单数据
const row = ref<fixedAssetsType>()

// 详情查看按钮及组件
const menu = shallowRef<menuType[]>([
  { name: '周检记录', comp: TemplateTable },
  { name: '状态变更记录', comp: TemplateTable },
  { name: '使用记录', comp: TemplateTable },
  { name: '检定证书', comp: TemplateTable },
])

const current = ref('周检记录')

// 点击取消
const resetForm = () => {
  $router.go(-1)
}

// 表单对象
const baseInfoRef = ref()

// 提交表单方法-调用子组件提交方法
function submitForm() {
  baseInfoRef.value.submitForm()
}
// 获取资产详情
function getInfo() {
  assetsDetailApi({ id: id.value }).then((res) => {
    // 将数据中number转成string
    for (var key in res.data) {
      if (typeof res.data[key] === 'number') {
        res.data[key] = String(res.data[key])
      }
    }
    row.value = res.data
  })
}
const queryParams = {
  id: '',
  limit: 20,
  offset: 1,
}
// 周检记录
const checkedRecordsColumns = ref<TableColumn[]>([
  { text: '记录表编号', value: 'text', align: 'center' },
  { text: '记录人', value: 'text', align: 'center' },
  { text: '检定日期', value: 'text', align: 'center' },
  { text: '有效日期', value: 'text', align: 'center' },
  { text: '送检人', value: 'text', align: 'center' },
  { text: '计量确认结论', value: 'text', align: 'center' },
])
const checkedRecords = ref<checkedRecord[]>([])
const checkedRecordsLoading = ref(false)
function fetchCheckedRecords(query = { ...queryParams }) {
  checkedRecordsLoading.value = true
  checkedRecords.value = []
  checkedRecordsLoading.value = false
}

// 状态变更记录
const stateChangedRecordsColumns = ref<TableColumn[]>(
  [
    { text: '状态类型', value: 'managerStateName', align: 'center' },
    { text: '开始日期', value: 'startDate', align: 'center' },
    { text: '结束日期', value: 'endDate', align: 'center' },
    { text: '申请人', value: 'applyPersonName', align: 'center' },
  ],
)
const stateChangedLoading = ref(false)
const stateChangedRecords = ref<stateChangedRecord[]>([])
function fetchStateChangedRecords(query = { ...queryParams }) {
  stateChangedLoading.value = true
  queryStateChangeLogList({ id: id.value }).then((res) => {
    if (res.code === 200) {
      stateChangedRecords.value = res.data
    }
  })
  stateChangedLoading.value = false
}
// 获取使用记录
const useRecordsColumns = ref<TableColumn[]>(
  [
    { text: '使用人', value: 'usePersonName', align: 'center' },
    { text: '使用部门', value: 'useDept', align: 'center' },
    { text: '使用类型', value: 'useType', align: 'center' },
    { text: '使用开始日期', value: 'startDate', align: 'center' },
    { text: '使用结束日期', value: 'endDate', align: 'center' },
  ],
)
const useRecordsLoading = ref(false)
const useRecords = ref<usedRecord[]>([])
function fetchUseRecords(query = { ...queryParams }) {
  useRecordsLoading.value = true
  queryUseLogList({ id: id.value }).then((res) => {
    if (res.code === 200) {
      useRecords.value = res.data
    }
  })
  useRecordsLoading.value = false
}
// 获取检定证书记录
const certificationListColumns = ref<TableColumn[]>(
  [
    { text: '证书编号', value: '', align: 'center' },
    { text: '证书名称', value: '', align: 'center' },
    { text: '证书类型', value: '', align: 'center' },
    { text: '证书出具日期', value: '', align: 'center' },
    { text: '证书有效期', value: '', align: 'center' },
  ],
)
const certificationLoading = ref(false)
const certificationList = ref<certificate[]>([])
function fetchCertificationList(query = { ...queryParams }) {
  certificationLoading.value = true
  useRecords.value = []
  certificationLoading.value = false
}

onMounted(() => {
  console.log($route.query)
  title.value = $route.query.title as string
  name.value = $route.query.name as string
  pageType.value = $route.params.type as string
  if ($route.query.id) { // 如果有id
    id.value = $route.query.id as string
    getInfo()
    if (pageType.value === 'detail' && name.value !== '固定资产') {
      fetchCheckedRecords()
      fetchStateChangedRecords()
      fetchUseRecords()
      fetchCertificationList()
    }
  }
  showAssetsItem.value = name.value == '固定资产'
})
</script>

<template>
  <app-container>
    <detail-page :title="`${name}-${title}`">
      <template #btns>
        <el-button v-if="title !== '详情'" type="primary" @click="submitForm">
          保存
        </el-button>
        <el-button type="info" @click="resetForm">
          关闭
        </el-button>
      </template>
      <base-info ref="baseInfoRef" :name="current" :title="pageType" :row="row" :show-assets-item="showAssetsItem" />
    </detail-page>
    <!-- 展示区域 -->

    <!-- 添加证书信息组件 -->
    <detail-block-switch v-if="pageType === 'detail' && $route.query.name !== '固定资产'" :title="current">
      <template #menu>
        <el-radio-group v-model="current">
          <el-radio-button v-for="item in menu" :key="item.name" :label="item.name">
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </template>
      <template-table v-if="current === '周检记录'" :columns="checkedRecordsColumns" :list="checkedRecords" :loading="checkedRecordsLoading" />
      <template-table v-if="current === '状态变更记录'" :columns="stateChangedRecordsColumns" :list="stateChangedRecords" :loading="stateChangedLoading" />
      <template-table v-if="current === '使用记录'" :columns="useRecordsColumns" :list="useRecords" :loading="useRecordsLoading" />
      <template-table v-if="current === '检定证书'" :columns="certificationListColumns" :list="certificationList" :loading="certificationLoading" />
    </detail-block-switch>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>