<!-- 检定项管理详情 -->
<script lang="ts" setup name="BusinessMeasureItemDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
// import type { IForm } from './item-interface'
import templateDetailFirst from './components/first/templateDetailFirst.vue'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { UploadFile } from '@/api/file'
import showPhoto from '@/components/showPhoto/index.vue'
import { addClassification, getClassificationList, updateClassification } from '@/api/business/measure/classification'
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
const form = ref({
  model: '', // 型号规格
  modelNo: '', // 型号规格编号
  deviceName: '', // 设备名称
  helpInstruction: '', // 辅助字段
  helpFieldInstruction: '', // 辅助字段说明
  deviceType: '', // 设备分类（检校分类）
  deviceTypeName: '', // 设备分类（检校分类）名称
  itemCategoryId: '', // 设备检定项分类id
  itemCategoryName: '', // 设备检定项分类
  belongStandardEquipment: '', // 检校标准装置(字典code)
  belongStandardEquipmentName: '',	// 检校标准装置(字典value)
  checkCycle: 0, // 检定周期
})
const appearanceFunctionCheck = ref(true) // 外观及功能检查
const indicationError = ref(true) // 示值误差

// 校验规则
const rules = ref({
  measureCategory: [{ required: true, message: '检校类别不能为空', trigger: ['blur', 'change'] }],
  technologyFile: [{ required: true, message: '依据技术文件不能为空', trigger: ['blur', 'change'] }],
  labLocation: [{ required: true, message: '地点不能为空', trigger: ['blur', 'change'] }],
  labX: [{ required: true, message: '西昌实验室名字不能为空', trigger: ['blur', 'change'] }],
  labH: [{ required: true, message: '海口实验室名字不能为空', trigger: ['blur', 'change'] }],
})

// -------------------------------------------字典------------------------------------------
const deviceTypeList = ref<dictType[]>([])// 设备分类
const standardList = ref<dictType[]>([])// 检校标准装置
const measureCategoryList = ref<dictType[]>([])// 检校类别
const labXList = ref<dictType[]>([])// 西昌实验室
const labHList = ref<dictType[]>([])// 海口实验室

function getDict() {
  // 检校类别
  getDictByCode('measureCategory').then((response) => {
    measureCategoryList.value = response.data
  })
  // 设备分类
  getDictByCode('eqptDeviceType').then((response) => {
    deviceTypeList.value = response.data
  })
  // 检校标准装置
  getDictByCode('bizStandardEquipmentType').then((response) => {
    standardList.value = response.data
  })
  // 西昌实验室
  labXList.value = [{
    id: '1',
    value: '1',
    name: '电力实验室',
  },
  {
    id: '2',
    value: '2',
    name: '无线电实验室',
  },
  {
    id: '3',
    value: '2',
    name: '无线电实验室',
  },
  ]
  // 海口实验室
  labHList.value = [{
    id: '1',
    value: '电学实验室',
    name: '电学实验室',
  },
  {
    id: '2',
    value: '2',
    name: '压力检测实验室',
  },
  ]
}
// ----------------------------------路由参数------------------------------------------------
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 itemList = ref<{ id: string; name: string }[]>([]) // 检定项分类列表
// 获取检校标准装置
const fetchItemList = (deviceType = '', belongStandardEquipment = '') => {
  const requestParams = {
    belongStandardEquipment, // 检校标准装置
    categoryName: '', // 检定项分类名称
    categoryNo: '', // 检定项分类编号
    deviceType, // 设备分类
    measureCategory: '', // 检校类别
    limit: 999999,
    offset: 1,
  }
  getClassificationList(requestParams).then((response) => {
    itemList.value = response.data.rows.map((item: { categoryName: string; id: string }) => {
      return {
        name: item.categoryName, // 检定项分类名称
        id: item.id,
      }
    })
  })
}

// -------------------------------------------文件上传--------------------------------------
const fileRef = ref() // 文件上传input
/**
 * 删除附件
 * @param index 索引
 */
const delFile = (index: number) => {
  form.value.technologyFileArr.splice(index, 1)
  form.value.technologyFileArr = form.value.technologyFileArr.map((item: any) => {
    return item
  })
}

const onFileChange = (event: any) => {
  // 原生上传
  const files = event.target.files // 上传的文件列表
  if (files.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    for (var i = 0; i < files.length; i++) {
      fd.append('multipartFile', files[i])
    }
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        res.data.forEach((item: string) => {
          form.value.technologyFileArr.push(item)
        })
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        loading.close()
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

// ------------------------------------------------------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 保存
const save = () => {
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      const labLocation = form.value.labX + form.value.labH
      // =======================依据的技术文件用分号隔开=========================
      let tempFile = ''
      form.value.technologyFileArr.forEach((item: any, index: number) => {
        if (index === form.value.technologyFileArr.length - 1) { // 最后一个
          tempFile += `${item}`
        }
        else {
          tempFile += `${item};`
        }
      })
      console.log(tempFile)

      form.value.technologyFile = tempFile
      // ======================================================================
      if (pageType.value === 'add') { // 新建
        addClassification({ ...form.value, labLocation }).then((res) => {
          ElMessage.success('保存成功')
          form.value.categoryNo = res.data.categoryNo // 检定项分类编号
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateClassification({ ...form.value, id: infoId.value, labLocation }).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// -------------------------------------钩子-----------------------------------------------------

onMounted(async () => {
  fetchItemList() // 获取设备检定项分类
  getDict()
  if (pageType.value !== 'add') {
    form.value = { ...$route.query as any }
    form.value.labLocation = []

    if ($route.query.labX) {
      form.value.labLocation.push('西昌')
    }
    if ($route.query.labH) {
      form.value.labLocation.push('海口')
    }
    form.value.technologyFileArr = form.value.technologyFile.split(';')
  }
})
</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 type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="120"
        label-position="right"
        :rules="rules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="型号规格编号:" prop="modelNo">
              <el-input v-model="form.modelNo" class="full-width-input" :disabled="pageType !== 'add'" placeholder="型号规格编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称:" prop="deviceName">
              <el-input v-model="form.deviceName" class="full-width-input" :disabled="pageType !== 'add'" placeholder="设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号规格:" prop="model">
              <el-input v-model="form.model" class="full-width-input" :disabled="pageType !== 'add'" placeholder="型号规格" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="辅助字段:" prop="helpInstruction">
              <el-input v-model="form.helpInstruction" class="full-width-input" :disabled="pageType !== 'add'" placeholder="辅助字段" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅助字段说明:" prop="helpInstruction">
              <el-input v-model="form.helpInstruction" type="textarea" autosize class="full-width-input" :disabled="pageType === 'detail'" placeholder="辅助字段" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备分类:" prop="deviceType">
              <el-select
                v-model="form.deviceType"
                placeholder="设备分类"
                class="short-input"
                filterable
                disabled
              >
                <el-option v-for="item in deviceTypeList" :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="categoryName">
              <!-- <el-input v-model="form.categoryName" class="full-width-input" disabled placeholder="设备检定项分类" /> -->
              <el-select
                v-model="form.itemCategoryId"
                placeholder="设备检定项分类"
                filterable
                style="width: 400px;"
                disabled
              >
                <el-option v-for="item in itemList" :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="checkCycle">
              <el-input-number
                v-model="form.checkCycle"
                :placeholder="pageType === 'detail' ? '' : '请输入检定周期'"
                disabled
                class="full-width-input"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="检定项">
      <el-checkbox v-model="appearanceFunctionCheck">
        外观及功能检查
      </el-checkbox>
      <el-checkbox v-model="indicationError" disabled>
        示值误差
      </el-checkbox>
      <template-detail-first />
    </detail-block>
  </app-container>
</template>

<style lang="scss" scoped>
.link {
  text-decoration: underline;
  color: #3d7eff;
  cursor: pointer;
}

.file-area {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #60627f;
  margin-bottom: 10px;
  margin-left: 40px;
  white-space: nowrap;

  .tech-file {
    display: flex;
    align-items: center;
    margin-left: 20px;

    .file-text {
      margin-right: 10px;
    }
  }
}
</style>