<!-- 延迟/提前送检-编辑 -->
<script lang="ts" setup name="ApplicationEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import planList from './table.vue'
import approvalDialog from './ApprovalDialog.vue'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { SCHEDULE } from '@/utils/scheduleDict'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { cancelApply, delApply, detailApply, editApply, submitApply, valiatePlan } from '@/api/eqpt/measurementPlan/early'
import { getCustomerList } from '@/api/eqpt/measurementPlan/task'
import { getAdminDept, getUserDept } from '@/api/system/user'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件,
// 审批状态 (全部/审批等)
const statusName = $route.query.statusName as string
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// const params = $route.query.approvalType === '0' ? 'ealy' : 'delay'
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
  approvalNo: '', // 申请编号
  approvalName: '', // 申请名称
  createTime: '',
  createUserId: '',
  createUserName: '',
  approvalType: $route.query.approvalType,
  reason: '',
  equipmentList: [],
  id: '',
  delivererTel: '', // 电话
  isUrgent: '1', // 是否加急
  measureCompany: '', // 检定(校准)单位
  deliverer: '', // 送检人
  isOnSiteCheck: '0', // 现场检定  111
  planDeliverTime: '', // 预计送达时间
  requireOverTime: '', // 要求检完时间
  onSiteCheckTime: '', // 现场检定时间  111
  customerId: '', // 单位
  customerName: '', // 单位
  createDeptId: '', // 部门
  createDeptName: '', // 部门
  customerAddress: '',
}) // 表单
const rules = ref<FormRules>({
  reason: [{ required: true, message: '送检原因必填', trigger: ['blur', 'change'] }],
  delivererTel: [{ required: true, message: '电话必填', trigger: ['blur', 'change'] }],
  measureCompany: [{ required: true, message: '检定单位必选', trigger: ['blur', 'change'] }],
  deliverer: [{ required: true, message: '送检人必填', trigger: ['blur', 'change'] }],
  planDeliverTime: [{ required: true, message: '预计送达时间必选', trigger: ['blur', 'change'] }],
  requireOverTime: [{ required: true, message: '要求检完时间必选', trigger: ['blur', 'change'] }],
  onSiteCheckTime: [{ required: true, message: '现场检定时间必选', trigger: ['blur', 'change'] }],
  customerId: [{ required: true, message: '单位必选', trigger: ['blur', 'change'] }],
  createDeptId: [{ required: true, message: '部门必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 弹窗初始化
const processId = ref()
const disabledProcess = ref(false)
const isAdmin = ref(false)
const flag = ref(false)
// 创建单位
const companyList = ref<{ id: string; value: string; name: string }[]>([])
// 委托方名录
const customerList = ref<any>([])
// 获取是否加急下拉列表
const isUrgentList = ref<{ id: string; value: string; name: string }[]>()
// 检定单位
const measureCompanyList = ref<{ id: string; value: string; name: string }[]>()
const fetchListData = async () => {
  const res = await getCustomerList()
  customerList.value = res.data.rows
  getDictByCode('eqptisUrgent').then((res) => {
    isUrgentList.value = res.data
  })
  getDictByCode('eqptmeasureCompany').then((res) => {
    measureCompanyList.value = res.data
  })
}
const deptList = ref<any>([])
const isFirst = ref(true)
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  // 获取当前用户所在单位
  getUserDept().then((res) => {
    flag.value = true
    if ((res.data.fullName === '顶级' || res.data.version === '1' || res.data.version === 1) && userStore.dataSopeType === '1') {
      isAdmin.value = true
      getAdminDept({}).then((res) => {
        companyList.value = res.data.map((item: any) => ({ id: item.id, value: item.id, name: item.fullName }))
        setTimeout(() => {
          isFirst.value = false
        })
      })
    }
    else {
      isAdmin.value = false
      isFirst.value = false
      ruleForm.value.customerId = res.data.id
      ruleForm.value.customerName = res.data.fullName
      ruleForm.value.createDeptId = userStore.deptId
      ruleForm.value.createDeptName = userStore.deptName
      setTimeout(() => {
        isFirst.value = false
      })
    }
    setTimeout(() => {
      flag.value = false
    })
  })
  if ($route.params.type === 'create') {
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.value.createUserId = userStore.id
    ruleForm.value.createUserName = userStore.name

    if ($route.query.approvalType === '0') {
      // 提前送检
      ruleForm.value.approvalName = '提前送检申请'
    }
    else {
      // 延迟送检
      ruleForm.value.approvalName = '延迟送检申请'
    }
  }
  else {
    const data = JSON.parse($route.query.row as string)
    if (data.approvalStatusName === '草稿箱') {
      disabledProcess.value = true
    }
    detailApply(data.id).then((res) => {
      ruleForm.value = res.data
      ruleForm.value.isOnSiteCheck = String(ruleForm.value.isOnSiteCheck)
      ruleForm.value.isUrgent = String(ruleForm.value.isUrgent)
      processId.value = res.data.processId
      if (ruleForm.value.isOnSiteCheck === '1') {
        ruleForm.value.onSiteCheckTime = ruleForm.value.onSiteCheckTime.split(',')
      }
      else {
        ruleForm.value.onSiteCheckTime = ''
      }
    })
  }
}
watch(() => ruleForm.value.customerId, (newVal) => {
  if (newVal) {
    deptList.value = []
    getDeptTreeList({ pid: newVal }).then((res) => {
      deptList.value = toTreeList(res.data.map((item: any) => ({ ...item, label: item.name, value: item.id })))
    })
  }
  if ($route.path.includes('detail') || !isAdmin.value || flag.value || isFirst.value) { return }
  ruleForm.value.createDeptId = ''
})
onMounted(async () => {
  await fetchListData()
  initDialog()
})
// 自动填充委托方地址
watch(() => ruleForm.value.customerId, (newVal) => {
  if (isFirst.value) {
    return
  }
  if (newVal) {
    if (isAdmin.value) {
      console.log('管理员')
      // 委托方名称
      const name = companyList.value.filter(item => item.id === newVal)[0]?.name
      // 寻找委托方地址
      if (customerList.value.filter((item: any) => item.customerName === name).length) {
        const custom = customerList.value.filter((item: any) => item.customerName === name)[0]
        ruleForm.value.customerAddress = custom.address
        ruleForm.value.measureCompany = custom.defaultLab
      }
      else {
        ruleForm.value.customerAddress = '/'
        ruleForm.value.measureCompany = ''
      }
    }
    else {
      console.log('非管理员')
      if (customerList.value.filter((item: any) => item.customerName === ruleForm.value.customerName).length) {
        const custom = customerList.value.filter((item: any) => item.customerName === ruleForm.value.customerName)[0]
        ruleForm.value.customerAddress = custom.address
        ruleForm.value.measureCompany = custom.defaultLab
      }
      else {
        ruleForm.value.customerAddress = '/'
        ruleForm.value.measureCompany = ''
      }
    }
  }
})
// 关闭弹窗
const close = () => {
  // $router.back()
  const params = $route.query.approvalType === '0' ? 'ealypage' : 'meteringdelay'
  $router.push({
    path: `/${params}`,
  })
}
const tableRef = ref()
// 保存
const submitId = ref('')
const disabledSave = ref(false)
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid && tableRef.value.checkCertificateList()) {
      if (tableRef.value.list.length) {
        ElMessageBox.confirm(
          '确认保存吗？',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          },
        ).then((res) => {
          disabledSave.value = true
          ruleForm.value.equipmentList = tableRef.value.list

          if (submitId.value) {
            ruleForm.value.id = submitId.value
          }
          if (isAdmin.value) {
            ruleForm.value.customerName = companyList.value.filter(item => item.id === ruleForm.value.customerId)[0]?.name
          }
          const data = { ...ruleForm.value }
          if (ruleForm.value.isOnSiteCheck === '1') {
            data.onSiteCheckTime = ruleForm.value.onSiteCheckTime.join(',')
          }
          else {
            data.onSiteCheckTime = ''
          }
          editApply(data).then((res) => {
            const submit = (id: string) => {
              submitApply({ id, formId: $route.query.approvalType === '0' ? SCHEDULE.METERING_PLAN_EARLY : SCHEDULE.METERING_PLAN_DEALY }).then((res) => {
                ElMessage.success('已提交')
                close()
              })
            }
            disabledSave.value = false
            submitId.value = res.data
            if (statusName === '已取消' || statusName === '未通过') {
              valiatePlan(ruleForm.value).then((res1) => {
                if (res1.data) {
                  ElMessageBox.confirm(
        `${res1.data}`,
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
                  ).then(() => {
                    submit(res.data)
                  })
                }
                else {
                  submit(res.data)
                }
              })
            }
            else {
              ElMessage.success('保存成功')
            }
          }).catch(() => {
            disabledSave.value = false
          })
        })
      }
      else {
        ElMessage.warning('请先添加设备')
      }
    }
  })
}
// 提交
const submitForm = () => {
  if (!submitId.value) {
    ElMessage.warning('请先保存')
    return false
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((res) => {
    const submit = () => {
      submitApply({ id: submitId.value, formId: $route.query.approvalType === '0' ? SCHEDULE.METERING_PLAN_EARLY : SCHEDULE.METERING_PLAN_DEALY }).then((res) => {
        ElMessage.success('已提交')
        close()
      })
    }
    valiatePlan(ruleForm.value).then((res1) => {
      if (res1.data) {
        ElMessageBox.confirm(
        `${res1.data}`,
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
        ).then(() => {
          submit()
        })
      }
      else {
        submit()
      }
    })
  })
}
// 关闭
const resetForm = (formEl: FormInstance | undefined) => {
  // formEl?.resetFields()
  close()
}
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消此申请吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = JSON.parse($route.query.row as string)
    cancelApply({ id: row.id, processInstanceId: row.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除该申请吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = JSON.parse($route.query.row as string)
    delApply({ id: row.id }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
const activeName = ref('基本信息')
</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="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="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com v-if="$route.path.includes('update')">
      <el-radio-group v-model="activeName">
        <el-radio-button label="基本信息">
          基本信息
        </el-radio-button>
        <el-radio-button label="审批详情" :disabled="disabledProcess">
          审批详情
        </el-radio-button>
      </el-radio-group>
    </detail-block-com>
    <div v-show="activeName === '基本信息'">
      <detail-block-com>
        <el-form
          ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="120px" class="form"
          :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
        >
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="文件编号" prop="approvalNo">
                <el-input v-model.trim="ruleForm.approvalNo" placeholder="系统自动生成" disabled style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单位" prop="customerId">
                <el-select v-if="isAdmin && !$route.path.includes('detail')" v-model="ruleForm.customerId" clearable 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.customerName" placeholder="单位" disabled style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门" prop="createDeptId">
                <el-tree-select
                  v-if="isAdmin && !$route.path.includes('detail')"
                  v-model="ruleForm.createDeptId"
                  style="width: 100%;"
                  :data="deptList"
                  :render-after-expand="false"
                  check-strictly
                  placeholder="部门"
                />
                <el-input v-else v-model.trim="ruleForm.createDeptName" placeholder="部门" disabled style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地址">
                <el-input v-model.trim="ruleForm.customerAddress" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="创建人" prop="createUserName">
                <el-input v-model.trim="ruleForm.createUserName" disabled style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间" prop="createTime">
                <el-date-picker
                  v-model="ruleForm.createTime" type="date" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="请选择创建时间" class="normal-date" style="width: 100%;" disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否现场检定" prop="isOnSiteCheck">
                <el-radio-group v-model="ruleForm.isOnSiteCheck" class="ml-4">
                  <el-radio label="1">
                    是
                  </el-radio>
                  <el-radio label="0">
                    否
                  </el-radio>
                </el-radio-group>
                <span class="isOnSiteCheck">
                  是否计量站前往营区开展现场检定
                </span>
              </el-form-item>
            </el-col>
            <!-- 现场检定- 是 -->
            <template v-if="ruleForm.isOnSiteCheck === '1'">
              <el-col :span="6">
                <el-form-item label="现场检定时间" prop="onSiteCheckTime">
                  <el-date-picker
                    v-model="ruleForm.onSiteCheckTime" type="daterange" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" class="normal-date" style="width: 100%;"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  />
                </el-form-item>
              </el-col>
            </template>
            <!-- 现场检定- 否 -->
            <template v-if="ruleForm.isOnSiteCheck === '0'">
              <el-col :span="6">
                <el-form-item label="预计送达时间" prop="planDeliverTime">
                  <el-date-picker
                    v-model="ruleForm.planDeliverTime" type="date" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" placeholder="预计送达时间" class="normal-date" style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
            </template>
          </el-row>
          <el-row :gutter="24" class="marg">
            <template v-if="ruleForm.isOnSiteCheck === '0'">
              <el-col :span="6">
                <el-form-item label="要求检完时间" prop="requireOverTime">
                  <el-date-picker
                    v-model="ruleForm.requireOverTime" type="date" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" placeholder="要求检完时间" class="normal-date" style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
            </template>
            <el-col :span="6">
              <el-form-item label="送检人" prop="deliverer">
                <el-input v-model.trim="ruleForm.deliverer" placeholder="送检人" style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检定(校准)单位" prop="measureCompany">
                <el-select v-model="ruleForm.measureCompany" filterable placeholder="检定(校准)单位" style="width: 100%;">
                  <el-option v-for="item in measureCompanyList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否加急" prop="isUrgent">
                <!-- <el-select v-model="ruleForm.createUserName" filterable placeholder="是否加急" style="width: 100%;">
                  <el-option value="1" label="是" />
                  <el-option value="0" label="否" />
                </el-select> -->
                <el-select v-model="ruleForm.isUrgent" placeholder="是否加急" style="width: 100%;">
                  <el-option v-for="item in isUrgentList" :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="delivererTel">
                <el-input v-model.trim="ruleForm.delivererTel" placeholder="电话" style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="`${$route.query.approvalType === '0' ? '提前' : '延迟'}送检原因`" prop="reason">
                <el-input v-model.trim="ruleForm.reason" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <plan-list ref="tableRef" :data="ruleForm.equipmentList" :status="$route.params.type as string" />
      </detail-block-com>
    </div>
    <approval-record-table v-if="activeName === '审批详情'" :process-id="processId" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.isOnSiteCheck {
  width: 150%;
  color: red;
  font-weight: 700;
  position: absolute;
  left: -96px;
  top: 22px;
  overflow: hidden; /* 确保超出容器的文本被隐藏 */
  white-space: nowrap; /* 防止文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>