<!-- 周维护、月保养详情公共组件 -->
<script lang="ts" setup name="EquipementResumeWeekMonthDetail">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from '../week-interface'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { addResumeWeekMonthList, getInfo, updateResumeWeekMonthList } from '@/api/equipment/resume/week-month'
const props = defineProps({
  title: {
    type: String,
    default: '周维护',
  },
  pageType: {
    type: String,
    default: 'detail',
  },
  maintainType: { // 保养类型(1 周维护/2 月保养)
    type: String,
    default: '1',
  },
  infoId: String, // id
})
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 ruleFormRef = ref() // 表单ref
const form = ref<IForm>({
  logNo: '', // 记录编号
  logName: '', // 记录名称
  createUserId: '', // 记录人id
  createUserName: '', // 记录人
  createTime: '', // 记录时间
  deptId: '', // 记录部门id
  deptName: '', // 记录部门
  dustAbnormalReason: '', // 除尘除潮不正常原因
  appearanceAbnormalReason: '', //  外观检查不正常原因
  workAbnormalReason: '', //  工作正常性检查不正常原因
  performanceAbnormalReason: '', //  性能测试不正常原因
  attachmentAbnormalReason: '', //  备附件和资料检查不正常原因
  checkResult: '', //  检查结果
  remark: '', // 备注
})
// 校验规则
const formRules = ref({
  logName: [{ required: true, message: '记录名称不能为空', trigger: ['blur', 'change'] }],
})
const loading = ref(false)
// -------------------------------------------表格----------------------------------------------
const columns = ref([ // 表头
  { text: '维护项目', value: 'item', align: 'center' },
  { text: '内容', value: 'content', align: 'center' },
  { text: '要求', value: 'require', align: 'center' },
  { text: '方法', value: 'method', align: 'center' },
  { text: '检查结果', value: 'result', align: 'center', required: true, width: '180' },
  { text: '试验装备管理使用档案填写内容', value: 'reason', align: 'center' },
])
const list = ref([
  {
    id: '1',
    item: '除尘除潮',
    content: '对设备表面进行除尘、清洁、加点除潮',
    require: '无积尘、无受潮',
    method: '用拧干的湿毛巾对标准设备进行擦拭。设备加电',
    result: '1',
    normalContent: '除尘、清洁、设备加电除潮',
    reason: '',
  },
  {
    id: '2',
    item: '外观检查',
    content: '检查标准设备外观和状态标识',
    require: '1）外观完整。连接头安装牢固，设备无影响正常工作的机械损伤；\n2）各按键、开关、旋钮旋转灵活，定位准确。连接器应安装牢固，设备无影响正常工作的机械损伤。 \n3）状态标识清晰、完好',
    method: '目视、手动检查。不满足要求时查找原因或更换状态标识',
    result: '1',
    normalContent: '外观良好',
    reason: '',
  },
  {
    id: '3',
    item: '工作正常性检查',
    content: '检查标准设备各功能,能否正常工作',
    require: '1）控制开关通断分明，转换清晰。\n2）相应的指示灯应发亮，显示功能正常',
    method: '1）调节各按钮、开关、旋钮\n2）观察相应的指示灯是否发亮、显示功能是否正常',
    result: '1',
    normalContent: '工作正常性检查正常',
    reason: '',
  },
  {
    id: '4',
    item: '性能测试',
    content: '检查测量标准功能是否正常,',
    require: '1）系统自检正常\n2）校准因子测试',
    method: '设备开机启动正常\n2）测试功率计功率因子',
    result: '1',
    normalContent: '维护正常，校准因子测试正常',
    reason: '',
  },
  {
    id: '5',
    item: '备附件和资料检查',
    content: '1）标准档案一套',
    require: '1）备附件和资料是否齐全',
    method: '1）对照档案目录，检查资料是否齐全',
    result: '1',
    normalContent: '备附件和资料齐全',
    reason: '',
  },
]) // 维护保养信息

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

// 导出word
const exportWord = () => { ElMessage.info('敬请期待') }

// 导出pdf
const exportPdf = () => { ElMessage.info('敬请期待') }

// 打印
const print = () => { ElMessage.info('敬请期待') }

// 点击编辑按钮
const edit = () => {
  pageType.value = 'edit'
}

// 保存
const save = () => {
  if (!useCheckList(list.value, columns.value, '维护保养信息', 'reason', 'result', '0')) {
    return false
  }
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      let checkResult // 检查结果
      const index = list.value.findIndex(item => item.result === '0')
      if (index !== -1) {
        checkResult = '2'
      }
      else {
        checkResult = '1'
      }
      const params = {
        ...form.value,
        id: props.infoId,
        checkResult, // 检查结果，1全部正常、2不正常
        maintainType: props.maintainType, // 类型 1周维护、2月保养
        dustAbnormalReason: list.value[0].result === '0' ? list.value[0].reason : '', // 除尘除潮不正常原因
        appearanceAbnormalReason: list.value[1].result === '0' ? list.value[1].reason : '', //  外观检查不正常原因
        workAbnormalReason: list.value[2].result === '0' ? list.value[2].reason : '', //  工作正常性检查不正常原因
        performanceAbnormalReason: list.value[3].result === '0' ? list.value[3].reason : '', //  性能测试不正常原因
        attachmentAbnormalReason: list.value[4].result === '0' ? list.value[4].reason : '', //  备附件和资料检查不正常原因
      }
      // 新建
      if (pageType.value === 'add') { // 新建
        addResumeWeekMonthList(params).then((res) => {
          ElMessage.success('保存成功')
          form.value.logNo = res.data.logNo // 记录表单号
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateResumeWeekMonthList(params).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// -------------------------------------------获取详情信息--------------------------------------------------
// 获取详情信息
const fetchInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getInfo({ id: props.infoId! }).then((res) => {
    form.value = res.data

    list.value = [
      {
        id: '1',
        item: '除尘除潮',
        content: '对设备表面进行除尘、清洁、加点除潮',
        require: '无积尘、无受潮',
        method: '用拧干的湿毛巾对标准设备进行擦拭。设备加电',
        result: res.data.dustAbnormalReason ? '0' : '1',
        normalContent: '除尘、清洁、设备加电除潮',
        reason: res.data.dustAbnormalReason,
      },
      {
        id: '2',
        item: '外观检查',
        content: '检查标准设备外观和状态标识',
        require: '1）外观完整。连接头安装牢固，设备无影响正常工作的机械损伤；\n2）各按键、开关、旋钮旋转灵活，定位准确。连接器应安装牢固，设备无影响正常工作的机械损伤。 \n3）状态标识清晰、完好',
        method: '目视、手动检查。不满足要求时查找原因或更换状态标识',
        result: res.data.appearanceAbnormalReason ? '0' : '1',
        normalContent: '外观良好',
        reason: res.data.appearanceAbnormalReason,
      },
      {
        id: '3',
        item: '工作正常性检查',
        content: '检查标准设备各功能,能否正常工作',
        require: '1）控制开关通断分明，转换清晰。\n2）相应的指示灯应发亮，显示功能正常',
        method: '1）调节各按钮、开关、旋钮\n2）观察相应的指示灯是否发亮、显示功能是否正常',
        result: res.data.workAbnormalReason ? '0' : '1',
        normalContent: '工作正常性检查正常',
        reason: res.data.workAbnormalReason,
      },
      {
        id: '4',
        item: '性能测试',
        content: '检查测量标准功能是否正常,',
        require: '1）系统自检正常\n2）校准因子测试',
        method: '设备开机启动正常\n2）测试功率计功率因子',
        result: res.data.performanceAbnormalReason ? '0' : '1',
        normalContent: '维护正常，校准因子测试正常',
        reason: res.data.performanceAbnormalReason,
      },
      {
        id: '5',
        item: '备附件和资料检查',
        content: '1）标准档案一套',
        require: '1）备附件和资料是否齐全',
        method: '1）对照档案目录，检查资料是否齐全',
        result: res.data.attachmentAbnormalReason ? '0' : '1',
        normalContent: '备附件和资料齐全',
        reason: res.data.attachmentAbnormalReason,
      },
    ]

    loading.close()
  })
}

watch(() => props.pageType, (newVal) => {
  pageType.value = newVal
}, { immediate: true })

onMounted(async () => {
  form.value.createUserId = user.id// 创建人
  form.value.createUserName = user.name // 创建人名字
  form.value.deptId = user.deptId // 记录人部门id
  form.value.deptName = user.deptName // 记录人部门
  form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 记录时间
  if (pageType.value !== 'add') {
    fetchInfo()
  }
})
</script>

<template>
  <div class="week-month-tenplate-detail">
    <app-container v-loading="loading">
      <detail-page :title="`${props.title}-${textMap[pageType]}`">
        <template #btns>
          <el-button v-if="pageType === 'detail'" type="primary" @click="exportWord">
            导出word
          </el-button>
          <el-button v-if="pageType === 'detail'" type="primary" @click="exportPdf">
            导出pdf
          </el-button>
          <el-button v-if="pageType === 'detail'" type="primary" @click="print">
            打印
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
            保存
          </el-button>
          <el-button v-if="pageType === 'detail'" type="primary" @click="edit">
            编辑
          </el-button>
          <el-button type="info" @click="close">
            关闭
          </el-button>
        </template>
        <el-form
          ref="ruleFormRef"
          :model="form"
          label-width="120"
          label-position="right"
          :rules="formRules"
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="记录编号:" prop="logNo">
                <el-input v-model="form.logNo" class="full-width-input" disabled placeholder="系统自动生成" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="记录名称:" prop="logName">
                <el-input v-model="form.logName" class="full-width-input" :disabled="pageType === 'detail'" placeholder="请输入记录名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="记录部门:" prop="deptName">
                <el-input v-model="form.deptName" class="full-width-input" disabled placeholder="记录部门" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="记录人:" prop="createUserName">
                <el-input
                  v-model="form.createUserName"
                  class="full-width-input"
                  :placeholder="pageType === 'detail' ? '' : '记录人'"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="记录时间:" prop="createTime">
                <el-date-picker
                  v-model="form.createTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  class="full-width-input"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="备注:" prop="remark">
                <el-input
                  v-model="form.remark"
                  class="full-width-input"
                  autosize
                  type="textarea"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-page>
      <detail-block title="维护保养信息">
        <el-table
          ref="techRef"
          :data="list"
          border
          style="width: 100%;"
        >
          <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"
            :width="item.width"
            align="center"
          >
            <template #header>
              <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
            </template>
            <template #default="scope">
              <el-radio-group v-if="pageType !== 'detail' && item.value === 'result'" v-model="scope.row[item.value]" :disabled="pageType === 'detail'">
                <el-radio label="1">
                  正常
                </el-radio>
                <el-radio label="0">
                  不正常
                </el-radio>
              </el-radio-group>
              <span v-if="pageType === 'detail' && item.value === 'result'">{{ scope.row.result === '1' ? '正常' : scope.row.result === '0' ? '不正常' : '未知' }}</span>
              <span v-if="scope.row.result === '1' && item.value === 'reason'">{{ scope.row.normalContent }}</span>
              <el-input v-if="pageType !== 'detail' && scope.row.result === '0' && item.value === 'reason'" v-model="scope.row[item.value]" autosize type="textarea" :autofocus="true" :placeholder="`${item.text}`" class="input" />
              <span v-if="item.value !== 'result' && item.value !== 'reason'" style="white-space: pre-wrap;">{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </detail-block>
    </app-container>
  </div>
</template>

<style lang="scss" scoped>
.step {
  line-height: 28px;
  font-size: 20px;
  color: #3d7eff;
  font-weight: bold;
  margin-bottom: 5px;
  width: fit-content;
}
</style>

<style lang="scss">
.week-month-tenplate-detail {
  .el-radio__label {
    display: block !important;
  }
}
</style>