<!-- 智能模型借用编辑 -->
<script lang="ts" setup name="DeviceBorrowEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import deviceList from './deviceList.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import selectDevice from '@/views/tested/device/group/components/selectDevice.vue'
import useUserStore from '@/store/modules/user'
import { getDeptTree, getDeptTreeList, getDeptTreeListByPid } from '@/api/system/dept'
import { cancelBorrow, deleteBorrow, detailBorrow, editBorrow, getFormId, submitBorrow } from '@/api/eqpt/status/borrow'
import { SCHEDULE } from '@/utils/scheduleDict'
import { getAdminDept, getUserDept, getUserDeptSon, getUserList } from '@/api/system/user'
import { toTreeList } from '@/utils/structure'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { getInfoDetail } from '@/api/eqpt/device/info'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const submitId = ref('') // 提交id-保存接口获取
const ruleFormRef = ref<FormInstance>() // from组件
const statusName = $route.query.statusName as string // 审批状态
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
// 表单
const ruleForm = ref({
  approvalNo: '',
  approvalStatus: '',
  approvalStatusName: '',
  approvalTime: '',
  approvalUserId: '',
  approvalUserName: '',
  bizNo: '',
  borrowDeptId: '',
  borrowDeptName: '',
  borrowReason: '',
  companyId: '',
  companyName: '',
  createTime: '',
  decisionItem: '',
  deptId: '',
  deptName: '',
  equipmentCount: '',
  formId: '',
  id: '',
  processId: '',
  relationList: [],
  taskId: '',
  updateTime: '',
})
// 表单1验证规则
const rules = ref<FormRules>({
  companyId: [{ required: true, message: '所在单位必选', trigger: ['blur', 'change'] }],
  deptId: [{ required: true, message: '使用部门必选', trigger: ['blur', 'change'] }],
  borrowReason: [{ required: true, message: '借用原因必填', trigger: ['blur', 'change'] }],
  borrowDeptId: [{ required: true, message: '借用部门必选', trigger: ['blur', 'change'] }],
})
// 弹窗初始化
const isFrist = ref(true)
const isAdmin = ref(false)
// 部门
const deptList = ref<{ id: string; value: string; name: string }[]>([])
// 单位companyId
const companyList = ref<{ id: string; value: string; name: string }[]>([])
// 所有部门单位
const deptAllList = ref<any[]>([])
const fetchDict = () => {
  getDeptTree({ limit: 999999, offset: 1 }).then((res) => {
    deptAllList.value = toTreeList(res.data.list.map((item: any) => ({ ...item, label: item.simpleName, id: item.deptId, value: item.deptId })).filter((item: any) => item.label !== '顶级'))
  })
}
fetchDict()
const initDialog = () => {
  dialogStatus.value = $route.params.type as string || 'detail'
  ruleFormRef.value?.resetFields()
  const fetchDept = () => {
    getUserDept().then((res) => {
      if (res.data.fullName === '顶级' || res.data.version === '1' || res.data.version === 1) {
        isAdmin.value = true
        getAdminDept({}).then((res) => {
          companyList.value = res.data.map((item: any) => ({ id: item.id, value: item.id, name: item.fullName }))
        })
      }
      else {
        isAdmin.value = false
        ruleForm.value.companyId = res.data.id
        ruleForm.value.companyName = res.data.fullName
        ruleForm.value.deptId = userStore.deptId
        ruleForm.value.deptName = userStore.deptName
      }
    })
  }
  if ($route.params.type === 'create') {
    ruleForm.value.approvalTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.value.approvalUserId = userStore.id
    ruleForm.value.approvalUserName = userStore.name
    // 获取当前用户所在单位部门
    fetchDept()
  }
  else {
    const data = JSON.parse($route.query.row as string)
    detailBorrow({ id: data.id }).then((res) => {
      ruleForm.value = res.data
      setTimeout(() => {
        isFrist.value = false
      }, 2000)
      fetchDept()
    })
  }
}
watch(() => ruleForm.value.companyId, (newVal) => {
  if (!$route.path.includes('detail') && !isFrist.value) {
    ruleForm.value.deptId = ''
  }
  if (newVal) {
    getDeptTreeList({ pid: newVal }).then((res) => {
      deptList.value = toTreeList(res.data.map((item: any) => ({ ...item, label: item.name, value: item.id }))) as any
    })
  }
}, {
  deep: true,
  immediate: true,
})
onMounted(() => {
  initDialog()
})

// 关闭弹窗
const close = () => {
  $router.back()
}
const devicelistRef = ref()
const disabledSave = ref(false)
const formId = ref()
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  Promise.all([formEl.validate()]).then(() => {
    if (!devicelistRef.value.list.length) {
      ElMessage.warning('智能模型不能为空')
      return
    }
    ElMessageBox.confirm(
      '确认保存吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(async (res) => {
      disabledSave.value = true
      if (submitId.value) {
        ruleForm.value.id = submitId.value
      }
      const formid = await getFormId(ruleForm.value.deptId)
      formId.value = formid.data
      ruleForm.value.formId = formid.data
      ruleForm.value.relationList = devicelistRef.value.list
      editBorrow(ruleForm.value).then((res) => {
        disabledSave.value = false
        submitId.value = res.data
        if (statusName === '已取消' || statusName === '未通过') {
          // getFormId(submitId.value).then((res) => {
          submitBorrow({ id: submitId.value, formId: formId.value }).then((res) => {
            ElMessage.success('已提交')
            close()
          })
          // })
        }
        else {
          ElMessage.success('保存成功')
        }
      }).catch(() => {
        disabledSave.value = false
      })
    })
    // }
  })
}
// 提交
const submitForm = () => {
  if (submitId.value === '') {
    ElMessage.warning('请先保存')
    return false
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((res) => {
    // getFormId(ruleForm.value.deptId).then((res) => {
    submitBorrow({ id: submitId.value, formId: formId.value }).then((res) => {
      ElMessage.success('已提交')
      close()
    })
    // })
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
// 编辑
const editForm = () => {
  $router.push({
    path: '/borrowpage/update',
    query: { ...$route.query },
  })
  initDialog()
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除借用信息吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    deleteBorrow(ruleForm.value.id).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cancelBorrow({ id: ruleForm.value.id, processInstanceId: ruleForm.value.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, JSON.parse($route.query.row as string).taskId, data.processId, ruleForm.value.id)
}
watch(() => devicelistRef.value?.list, (newVal) => {
  if (newVal) {
    ruleForm.value.equipmentCount = newVal.length
  }
}, {
  deep: true,
})
defineExpose({ ruleForm, apply, editForm, submitForm, saveForm, delForm, print, cancelForm })
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page class="base-info-device" :title="`智能模型借用申请-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, dialogStatus)" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus) && statusName !== '已取消' && statusName !== '未通过'" type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus)" :disabled="disabledSave" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <el-form
      ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" class="form"
      :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
    >
      <detail-block-com>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="文件编号">
              <el-input v-model.trim="ruleForm.approvalNo" disabled placeholder="系统自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在单位" prop="companyId">
              <!-- <el-input v-model.trim="ruleForm.companyName" disabled /> -->
              <el-select v-if="isAdmin" v-model="ruleForm.companyId" filterable placeholder="所在单位" style="width: 100%;">
                <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-input v-else v-model.trim="ruleForm.companyName" :disabled="!($route.path.includes('create') && isAdmin)" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用部门" prop="deptId">
              <!-- <el-input v-model.trim="ruleForm.deptName" disabled /> -->
              <el-input v-if="$route.path.includes('detail') || !isAdmin" v-model.trim="ruleForm.deptName" disabled />
              <el-tree-select
                v-else
                v-model="ruleForm.deptId"
                style="width: 100%;"
                :data="deptList"
                :render-after-expand="false"
                check-strictly
                placeholder="使用部门"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人">
              <el-input v-model.trim="ruleForm.approvalUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请时间">
              <el-input v-model.trim="ruleForm.approvalTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="借用部门" prop="borrowDeptId">
              <!-- <el-input v-model.trim="ruleForm.borrowDeptId" /> -->
              <el-tree-select
                v-model="ruleForm.borrowDeptId"
                :data="deptAllList"
                check-strictly
                :render-after-expand="false"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block-com>
      <detail-block-com>
        <el-row :gutter="24" class="marg">
          <el-col :span="18">
            <el-form-item label="借用原因" prop="borrowReason">
              <el-input v-model.trim="ruleForm.borrowReason" :placeholder="$route.path.includes('create') ? '借用原因' : ''" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="借用数量" prop="equipmentCount">
              <el-input v-model.trim="ruleForm.equipmentCount" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <device-list ref="devicelistRef" :data="ruleForm.relationList || []" />
          </el-col>
        </el-row>
      </detail-block-com>
    </el-form>
    <!-- <approval-record-table v-if="!$route.path.includes('create') && statusName !== '草稿箱'" :process-id="ruleForm.processId" /> -->
    <approval-record-table v-if="!$route.path.includes('create') && statusName !== '草稿箱'" :process-id="ruleForm.processId" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>