<script lang="ts" setup name="standardListAdd">
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 './standardList/baseInfo.vue'
import table from './standardList/temptable.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 props = defineProps({
  infoId: {
    type: String,
    default: '0',
  },
  buttonType: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['close'])
// 定义数据
const formInline = ref({})
// 关闭
interface menuType {
  name: string
  comp: any
}
const menu = shallowRef<menuType[]>([
  { name: '基本信息', comp: baseInfo },
  { name: '计量人员', comp: table },
  { name: '标准配套设备', comp: table },
  { name: '检定规程', comp: table },
  { name: '重复性考核记录', comp: table },
  { name: '稳定性考核记录', comp: table },
  { name: '证书管理', comp: table },
])
const currentCompRef = ref()
const current = ref('基本信息')
const currentComp = shallowRef(baseInfo)
watch(current, (newValue) => {
  currentComp.value = menu.value.filter(item => item.name === newValue)[0].comp
})
// 关闭
const close = () => {
  emit('close')
}
const setData = (newValue: object) => {
  formInline.value = newValue
}
// 编辑获取详情的提交按钮
const submitFormDetail = () => {
  if (props.buttonType === '编辑') {
    formInline.value.id = props.infoId
    getStandardLisUpdate(formInline.value).then((res) => {
      if (res.code === 200) {
        close()
      }
    })
  }
  else {
    // 打印
    const printObj = ref({
      id: 'print', // 需要打印元素的id
      popTitle: '测量标准装置', // 打印配置页上方的标题
      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
      preview: false, // 是否启动预览模式，默认是false
      standard: '',
      extarCss: '',
    })
  }
}
// 提交
const submitForm = () => {
  if (props.buttonType === '详情') { return submitFormDetail() }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    current.value = '基本信息'
    currentCompRef.value.submitForm().validate().then(() => {
      props.buttonType === ''
        ? getStandardListAdd(formInline.value).then((res) => {
          if (res.code === 200) {
            close()
          }
        })
        : submitFormDetail()
    })
  })
}
</script>

<template>
  <app-container>
    <div class="top-info">
      <h4 class="title">
        测量标准装置
      </h4>
      <div>
        <el-button
          v-print="buttonType === '详情' ? printObj : ''"
          type="primary"
          @click="submitForm()"
        >
          {{ buttonType === '详情' ? '打印' : '提交' }}
        </el-button>
        <el-button type="warning" @click="close">
          关闭
        </el-button>
      </div>
    </div>
    <div class="body">
      <!-- 三级菜单 -->
      <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>
      <!-- 展示区域 -->
      <keep-alive>
        <component :is="currentComp" ref="currentCompRef" :name="current" :button-type="buttonType" :info-id="infoId" @setData="setData" />
      </keep-alive>
    </div>
  </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>
