<!-- 检定数据管理详情 -->
<script lang="ts" setup name="MeasureDataDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from './measureData-interface'
import TemplateDetail from './components/first/templateDetail.vue'
import { getUserList } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'
import countries from '@/components/AddressSelect/country-code.json'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
// import { addMonitorDeviceList, getInfo, updateMonitorDeviceList } from '@/api/equipment/monitor/device'
// import type { IOptions } from '@/views/device/standardEquipment/standard_interface'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const ruleFormRef = ref() // 表单ref
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// -------------------------------------------按钮----------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 点击编辑按钮
const edit = () => {
  pageType.value = 'edit'
}

// 保存
const save = () => {
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      const params = {
        ...form.value,
        createDept: deptList.value.find(item => item.id === form.value.createDeptId)?.name,
        createUserName: userList.value.find(item => item.id === form.value.createUserId)?.name,
        id: infoId.value,
      }
      // 新建
      if (pageType.value === 'add') { // 新建
        // addMonitorDeviceList(params).then((res) => {
        //   ElMessage.success('保存成功')
        //   form.value.equipmentNo = res.data.equipmentNo // 统一编号
        //   pageType.value = 'detail'
        //   loading.close()
        // }).catch(() => {
        //   loading.close()
        // })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        // updateMonitorDeviceList(params).then((res) => {
        //   ElMessage.success('保存成功')
        //   pageType.value = 'detail'
        //   loading.close()
        // }).catch(() => {
        //   loading.close()
        // })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// -------------------------------------------获取详情信息--------------------------------------------------
// 获取详情信息
const fetchInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  // getInfo({ id: infoId.value }).then((res) => {
  //   form.value = res.data
  //   loading.close()
  // })
}
onMounted(async () => {
  if (pageType.value !== 'add') {
    // fetchInfo()
  }
  else { // 新建
  }
})
</script>

<template>
  <app-container>
    <detail-page :title="`检定数据管理-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <el-button v-if="pageType === 'detail'" type="primary" @click="edit">
          编辑
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <template-detail />
  </app-container>
</template>

<style lang="scss" scoped>
.step {
  line-height: 28px;
  font-size: 20px;
  color: #3d7eff;
  font-weight: bold;
  margin-bottom: 5px;
  width: fit-content;
}
</style>

<style lang="scss">
.fieldtest-record-detail {
  .el-table thead.is-group th.el-table__cell {
    background: #f2f6ff;
  }
}
</style>