<!-- 设备分组信息-编辑 -->
<script lang="ts" setup name="TaskEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import tableList from './tableList.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import { getAdminDept, getUserDept, getUserList } from '@/api/system/user'
import { addTask, cancelTask, delTask, detailTask, getCustomerList, submitTask, updateTask, valiateTask } from '@/api/eqpt/measurementPlan/task'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { SCHEDULE } from '@/utils/scheduleDict'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const statusName = $route.query.statusName as string
const tableRef = ref()
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
  createTime: '',
  createUserId: '',
  createUserName: '',
  customerAddress: '',
  customerId: '',
  customerName: '',
  customerPhone: '',
  customerSampleInfoList: [],
  deliverer: '',
  delivererId: '',
  delivererTel: '',
  id: '',
  isUrgent: '1',
  maintainMajor: '',
  measureCompany: '',
  orderNo: '',
  planDeliverTime: '',
  receiveIllustrate: '',
  receiveStatus: '',
  receiveStatusName: '',
  requireOverTime: '',
  undertakeTime: '',
  undertakerId: '',
  undertakerName: '',
  updateTime: '',
  isOnSiteCheck: '0',
  onSiteCheckTime: '',
  deptId: '',
  orderStatusName: '',
}) // 表单
const checkPhone = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('手机号不能为空'))
  }
  else if (!(/^1[3456789]\d{9}$/.test(value))) {
    callback(new Error('请输入正确手机号'))
  }
  else {
    callback()
  }
}
const rules = ref<FormRules>({
  deliverer: [{ required: true, message: '送检人必填', trigger: ['blur', 'change'] }],
  // customerAddress: [{ required: true, message: '委托方地址必填', trigger: ['blur', 'change'] }],
  // customerPhone: [{ required: true, message: '电话必填', trigger: ['blur', 'change'] }],
  // maintainMajor: [{ required: true, message: '检修专业必填', trigger: ['blur', 'change'] }],
  planDeliverTime: [{ required: true, message: '预计送达时间必选', trigger: ['blur', 'change'] }],
  // requireOverTime: [{ required: true, message: '要求检完时间必选', trigger: ['blur', 'change'] }],
  // isUrgent: [{ required: true, message: '是否加急必选', trigger: ['blur', 'change'] }],
  measureCompany: [{ required: true, message: '检定(校准)单位必填', trigger: ['blur', 'change'] }],
  undertakerName: [{ required: true, message: '承接人必填', trigger: ['blur', 'change'] }],
  undertakeTime: [{ required: true, message: '承接时间必选', trigger: ['blur', 'change'] }],
  customerId: [{ required: true, message: '委托方必选', trigger: ['blur', 'change'] }],
  onSiteCheckTime: [{ required: true, message: '现场检定时间必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 弹窗初始化
const processId = ref()
const isAdmin = ref(false)
const isFirst = ref(true)
const companyList = ref<any[]>([]) // 单位列表
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  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
    ruleForm.value.deptId = userStore.deptId
    // 获取当前用户所在单位
    getUserDept().then((res) => {
      console.log(res.data, '用户所在单位')
      // fullName
      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 }))
        })
        isFirst.value = false
      }
      else {
        isAdmin.value = false
        isFirst.value = false
        setTimeout(() => {
          ruleForm.value.customerId = res.data.id
          ruleForm.value.customerName = res.data.fullName
        })
      }
    })
  }
  else {
    ruleForm.value = JSON.parse($route.query.row as string)
    detailTask({ id: ruleForm.value.id }, $route.query.statusName as string).then((res) => {
      ruleForm.value = res.data.data
      console.log(ruleForm.value, 'rule')
      ruleForm.value.isUrgent = String(res.data.data.isUrgent)
      ruleForm.value.isOnSiteCheck = String(res.data.data.isOnSiteCheck)
      processId.value = ruleForm.value.processId
      if (ruleForm.value.isOnSiteCheck === '1') {
        ruleForm.value.onSiteCheckTime = ruleForm.value.onSiteCheckTime.split(',')
      }
      else {
        ruleForm.value.onSiteCheckTime = ''
      }
      setTimeout(() => {
        isFirst.value = false
      })
    })
  }
}

// 获取是否加急下拉列表
const isUrgentList = ref<{ id: string; value: string; name: string }[]>()
// 送检人列表
const personList = ref<any[]>()
// 检定单位
const measureCompanyList = ref<{ id: string; value: string; name: string }[]>()
// 委托方名录
const customerList = ref<any>([])
const fetchListData = () => {
  getDictByCode('isUrgent').then((res) => {
    isUrgentList.value = res.data
  })
  getUserDept().then((res1) => {
    getUserList({ offset: 1, limit: 99999, deptId: $route.path.includes('detail') ? '' : res1.data.id }).then((res) => {
      personList.value = res.data.rows
    })
  })
  getDictByCode('eqptmeasureCompany').then((res) => {
    measureCompanyList.value = res.data
  })
  getCustomerList().then((res) => {
    customerList.value = res.data.rows
  })
}

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) {
        ruleForm.value.customerAddress = customerList.value.filter((item: any) => item.customerName === name)[0].address
      }
      else {
        ruleForm.value.customerAddress = '/'
      }
    }
    else {
      console.log('非管理员')
      if (customerList.value.filter((item: any) => item.customerName === ruleForm.value.customerName).length) {
        ruleForm.value.customerAddress = customerList.value.filter((item: any) => item.customerName === ruleForm.value.customerName)[0].address
      }
      else {
        ruleForm.value.customerAddress = '/'
      }
    }
  }
})
// 关闭弹窗
const close = () => {
  $router.back()
}
// 新增
// const add = () => {
//   ruleForm.value.customerSampleInfoList = tableRef.value.list
//   addTask(ruleForm.value).then((res) => {
//     ElMessage.success('保存成功')
//     // close()
//   })
// }
// // 编辑
// const update = () => {
//   ruleForm.value.customerSampleInfoList = tableRef.value.list
//   updateTask(ruleForm.value).then((res) => {
//     ElMessage.success('保存成功')
//     // close()
//   })
// }
// const savaData = () => {
//   // 保存方法
//   const save = () => {
//     if (dialogStatus.value === 'create') {
//       add()
//     }
//     else {
//       update()
//     }
//   }
// valiateTask(ruleForm.value).then((res) => {
//   // 调用提示信息
//   if (res.data) {
//     ElMessageBox.confirm(
//         `${res.data}`,
//         '提示',
//         {
//           confirmButtonText: '确认',
//           cancelButtonText: '取消',
//           type: 'warning',
//         },
//     ).then((res) => {
//       save()
//     })
//   }
//   else {
//     save()
//   }
// })
// }
// 保存
// const saveForm1 = async (formEl: FormInstance | undefined) => {
//   if (!formEl) { return }
//   await formEl.validate((valid, fields) => {
//     if (valid && tableRef.value.checkCertificateList()) {
//       if (!tableRef.value.list.length) {
//         ElMessage.warning('请先选择设备')
//         return
//       }
//       ElMessageBox.confirm(
//         '确认保存吗？',
//         '提示',
//         {
//           confirmButtonText: '确认',
//           cancelButtonText: '取消',
//           type: 'warning',
//         },
//       ).then((res) => {
//         savaData()
//       })
//     }
//   })
// }
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
const { proxy } = getCurrentInstance() as any
// const statusName = $route.query.statusName as string
// 同意拒绝
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, data.taskId, data.processId, ruleForm.value.id)
}
// 编辑
const editForm = () => {
  $router.push({
    params: { ...$route.params, type: 'update' },
    query: { ...$route.query },
  })
}
// 提交
const submitId = ref('')
const submitForm = () => {
  if (!submitId.value) {
    ElMessage.warning('请先保存')
    return false
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((_res) => {
    submitTask({ id: submitId.value, formId: SCHEDULE.METERING_TASK_APPROVAL }).then((_res) => {
      ElMessage.success('已提交')
      close()
    })
  })
}
const save = () => {
  if (submitId.value) {
    ruleForm.value.id = submitId.value
  }
  ruleForm.value.customerSampleInfoList = tableRef.value.list
  if (isAdmin.value) {
    ruleForm.value.customerName = companyList.value.filter(item => item.id === ruleForm.value.customerId)[0]?.name
  }
  const data = { ...JSON.parse(JSON.stringify(ruleForm.value)) }
  if (ruleForm.value.isOnSiteCheck === '1') {
    data.onSiteCheckTime = ruleForm.value.onSiteCheckTime.join(',')
  }
  else {
    data.onSiteCheckTime = ''
  }
  updateTask(data).then((res) => {
    submitId.value = res.data
    // close()
    if (statusName === '已取消' || statusName === '未通过') {
      submitForm()
    }
    else {
      ElMessage.success('保存成功')
    }
  })
}
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) => {
          valiateTask(ruleForm.value).then((res) => {
          // 调用提示信息
            if (res.data) {
              ElMessageBox.confirm(
        `${res.data}`,
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then((res) => {
                save()
              })
            }
            else {
              save()
            }
          })
        })
      }
      else {
        ElMessage.warning('请先添加设备')
      }
    }
  })
}
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消此申请吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = JSON.parse($route.query.row as string)
    cancelTask({ id: row.id, processInstanceId: row.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
      // search()
    })
  })
}
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除此记录吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = JSON.parse($route.query.row as string)
    delTask(row.id).then((res) => {
      ElMessage.success('操作成功')
      close()
      // search()
    })
  })
}
const activeName = ref('基本信息')
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 审批弹窗 -->
    <!-- <approval-dialog ref="approvalDialogRef" @on-success="search" /> -->
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page :title="`任务单-${textMap[dialogStatus]}`">
      <!-- <template #btns>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template> -->
      <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)" 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('create') && statusName !== '全部' && statusName !== '草稿箱'">
      <el-radio-group v-model="activeName">
        <el-radio-button label="基本信息">
          基本信息
        </el-radio-button>
        <el-radio-button label="审批详情">
          审批详情
        </el-radio-button>
      </el-radio-group>
    </detail-block-com>
    <template v-if="activeName === '基本信息'">
      <detail-block-com class="container">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :class="$route.path.includes('detail') ? 'isDetail' : ''" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="任务单编号">
                <el-input v-model.trim="ruleForm.orderNo" disabled placeholder="系统自动生成" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人">
                <el-input v-model.trim="ruleForm.createUserName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间">
                <el-input v-model.trim="ruleForm.createTime" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="送检人" prop="deliverer">
                <el-input v-model.trim="ruleForm.deliverer" placeholder="送检人" />
              <!-- <el-select v-model="ruleForm.deliverer" filterable placeholder="送检人" style="width: 100%;">
                <el-option
                  v-for="item in personList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                  <span style="float: left;">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
                </el-option>
              </el-select> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="委托方" prop="customerId">
                <el-input v-if="!isAdmin" v-model.trim="ruleForm.customerName" placeholder="委托方" disabled />
                <el-select v-else 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-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-col :span="6">
            <el-form-item label="电话" prop="customerPhone">
              <el-input v-model.trim="ruleForm.customerPhone" placeholder="委托方电话" />
            </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>
              </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" range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间" class="normal-date" style="width: 100%;"
                  />
                </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-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> -->
          <!-- <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> -->
          </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="customerPhone">
                <el-input v-model.trim="ruleForm.customerPhone" placeholder="委托方电话" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否加急" prop="isUrgent">
                <!-- <el-input v-model.trim="ruleForm.isUrgent" placeholder="是否加急" /> -->
                <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="measureCompany">
                <!-- <el-input v-model.trim="ruleForm.measureCompany" placeholder="检定(校准)单位" disabled /> -->
                <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="maintainMajor">
              <el-input v-model.trim="ruleForm.maintainMajor" placeholder="检修专业" />
            </el-form-item>
          </el-col> -->
          </el-row>
          <el-row v-if="$route.path.includes('detail') && $route.query.statusName === '全部'" :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="任务单状态">
                <el-input v-model.trim="ruleForm.orderStatusName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接收说明">
                <el-input v-model.trim="ruleForm.receiveIllustrate" />
              </el-form-item>
            </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="交接单" prop="undertakeTime">
              <a />
            </el-form-item>
          </el-col> -->
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <table-list ref="tableRef" :data="ruleForm.customerSampleInfoList" :form="ruleForm" :status="dialogStatus" />
      </detail-block-com>
    </template>
    <approval-record-table v-if="activeName === '审批详情'" :process-id="processId" />
  </app-container>
</template>

<style lang="scss" scoped>
.container {
  .isDetail {
    ::v-deep {
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
        content: "";
        display: none;
      }
    }
  }

  .center {
    display: flex;
    align-items: flex-end;
  }
}
</style>