<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 { conditionalExpression } from '@babel/types'
import type { IOptions } from '../standard_interface'
import UserListDialog from '../../../stateManage/components/addRow.vue'
import { getStaffList } from '@/api/measure/person'
import { getTypeSelect } from '@/api/system/price'
import { getStandardLisAdd, getStandardList, getStandardListDetail, getUsersDept } from '@/api/device/standard'
import { UploadFile } from '@/api/measure/file'
import useUserStore from '@/store/modules/user'
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const buttonArray = ref<string[]>([]) // 顶部按钮数组
const pageType = ref('add') // 页面类型: add,edit, detail
const buttonLoading = ref(false) // 按钮加载状态
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '查看',
} // 字典
// 从路由中获取页面类型参数
const $route = useRoute()
const { username } = useUserStore()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if (pageType.value === 'add') {
    buttonArray.value = ['提交', '保存']
  }
  else if (pageType.value === 'edit') {
    buttonArray.value = ['提交']
  }
  else {
    buttonArray.value = ['同意', '驳回', '拒绝']
  }
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
const ruleFormRef = ref<FormInstance>()
// 逻辑代码
const formInline = ref({
  assessDate: '',
  assessmentUnit: '',
  category: null,
  categoryName: '',
  constructionStandardProject: '',
  constructionStandardUnitName: '',
  contactInfo: '',
  createTime: null,
  createUser: null,
  id: '',
  isDel: null,
  laboratoryOwner: null,
  laboratoryOwnerContact: null,
  laboratoryOwnerName: null,
  managerState: null,
  managerStateName: '',
  measureMajor: null,
  fileList: [],
  measureMajorName: '',
  mesureRange: '',
  organizeNo: '',
  preparationDate: '',
  projectNo: '',
  remark: '',
  standardHumidity: null,
  standardLaboratory: null,
  standardLaboratoryName: '',
  standardLevel: null,
  standardLevelName: '',
  standardName: '',
  standardNo: '',
  standardOwner: null,
  standardOwnerName: '',
  standardTemperature: null,
  totalInvestment: null,
  transmitRange: null,
  transmitRangeName: '',
  uncertainty: '',
  updateTime: null,
  version: null,
})

const fromListInfo = ref({
  applyDept: '',
  applyEquipmentList: [],
  applyNo: '',
  applyType: $route.query.applyType,
  applyTypeName: '',
  approvalStatus: '',
  approvalStatusName: '',
  constructionStandardUnitName: '',
  createTime: null,
  createUser: null,
  fileList: [],
  id: null,
  isDel: 0,
  processId: '',
  remark: '',
  standardEquipmentId: '',
  standardName: '',
  standardNo: '',
  standardOwner: '',
  updateTime: null,
  version: null,
})

const checkTypeOptions = ref<IOptions[]>([])
const standardOwnerOptions = ref<IOptions[]>([]) // 标准负责人
const fileList = ref<UploadUserFile[]>([]) // 文件对象数组
const measureMajorList = ref<IOptions[]>([]) // 计量专业下拉框
const standardManagerStateList = ref<IOptions[]>([]) // 管理状态下拉框
const standardLevelList = ref<IOptions[]>([]) // 标准等级下拉框
const transmitRangeList = ref<IOptions[]>([]) // 传递范围下拉框
// 标准所在部门下拉框
const standardUsersDeptList = ref<IOptions[]>([])
// 获取下拉框
const getSelectList = (code: string) => {
  getTypeSelect(code).then((res) => {
    if (code === 'measureMajor') {
      measureMajorList.value = res.data
    }
    else if (code === 'standardManagerState') {
      standardManagerStateList.value = res.data
    }
    else if (code === 'standardLevel') {
      standardLevelList.value = res.data
    }
    else if (code === 'transmitRange') {
      transmitRangeList.value = res.data
    }
    else if (code === 'standardCategory') {
      checkTypeOptions.value = res.data
    }
  })
}
getSelectList('measureMajor') // 获取计量专业下拉框
getSelectList('standardManagerState') // 获取管理状态下拉框
getSelectList('standardLevel') // 获取标准等级下拉框
getSelectList('transmitRange') // 获取传递范围下拉框
getSelectList('standardCategory') // 获取类别下拉框
// 获取部门信息
getUsersDept({
  createTime: null,
  director: '',
  meterMajor: '',
  organizeName: '',
  organizeNo: '',
  organizeType: '2',
  pdeptId: null,
  offset: 1,
  limit: 999999,
}).then((res) => {
  standardUsersDeptList.value = res.data.rows
})
// 获取到标准负责人数组
const getStandardOwnerOptions = () => {
  const params = {
    staffNo: '', // 人员编号
    name: '', // 姓名
    deptId: '', // 工作部门
    major: '', // 计量专业
    verifierCertificateNo: '', // 证书号
    certificateStatus: '', // 证书状态
    limit: 100000,
    offset: 1,
  }
  getStaffList(params).then((res) => {
    standardOwnerOptions.value = res.data.records
  })
}
// 数据
const list = ref<object[]>([
])
// 标准配套设备更换表格总数
const total = ref(0)
// 审批弹窗开关
const applyShow = ref(false)
// 审批弹窗信息收集类型
interface applyListType {
  select: string
  epilog: string
  approval: string
  approvalTime: string
}
// 审批弹窗信息收集
const applyList = ref<applyListType>({
  select: '',
  epilog: '',
  approval: '',
  approvalTime: '',
})
// 标准配套设备表头类型
interface columnsType {
  text: string
  value: string
  align: string
  required: Boolean
  choose: Boolean
  time: Boolean
}
// 申请文档列表
const filesList = ref([])
// 标准配套设备更换表头
const columns = ref<columnsType[]>([
  {
    text: '设备名称',
    value: 'assetTypeName',
    align: 'center',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '设备编号',
    value: 'assetNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '型号',
    value: 'modelNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '测量范围',
    value: 'assetTypeName',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '使用部门',
    value: 'purpose',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '检定时间',
    value: 'manufacturingDate',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '检定结果',
    value: 'managerStateName',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '有效日期',
    value: 'mesureCycleName',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
])
// 标准配套设备更换查询条件
const listQuery = ref<object>({
  limit: 10,
  offset: 1,
})
// 标准配套设备更换表格loding
const loadingTable = ref(false)
// 申请文档表头
const columnsFiles = ref<columnsType[]>([
  {
    text: '文件名称',
    value: 'fileName',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '上传时间',
    value: 'createTime',
    align: 'center',
    required: true,
    choose: false,
    time: true,
  },
  {
    text: '文件说明',
    value: 'remark',
    align: 'center',
    required: true,
    time: false,
    choose: false,
  },
  {
    text: '附件文档',
    value: 'minioFileName',
    align: 'center',
    required: true,
    time: false,
    choose: true,
  },
])
// 标准配套设备更换表格分页
const changePage = () => {}
getStandardOwnerOptions()
// 添加表格数据对象
const addList = ref({})
// 添加表格弹窗开关
const dialogVisible = ref(false)
// 选择标准装置数据列表下拉框
const standardList = ref([])
// 初始化路由
const $router = useRouter()
// 关闭
const close = () => {
  // emit('close')
  $router.back()
}
const rules = ref({
  standardName: [{ required: true, message: '标准名称不能为空', trigger: 'blur' }],
  projectNo: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
  constructionStandardProject: [{ required: true, message: '建标项目不能为空', trigger: 'blur' }],
  organizeNo: [{ required: true, message: '组织机构代码不能为空', trigger: 'blur' }],
  constructionStandardUnitName: [{ required: true, message: '建标单位名称不能为空', trigger: 'blur' }],
  standardOwner: [{ required: true, message: '标准负责人不能为空', trigger: 'blur' }],
  contactInfo: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
  category: [{ required: true, message: '类 别不能为空', trigger: 'blur' }],
  standardLevel: [{ required: true, message: '标准等级不能为空', trigger: 'blur' }],
  transmitRange: [{ required: true, message: '传递范围不能为空', trigger: 'blur' }],
  preparationDate: [{ required: true, message: '筹建日期不能为空', trigger: 'blur' }],
  managerState: [{ required: true, message: '管理状态不能为空', trigger: 'blur' }],
  measureMajor: [{ required: true, message: '计量专业不能为空', trigger: 'blur' }],
  assessmentUnit: [{ required: true, message: '考核单位不能为空', trigger: 'blur' }],
  assessDate: [{ required: true, message: '考核日期不能为空', trigger: 'blur' }],
  uncertainty: [{ required: true, message: '不确定度不能为空', trigger: 'blur' }],
  mesureRange: [{ required: true, message: '测量范围不能为空', trigger: 'blur' }],
  standardTemperature: [{ required: true, message: '标准温度不能为空', trigger: 'blur' },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '标准温度只能为数字', trigger: 'blur' }],
  standardHumidity: [{ required: true, message: '标准湿度不能为空', trigger: 'blur' },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '标准湿度只能为数字', trigger: 'blur' }],
}) // 表单验证规则
// 获取数据
const fetchData = () => {
  const params = {
    standardNo: '',
    standardName: '',
    category: '',
    managerState: null,
    standardLaboratory: null,
    preparationDate: null,
    id: null,
    offset: 1,
    limit: 1000000,
  }
  getStandardList(params).then((response) => {
    standardList.value = response.data.rows
  })
}
fetchData()
// 上传请求
const uploadQuarterlyEvaluateFile = (file: File) => {
  const fd = new FormData()
  fd.append('multipartFile', file.file)
  UploadFile(fd).then((res) => {
    if (res.code === 200) {
      fromListInfo.value.fileList[0].minioFileName = res.data[0]
      // 重置当前验证
      ElMessage.success('文件上传成功')
    }
  })
}
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning('只能上传一个文件')
}
// 移除时触发
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `确认移除${uploadFile.name}文件吗 ?`,
  ).then(
    () => true,
    () => false,

  )
}
// 选择标准配套设备
const userListDialog = ref()
// 第几条数据选择
const listIndex = ref(0)
// 点击标准配套设备选择按钮
const chooseList = (row: object, index: number) => {
  listIndex.value = index
  userListDialog.value.initDialog()
}
// 选择完成之后的回调
const confirmPerson = (row: any) => {
  fromListInfo.value.applyEquipmentList[listIndex.value] = row[0]
  console.log(fromListInfo.value)
}
// 增加申请文档列表
const addRow = () => {
  fromListInfo.value.fileList.push({})
}
// 点击文件预览
const uploadShow = (e: any) => {
  const URL = window.URL || window.webkitURL
  window.open(URL.createObjectURL(e.raw))
}
const testForm = ref({
  fileList: [],
  fileContent: '',
})
const handleFileChange = (files: any, fileList: any) => {
  testForm.value.fileList = fileList
  const reader = new FileReader()
  reader.readAsText(files.raw)
  // reader.onload = (e) => {
  //   testForm.value.fileContent = e.target!.result?.replace(
  //     /\n|\r\n/g,
  //     '<br/>',
  //   )
  // }
}
// 表格选中的数组
const SelectionList = ref<object[]>([])
// 标准实验室发生改变row类型
interface rowReturn {
  phone: string
  director: string
}
// 标准实验室发生改变
const changeDeptList = (row: object) => {
  formInline.value.laboratoryOwnerContact = row.phone
  formInline.value.laboratoryOwner = row.director
}
// 标准实验室清空时
const clearDeptList = () => {
  formInline.value.laboratoryOwnerContact = null
  formInline.value.laboratoryOwner = null
}
// 获取详情信息
const getInfo = (id: string | number) => {
  getStandardListDetail({ id }).then((res) => {
    Object.keys(res.data).map((item) => {
      if (typeof (res.data[item]) === 'number') {
        res.data[item] = res.data[item].toString()
      }
    })
    formInline.value = res.data
  })
}
if (pageType.value !== 'add') {
  getInfo(infoId.value)
}

// 提交
const submitForm = () => {
  return ruleFormRef.value
}
defineExpose({ submitForm })

// 点击顶部一排按钮
const getAddList = (item: string) => {
  if (item === '提交' || item === '保存') {
    getStandardLisAdd(fromListInfo.value).then((res) => {
      if (res.code === '200') {
        close()
      }
    })
  }
  else {
    if (item === '同意') {
      applyList.value.select = '1'
    }
    else if (item === '驳回') {
      applyList.value.select = '2'
    }
    else {
      applyList.value.select = '3'
    }
    applyShow.value = true
  }
}
// 选择了标准名称后
const standardChange = (e: any) => {
  getInfo(e)
  formInline.value.standardOwner = e
}
// 点击增加行
const addRoow = () => {
  fromListInfo.value.applyEquipmentList.push({})
}
// 点击关闭
const handleClose = () => {
  dialogVisible.value = false
}
// 标准配套设备更换表格删除行
const removeRow = (type: string) => {
  if (SelectionList.value.length > 0) {
    ElMessageBox.confirm(
      '确认删除选中的数据吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(() => {
      if (type == '1') {
      // 删除行
        list.value = list.value.filter((item) => {
          return !SelectionList.value.includes(item)
        })
        ElMessage.success('删除成功')
      }
      else {
      // 删除行
        fromListInfo.value.fileList = fromListInfo.value.fileList.filter((item) => {
          return !SelectionList.value.includes(item)
        })
        ElMessage.success('删除成功')
      }
    })
  }
  else {
    ElMessage.warning('请先选择需要删除的数据')
  }
}
// 表格多选框
const handleSelectionChange = (e: any) => {
  SelectionList.value = e
}
watch(() => formInline.value, (newVal) => {
// 变化后存储
},
{ deep: true, immediate: true })
// 审批弹窗的关闭
const applyListClose = () => {
  applyShow.value = false
}
// 审批弹窗的提交
const applyListSubmit = () => {
  console.log(applyList.value)
  if (applyList.value.select == '') {
    return ElMessage.error('必须选择审批意见')
  }
  applyListClose()
}
</script>

<template>
  <app-container>
    <div class="top-info">
      <h4 class="title">
        {{ $route.meta.title }} -- {{ textMap[pageType] }}
      </h4>
      <div>
        <el-button
          v-for="(item, index) in buttonArray"
          :key="index"
          type="primary"
          @click="getAddList(item)"
        >
          {{ item }}
        </el-button>
        <el-button type="warning" @click="close">
          关闭
        </el-button>
      </div>
    </div>
    <div class="info-content">
      <el-form
        ref="ruleFormRef"
        :inline="true"
        :model="formInline"
        label-position="left"
        label-width="auto"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="标准代码:">
              <el-input
                v-model.trim="formInline.standardNo"
                class="full-width-input"
                placeholder="系统编号，自动生成"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准名称:" prop="standardName">
              <el-select
                v-model.trim="fromListInfo.standardEquipmentId"
                clearable
                placeholder="标准名称"
                style="width: 100%;"
                size="default"
                :disabled="pageType === 'detail'"
                @change="standardChange"
              >
                <el-option
                  v-for="item in standardList"
                  :key="item.id"
                  :label="item.standardName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目编号:" prop="projectNo">
              <el-input
                v-model.trim="formInline.projectNo"
                placeholder="项目编号"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建标项目:" prop="constructionStandardProject">
              <el-input
                v-model.trim="formInline.constructionStandardProject"
                placeholder="建标项目"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="组织机构代码:" prop="organizeNo">
              <el-input
                v-model.trim="formInline.organizeNo"
                placeholder="组织机构代码"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="建标单位名称:"
              prop="constructionStandardUnitName"
            >
              <el-input
                v-model.trim="formInline.constructionStandardUnitName"
                placeholder="建标单位名称"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准负责人:" prop="standardOwner">
              <el-select
                v-model="formInline.standardOwner"
                clearable
                placeholder="标准负责人"
                size="default"
                style="width: 100%;"
                disabled
              >
                <el-option
                  v-for="item in standardOwnerOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:" prop="contactInfo">
              <el-input
                v-model.trim="formInline.contactInfo"
                placeholder="联系方式"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="类 别:" prop="category">
              <el-select
                v-model="formInline.category"
                clearable
                placeholder="类别"
                style="width: 100%;"
                size="default"
                disabled
              >
                <el-option
                  v-for="item in checkTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准等级:" prop="standardLevel">
              <el-select
                v-model.trim="formInline.standardLevel"
                clearable
                placeholder="标准等级"
                style="width: 100%;"
                size="default"
                disabled
              >
                <el-option
                  v-for="item in standardLevelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="传递范围:" prop="transmitRange">
              <el-select
                v-model.trim="formInline.transmitRange"
                clearable
                placeholder="传递范围"
                style="width: 100%;"
                size="default"
                disabled
              >
                <el-option
                  v-for="item in transmitRangeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="投资总额:">
              <el-input
                v-model.trim="formInline.totalInvestment"
                placeholder="投资总额"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="筹建日期:" prop="preparationDate">
              <el-date-picker
                v-model="formInline.preparationDate"
                type="datetime"
                placeholder="请选择筹建日期"
                style="width: 100%;"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD h:m:s"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准所在实验室:">
              <el-select
                v-model.trim="formInline.standardLaboratory"
                clearable
                placeholder="标准所在实验室"
                style="width: 100%;"
                size="default"
                disabled
                @clear="clearDeptList"
              >
                <el-option
                  v-for="item in standardUsersDeptList"
                  :key="item.id"
                  :label="item.organizeName"
                  :value="item.deptId"
                  @click="changeDeptList(item)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验室负责人:">
              <el-input
                v-model.trim="formInline.laboratoryOwner"
                placeholder="实验室负责人"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input
                v-model.trim="formInline.laboratoryOwnerContact"
                placeholder="联系方式"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="管理状态:" prop="managerState">
              <el-select
                v-model.trim="formInline.managerState"
                clearable
                placeholder="管理状态"
                style="width: 100%;"
                size="default"
                disabled
              >
                <el-option
                  v-for="item in standardManagerStateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量专业:" prop="measureMajor">
              <el-select
                v-model.trim="formInline.measureMajor"
                clearable
                placeholder="计量专业"
                style="width: 100%;"
                size="default"
                disabled
              >
                <el-option
                  v-for="item in measureMajorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考核单位:" prop="assessmentUnit">
              <el-input
                v-model.trim="formInline.assessmentUnit"
                placeholder="考核单位"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考核日期:" prop="assessDate">
              <el-date-picker
                v-model="formInline.assessDate"
                type="datetime"
                style="width: 100%;"
                placeholder="请选择考核日期"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD h:m:s"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="不确定度:" prop="uncertainty">
              <el-input
                v-model.trim="formInline.uncertainty"
                style="width: 500px;"
                placeholder="不确定度"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="测量范围:" prop="mesureRange">
              <el-input
                v-model.trim="formInline.mesureRange"
                placeholder="测量范围"
                style="width: 500px;"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item label="环境条件" />
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准温度:" prop="standardTemperature">
              <el-input
                v-model.trim="formInline.standardTemperature"
                placeholder="标准温度℃"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准湿度:" prop="standardHumidity">
              <el-input
                v-model.trim="formInline.standardHumidity"
                placeholder="标准湿度%"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="有效日期:">
              <el-date-picker
                type="datetime"
                style="width: 100%;"
                placeholder="请选择有效日期"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD h:m:s"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书编号:">
              <el-select
                clearable
                placeholder="证书编号"
                size="default"
                style="width: 100%;"
                disabled
              >
                <el-option
                  v-for="item in standardManagerStateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发证单位:">
              <el-input placeholder="发证单位" disabled class="full-width-input" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发证日期:">
              <el-date-picker
                type="datetime"
                placeholder="请选择发证日期"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD h:m:s"
                style="width: 100%;"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="3">
            <el-form-item label="附件:">
              <el-upload
                v-model:file-list="fileList"
                enctype="multipart/form-data"
                :http-request="uploadQuarterlyEvaluateFile"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
                :on-preview="uploadShow"
                :on-change="handleFileChange"
                :limit="1"
              >
                <el-button :disabled="buttonType === '查看'">
                  上传
                </el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model.trim="formInline.remark"
                style="width: 500px;"
                placeholder="备注"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="header">
        <div class="title">
          标准配套设备更换
        </div>
        <span class="btns">
          <el-button v-if="pageType !== 'detail'" type="primary">
            批量选择
          </el-button>
          <el-button
            v-if="pageType !== 'detail'"
            type="primary"
            @click="addRoow"
          >
            增加行
          </el-button>
          <el-button
            v-if="pageType !== 'detail'"
            type="info"
            @click="removeRow('1')"
          >
            删除行
          </el-button>
        </span>
      </div>
      <el-table
        :data="fromListInfo.applyEquipmentList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
            >
              <template v-if="item.choose" #append>
                <el-button
                  size="small"
                  :disabled="pageType === 'detail'"
                  @click="chooseList(scope.row, scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="header">
        <div class="title">
          申请文档
        </div>
        <span class="btns">
          <el-button v-if="pageType !== 'detail'" type="primary" @click="addRow">
            增加行
          </el-button>
          <el-button
            v-if="pageType !== 'detail'"
            type="info"
            @click="removeRow('2')"
          >
            删除行
          </el-button>
        </span>
      </div>
      <el-table
        :data="fromListInfo.fileList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columnsFiles"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <el-date-picker
              v-if="item.time"
              v-model="scope.row[item.value]"
              type="datetime"
              placeholder="请选择发证日期"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD h:m:s"
            />
            <el-input
              v-else
              v-model="scope.row[item.value]"
              :autofocus="true"
              style="height: 5vh;"
              :placeholder="`${item.text}`"
              class="input"
            >
              <template v-if="item.choose" #append>
                <el-upload
                  v-model:file-list="fileList"
                  enctype="multipart/form-data"
                  :http-request="uploadQuarterlyEvaluateFile"
                  :before-remove="beforeRemove"
                  :on-exceed="handleExceed"
                  :on-preview="uploadShow"
                  :on-change="handleFileChange"
                  :limit="1"
                >
                  <el-button :disabled="pageType === 'detail'" style="line-height: 2.5;">
                    上传
                  </el-button>
                </el-upload>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="pageType === 'detail'" class="header">
        <div class="title">
          审批流程
        </div>
      </div>
    </div>
  </app-container>
  <el-dialog
    v-model="applyShow"
    title="审批操作"
    width="50%"
    :before-close="applyListClose"
  >
    <el-form
      ref="addPersonListForm"
      label-position="left"
      label-width="100px"
      :model="applyList"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="审批意见:">
            <el-radio-group v-model="applyList.select" class="ml-4">
              <el-radio label="1" size="large">
                同意
              </el-radio>
              <el-radio label="2" size="large">
                驳回
              </el-radio>
              <el-radio label="3" size="large">
                拒绝
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="审批结论:">
            <el-input
              v-model="applyList.epilog"
              :rows="4"
              show-word-limit
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="审批人:">
            <el-input
              v-model="applyList.approval"
              placeholder="审批人"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批时间:">
            <el-input
              v-model="applyList.approvalTime"
              style="width: 100%;"
              placeholder="审批时间"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="applyListSubmit">
        提交
      </el-button>
      <el-button type="info" @click="applyListClose">
        取消
      </el-button>
    </template>
  </el-dialog>
  <user-list-dialog ref="userListDialog" @add="confirmPerson" />
</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;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2vh;
  padding: 5px;
  width: 100%;
  height: 6vh;
  background-color: rgb(233 231 231);
}

.info-content {
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
}

.dialog-buts {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

:deep .el-input .el-input--default .el-input--suffix {
  width: 200px !important;
}
</style>
