<script lang="ts" setup name="reportOnCredentialsAdd">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus'
import type { IOptions } from '../standard_interface'
import baseInfo from './baseInfo.vue'
import { getStaffList } from '@/api/measure/person'
import { getTypeSelect } from '@/api/system/price'
import { getStandardLisUpdate, getStandardListAdd, getStandardListDetail, getUsersDept } from '@/api/device/standard'
import { UploadFile } from '@/api/measure/file'
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const pageType = ref('add') // 页面类型: add,edit, detail
const buttonLoading = ref(false) // 按钮加载状态
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// 定义数据
const formInline = ref({ })
// 关闭
interface menuType {
  name: string
  comp: any
}
const menu = shallowRef<menuType[]>([
  { name: '基本信息', comp: baseInfo },
  { name: '原始记录', comp: baseInfo },
  { name: '征收户报告', comp: baseInfo },
])
const baseInfoRef = ref()
const current = ref('基本信息')
const currentComp = shallowRef(baseInfo)
watch(current, (newValue) => {
  currentComp.value = menu.value.filter(item => item.name === newValue)[0].comp
})
// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
const setData = (newValue: object) => {
  formInline.value = newValue
}

interface checkedRecord {
  text: string
}
// 编辑获取详情的提交按钮
const submitFormDetail = () => {
  if (pageType.value === 'edit') {
    formInline.value.id = infoId.value
    getStandardLisUpdate(formInline.value).then((res) => {
      if (res.code === 200) {
        close()
      }
    })
  }
  else {
    // 打印

  }
}
const printObj = ref({
  id: 'form', // 需要打印元素的id
  popTitle: '测量标准装置', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})
// 提交
const submitForm = () => {
  if (pageType.value === 'detail') { return submitFormDetail() }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    current.value = '基本信息'
    baseInfoRef.value.submitForm().validate().then(() => {
      pageType.value === 'add'
        ? getStandardListAdd(formInline.value).then((res) => {
          if (res.code === 200) {
            ElMessage.success('新增成功')
            close()
          }
        })
        : submitFormDetail()
    })
  })
}
</script>

<template>
  <app-container>
    <detail-page :title="`测量标准装置-${textMap[pageType]}`">
      <template #btns>
        <el-button
          v-if="pageType !== 'detail'"
          type="primary"
          @click="submitForm()"
        >
          提交
        </el-button>
        <el-button
          v-else
          v-print="printObj"
          type="primary"
        >
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-switch title="">
      <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>
    </detail-block-switch>
    <base-info id="form" ref="baseInfoRef" :info-id="infoId" :button-type="pageType" @setData="setData" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.top-info {
  width: 100%;
  height: 50px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;

  .title {
    width: 75%;
    text-align: center;
  }
}

.body {
  background-color: #fff;
  margin-top: 10px;
}
</style>