<!-- 标准装置台账信息 基本信息 -->
<script name="StandardBookBasic" lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import type { IForm, ITechFiles } from '../book-interface'
import selectBuildStandardDialog from '../dialog/selectBuildStandardDialog.vue'
import selectTechFiles from '../dialog/selectTechFiles.vue'
import { getDictByCode } from '@/api/system/dict'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import useUserStore from '@/store/modules/user'
import type { deptType, dictType } from '@/global'
import { getDeptTreeList } from '@/api/system/dept'
import { getUserList } from '@/api/system/user'
import showPhoto from '@/components/showPhoto/index.vue'
import { UploadFile } from '@/api/file'
import { toTreeList } from '@/utils/structure'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { isNumber } from '@/utils/validate'

defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    default: 'detail',
  },
})
const user = useUserStore() // 用户信息
const form: Ref<IForm> = ref({ // 基本信息表单
  approveType: '', // 审批类型
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名称
  createTime: '', // 创建时间
  standardNo: '', // 标准代码
  standardName: '', // 标准装置名称
  storageLocation: '', // 存放地点code
  storageLocationName: '', // 存放地点名称
  major: '', // 所属专业code
  majorName: '', // 所属专业名称
  buildStandardId: '', // 建标申请表id
  buildStandardName: '', // 建标名称
  buildStandardDate: '', // 建标日期
  standardCertNo: '', // 计量标准证书号
  lastReviewDate: '', // 最近复查日期
  deptId: '', // 标准所在部门id
  deptName: '', // 标准所在部门名称
  directorId: '', // 标准负责人id
  directorName: '', // 标准负责人id
  manageStatus: '', // 使用状态code
  manageStatusName: '', // 使用状态名称
  buildStandardReportFile: '', // 建标报告
  examTableFile: '', // 考核表
  standardCertFile: '', // 标准证书
  technologyRelationList: [], // 所依据的技术文件
})
const rules = reactive<FormRules>({ // 表单验证规则
  standardName: [{ required: true, message: '标准装置名称不能为空', trigger: ['blur', 'change'] }],
  storageLocation: [{ required: true, message: '存放地点不能为空', trigger: ['blur', 'change'] }],
  major: [{ required: true, message: '所属专业不能为空', trigger: ['blur', 'change'] }],
  buildStandardId: [{ required: true, message: '建标申请不能为空', trigger: ['blur', 'change'] }],
  standardCertNo: [{ required: true, message: '计量标准证书号不能为空', trigger: ['blur', 'change'] }],
  lastReviewDate: [{ required: true, message: '最近复查日期不能为空', trigger: ['blur', 'change'] }],
  deptId: [{ required: true, message: '标准所在部门不能为空', trigger: ['blur', 'change'] }],
  directorId: [{ required: true, message: '标准负责人不能为空', trigger: ['blur', 'change'] }],
  manageStatus: [{ required: true, message: '使用状态不能为空', trigger: ['blur', 'change'] }],
})
// ------------------------------------------字典----------------------------------------------
const storageLocationList = ref<dictType[]>([]) // 存放地点
const approvalTypeList = ref<dictType[]>([]) // 审批类型
const majorList = ref<dictType[]>([]) // 所属专业
const useDeptList = ref<deptType[]>([]) // 所属部门列表
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const manageStatusList = ref<dictType[]>([]) // 使用状态

/**
 * 获取字典
 */
function getDict() {
  // 存放地点
  getDictByCode('storageLocation').then((response) => {
    storageLocationList.value = response.data
  })
  // 审批类型
  getDictByCode('approvalType').then((response) => {
    approvalTypeList.value = response.data
  })
  // 所属专业
  getDictByCode('major').then((response) => {
    majorList.value = response.data
  })
  // 获取部门列表
  getDeptTreeList().then((res) => {
    // 转成树结构
    useDeptList.value = toTreeList(res.data, '0', true)
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
  // 使用状态
  getDictByCode('').then((response) => {
    manageStatusList.value = response.data
  })
}
// ------------------------------------------建标申请-------------------------------------------
const selectBuildStandardRef = ref() // 建标申请ref
// 点击选择建标申请
const selectBuildStandard = () => {
  selectBuildStandardRef.value.initDialog()
}
// 选择好建标申请
const confirmSelectBuildStandard = () => {

}
// -------------------------------------------文件上传--------------------------------------
// 文件上传
const fileRefBuildStandardReport = ref() // 建标报告ref
const fileRefExamTableFile = ref() // 考核表ref
const fileRefStandardCertFile = ref() // 标准证书ref
/**
 * 建标报告上传文件，在 Input 值改变时触发
 * @param event 事件对象
 */
const onBuildStandardReportFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.buildStandardReportFile = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
//
const onExamTableFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.examTableFile = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const onStandardCertFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        form.value.standardCertFile = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const upload = (fileRef: any) => {
  fileRef.click()
}
// -----------------------------------------依据的技术文件------------------------------
const checkoutFilesList = ref<ITechFiles[]>([]) // 技术文件多选
const selectFliesIndex = ref() // 技术文件表格-点击选择的index---点击第几行
const techFileRef = ref() // 所依据的技术文件组件ref
// 所依据的技术文件表头
const techFilesColumns = [
  { text: '文件编号', value: 'fileNo', required: true, align: 'center', width: '240' },
  { text: '文件名称', value: 'fileName', required: true, align: 'center' },
  { text: '备注', value: 'remark', align: 'center' },
]

// 点击技术文件增加行
const addFilesRow = () => {
  const index = form.value.technologyRelationList.findIndex((item: ITechFiles) => !item.technologyFileId && !item.technologyFileName)
  if (index !== -1) {
    ElMessage.warning('请完善上一条文件信息')
    return
  }
  form.value.technologyRelationList.push({
    remark: '', //	备注
    standardNo: '', //	标准代码
    technologyFileId: '', //	依据的技术文件id
    technologyFileName: '', //	依据的技术文件名称
  })
}

// 技术文件表格多选
const handleSelectionChangeFiles = (e: any) => {
  checkoutFilesList.value = e
}

// 点击技术文件删除行
const delFilesRow = () => {
  if (checkoutFilesList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutFilesList.value.forEach((item: ITechFiles) => {
      form.value.technologyRelationList.forEach((element: ITechFiles, index: number) => {
        if (element.technologyFileId === item.technologyFileId) {
          form.value.technologyRelationList.splice(index, 1)
        }
      })
    })
  }
}

// 点击选择文件编号
const handleClickFiles = (index: number) => {
  selectFliesIndex.value = index
  techFileRef.value.initDialog()
}

// 选好文件
const confirmSelectTechFile = (val: any) => {
  if (val && val.length) {
    const index = form.value.technologyRelationList.findIndex((i: ITechFiles) => val[0].technologyFileId === i.technologyFileId)
    if (index !== -1) {
      ElMessage.warning('此文件已添加过')
      return
    }
    form.value.technologyRelationList.splice(selectFliesIndex.value, 1, val[0])
  }
}
// ------------------------------------------环境条件----------------------------------------
const environmentalConditionsColumns = [ // 环境条件表头
  { text: '温度(℃)', value: 'temperature', align: 'center', required: true },
  { text: '相对湿度(%)', value: 'humidity', align: 'center', required: true },
  { text: '电源电压(v)', value: 'voltage', align: 'center', required: true },
  { text: '电源频率(Hz)', value: 'powerFrequency', align: 'center', required: true },
  { text: '周围环境', value: 'surroundEnvironment', align: 'center', required: true },
  { text: '电磁场', value: 'electricField', align: 'center', required: true },
]
const environmentalConditionsList = [{
  temperature: '', // 温度(℃)
  humidity: '', // 相对湿度
  voltage: '', // 电源电压
  powerFrequency: '', // 电源频率
  surroundEnvironment: '', // 周围环境
  electricField: '', // 电磁场
  editable: true, // 是否可编辑
}]
// -------------------------------------------技术指标----------------------------------------
const technicalIndexColumns = [ // 环境条件表头
  { text: '测量范围', value: 'measureRange', align: 'center', required: true },
  { text: '不确定度或允许误差极限或准确度等级', value: 'uncertainty', align: 'center', required: true },
  { text: '检定或校准项目', value: 'measureItem', align: 'center', required: true },
]
const technicalIndexList = [{
  measureRange: '', // 测量范围
  uncertainty: '', // 不确定度或允许误差极限或准确度等级
  measureItem: '', // 检定或校准项目
  editable: true, // 是否可编辑
}]
// -------------------------------------------钩子------------------------------------------------

onMounted(async () => {
  await getDict() // 获取字典
  form.value.createUserId = user.id// 创建人id
  form.value.createUserName = user.name // 创建人
  form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
})
</script>

<template>
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="审批类型:">
            <el-select
              v-model="form.approveType"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : '请选择审批类型'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option v-for="item of approvalTypeList" :key="item.value" :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="form.createUserName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="form.createTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="标准代码:" prop="standardNo">
            <el-input v-model="form.standardNo" disabled placeholder="系统自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标准装置名称:" prop="standardName">
            <el-input
              v-model.trim="form.standardName"
              :placeholder="pageType === 'detail' ? '' : '请输入标准装置名称'"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="存放地点:" prop="storageLocation">
            <el-select
              v-model="form.storageLocation"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : '请选择存放地点'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option v-for="item of storageLocationList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属专业:" prop="major">
            <el-select
              v-model="form.major"
              filterable
              :placeholder="pageType === 'detail' ? ' ' : '请选择所属专业'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option v-for="item of majorList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建标申请:" prop="buildStandardId">
            <el-input
              v-model.trim="form.buildStandardId"
              :placeholder="pageType === 'detail' ? ' ' : '请选择建标申请'"
              disabled
              class="full-width-input"
              clearable
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button
                  size="small"
                  @click="selectBuildStandard"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建标名称:" prop="buildStandardName">
            <el-input v-model="form.buildStandardName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建标日期:" prop="buildStandardDate">
            <el-date-picker
              v-model="form.buildStandardDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计量标准证书号:" prop="standardCertNo">
            <el-input
              v-model.trim="form.standardCertNo"
              :placeholder="pageType === 'detail' ? '' : '请输入计量标准证书号'"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最近复查日期:" prop="lastReviewDate">
            <el-date-picker
              v-model="form.lastReviewDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="pageType === 'detail' ? ' ' : '请选择最近复查日期'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标准所在部门" prop="deptId">
            <dept-select v-model="form.deptId" :data="useDeptList" :placeholder="pageType === 'detail' ? ' ' : '请选择标准所在部门'" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标准负责人" prop="directorId">
            <el-select
              v-model.trim="form.directorId"
              placeholder="请选择标准负责人"
              filterable
              class="full-width-input"
            >
              <el-option v-for="item in userList" :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="manageStatus">
            <el-select
              v-model.trim="form.manageStatus"
              clearable
              :placeholder="pageType === 'detail' ? '' : '请选择使用状态'"
              size="default"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option
                v-for="item in manageStatusList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="建标报告:">
            <show-photo v-if="form.buildStandardReportFile" :minio-file-name="form.buildStandardReportFile" />
            <span v-else-if="pageType === 'detail'">无</span>
            <input v-show="pageType === ''" ref="fileRefBuildStandardReport" type="file" @change="onBuildStandardReportFileChange">
            <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.buildStandardReportFile === '' ? '0px' : '20px' }" @click="upload(fileRefBuildStandardReport)">
              {{ form.buildStandardReportFile === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="考核表:">
            <show-photo v-if="form.examTableFile" :minio-file-name="form.examTableFile" />
            <span v-else-if="pageType === 'detail'">无</span>
            <input v-show="pageType === ''" ref="fileRefExamTableFile" type="file" @change="onExamTableFileChange">
            <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.examTableFile === '' ? '0px' : '20px' }" @click="upload(fileRefExamTableFile)">
              {{ form.examTableFile === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="标准证书:">
            <show-photo v-if="form.standardCertFile" :minio-file-name="form.standardCertFile" />
            <span v-else-if="pageType === 'detail'">无</span>
            <input v-show="pageType === ''" ref="fileRefStandardCertFile" type="file" @change="onStandardCertFileChange">
            <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.standardCertFile === '' ? '0px' : '20px' }" @click="upload(fileRefStandardCertFile)">
              {{ form.standardCertFile === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>

  <detail-block title="依据的技术文件">
    <template v-if="pageType !== 'detail'" #btns>
      <el-button type="primary" @click="addFilesRow">
        增加行
      </el-button>
      <el-button type="info" @click="delFilesRow">
        删除行
      </el-button>
    </template>
    <el-table
      :data="form.technologyRelationList"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChangeFiles"
    >
      <el-table-column
        v-if="pageType !== 'detail'"
        type="selection"
        width="38"
      />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in techFilesColumns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        :width="item.width"
        align="center"
      >
        <template #header>
          <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template
          v-if="item.text === '文件编号' && pageType !== 'detail'"
          #default="scope"
        >
          <el-input
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            class="input"
            disabled
          >
            <template #append>
              <el-button
                v-if="pageType !== 'detail'"
                size="small"
                @click="handleClickFiles(scope.$index)"
              >
                选择
              </el-button>
            </template>
          </el-input>
        </template>
      </el-table-column>
    </el-table>
  </detail-block>

  <detail-block title="环境条件">
    <el-table
      :data="environmentalConditionsList"
      border
      style="width: 100%;"
    >
      <el-table-column
        v-if="pageType !== 'detail'"
        type="selection"
        width="38"
      />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in environmentalConditionsColumns"
        :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-if="scope.row.editable && item.value === 'surroundEnvironment' || item.value === 'electricField'"
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            class="input"
          />
          <el-input-number v-else-if="scope.row.editable" v-model="scope.row[item.value]" :step="0.1" />
          <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </detail-block>

  <detail-block title="技术指标">
    <el-table
      :data="technicalIndexList"
      border
      style="width: 100%;"
    >
      <el-table-column
        v-if="pageType !== 'detail'"
        type="selection"
        width="38"
      />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in technicalIndexColumns"
        :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-if="scope.row.editable"
            v-model="scope.row[item.value]"
            :placeholder="`${item.text}`"
            class="input"
          />
          <span v-else>{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
  <!-- 选择所依据的技术文件 -->
  <select-tech-files ref="techFileRef" @confirm="confirmSelectTechFile" />
  <!-- 选择建标申请 -->
  <select-build-standard-dialog ref="selectBuildStandardRef" @confirm="confirmSelectBuildStandard" />
</template>