<!--
  Description: 报警管理-提醒责任人
  Author: 李亚光
  Date: 2024-09-10
 -->
<script lang="ts" setup name="PendingDialog">
import type { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { remindAlarm } from '@/api/home/alarm/current'
import { getUserList } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import { encrypt, decrypt, isEncrypt } from '@/utils/security1'
const emits = defineEmits(['refresh'])
const user = useUserStore()
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
const isOtherUser = ref(false)
const dataForm = ref({
  alarmId: '',
  remindContent: '',
  remindPersonId: '',
  remindPerson: '',
  remindPersonOtherId: '',
  remindPersonOther: '',
  telephone: '',
}) // 表单
const rules: FormRules = {
  remindContent: [{ required: true, message: '提醒内容不能为空', trigger: ['blur', 'change'] }],
  remindPersonOtherId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
  remindPersonId: [{ required: true, message: '提醒人员不能为空', trigger: ['blur', 'change'] }],
} // 前端校验规则

// 重置表单
const resetForm = () => {
  dataForm.value = {
    alarmId: '',
    remindContent: '',
    remindPersonId: '',
    remindPerson: '',
    remindPersonOtherId: '',
    remindPersonOther: '',
    telephone: '',
  }
}

// 初始化对话框
const disabledBtn = ref(false)
const data = ref()
const initDialog = (row: any) => {
  data.value = row
  dialogFormVisible.value = true
  disabledBtn.value = false
  resetForm()
  dataForm.value.alarmId = row.id
  isOtherUser.value = false
  // console.log(row, 'row')
  dataForm.value.remindContent = `${row.ledgerNumber}${row.position}疑似发现${row.alarmMsg},请尽快去现场确认`
}
defineExpose({
  initDialog,
})

// 保存数据
const saveData = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      const data = {
        ...JSON.parse(JSON.stringify(dataForm.value)),
      }
      if (isOtherUser.value) {
        data.remindPerson = ''
        data.remindPersonId = ''
      }
      else {
        data.remindPersonOther = ''
        data.remindPersonOtherId = ''
      }
      disabledBtn.value = true
      remindAlarm(data).then((res) => {
        ElMessage.success('操作成功')
        dialogFormVisible.value = false
        emits('refresh')
        data.value.processStatus = 4
        data.value.processStatusName = '待现场确认'
        disabledBtn.value = false
      }).catch(() => {
        // ElMessage.success('操作成功')
        disabledBtn.value = false
      })
    }
  })
}
const cancel = () => {
  dialogFormVisible.value = false
}
// 字典
const wellUserList = ref([
  {
    name: '其他',
    id: 'other',
  },
]) // 闸井负责人
const userList = ref<any[]>([]) // 用户列表
const fetchDict = () => {
  getUserList({ offset: 1, limit: 9999, deptId: user.deptId }).then((res) => {
    userList.value = res.data.rows.map((item:any) => ({
      ...item,
      name: isEncrypt(item.name) ? decrypt(item.name) : item.name,
      phone: isEncrypt(item.phone) ? decrypt(item.phone) : item.phone,
      email: isEncrypt(item.email) ? decrypt(item.email) : item.email,
    }))
    .map((item: any) => ({
      label: `${item.name}(${item.deptName})`,
      value: item.id,
      id: item.id,
      phone: item.phone,
      name: item.name,
    }))
  })
}
fetchDict()

// 监视提醒人员 是否选择的其他
const selectWellUser = (data: any) => {
  if (data === 'other') {
    isOtherUser.value = true
    // dataForm.value.remindPersonId = ''
    dataForm.value.remindPerson = ''
  }
  else {
    isOtherUser.value = false
  }
}
// 填充手机号等信息
watch([
  () => dataForm.value.remindPersonId,
  () => dataForm.value.remindPersonOtherId,
], (newVal) => {
  if (!newVal[0] && !newVal[1]) {
    return
  }
  // 负责人
  if (newVal[0] && newVal[0] !== 'other') {
    // console.log(newVal)
    // TODO
    // 暂未开发，未提供负责人列表数据
  }
  // 其他人员
  if (newVal[0] === 'other' && newVal[1]) {
    // 填充
    const person = userList.value.filter((item: any) => item.id === newVal[1])
    if (person.length) {
      dataForm.value.remindPersonOther = person[0].name
      dataForm.value.telephone = person[0].phone
    }
  }
}, {
  deep: true,
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="提醒责任人" append-to-body width="30%">
    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="提醒人员" prop="remindPersonId">
            <el-select
              v-model.trim="dataForm.remindPersonId" placeholder="提醒人员"
              :style="`width:${isOtherUser ? '50' : '100'}%`" filterable @change="selectWellUser"
            >
              <el-option v-for="item in wellUserList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
            <el-select
              v-if="isOtherUser" v-model.trim="dataForm.remindPersonOtherId" placeholder="提醒人员"
              style="width: 50%;" filterable
            >
              <el-option v-for="item in userList" :key="item.id" :value="item.id" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系方式" prop="telephone">
            <el-input v-model.trim="dataForm.telephone" type="text" style="width: 100%;" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="提醒内容" prop="remindContent">
            <el-input v-model.trim="dataForm.remindContent" type="textarea" :rows="3" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-loading="disabledBtn" :disabled="disabledBtn" type="primary" @click="saveData">
          确认
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>