<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>新增安全人员信息</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号码" prop="identityCard">
              <el-input v-model="form.identityCard" placeholder="请输入身份证号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
                <el-option label="男" value="1" />
                <el-option label="女" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="depts"
                :load-options="loadDepts"
                :normalizer="normalizer"
                style="width: 100%"
                placeholder="选择部门"
                value-consists-of="LEAF_PRIORITY"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="job">
              <el-input v-model="form.job" placeholder="请输入职务" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工种" prop="workType">
              <el-input v-model="form.workType" placeholder="请输入工种" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称" prop="jobTitle">
              <el-input v-model="form.jobTitle" placeholder="请输入职称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-select v-model="form.education" placeholder="请选择学历" style="width: 100%">
                <el-option label="小学" value="0" />
                <el-option label="初中" value="1" />
                <el-option label="高中" value="2" />
                <el-option label="大专" value="3" />
                <el-option label="本科" value="4" />
                <el-option label="硕士" value="5" />
                <el-option label="博士" value="6" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业" prop="major">
              <el-input v-model="form.major" placeholder="请输入专业" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急联系人" prop="emergencyContactName">
              <el-input v-model="form.emergencyContactName" placeholder="请输入紧急联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人手机号" prop="emergencyContactPhone">
              <el-input v-model="form.emergencyContactPhone" placeholder="请输入紧急联系人手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入职时间" prop="entryDate">
              <el-date-picker
                v-model="form.entryDate"
                type="date"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住地址" prop="permanentAddress">
              <el-input v-model="form.permanentAddress" placeholder="请输入居住地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="安全证书">
          <el-upload
            ref="upload"
            :action="uploadUrl"
            :data="uploadData"
            :headers="uploadHeaders"
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
            list-type="picture-card"
            :auto-upload="false"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="handleCancel">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getDepts } from '@/api/system/dept'
import { getToken } from '@/utils/auth'
import { addPeopleInfo, editPeopleInfo } from '@/api/aqrf/safePersonnel'
import { isvalidPhone } from '@/utils/validate'
export default {
  name: 'AddPersonnel',
  components: { Treeselect },
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: null,
        phone: null,
        identityCard: null, // 身份证号码
        sex: null,
        deptId: null,
        job: null,
        workType: null,
        jobTitle: null, // 职称
        education: null,
        major: null, // 专业
        emergencyContactName: null, // 紧急联系人
        emergencyContactPhone: null, // 紧急联系人手机号
        entryDate: null,
        permanentAddress: null // 居住地址
      },
      depts: [], // 部门数据
      uploadUrl: process.env.VUE_APP_BASE_API + '/api/common/upload', // 上传接口
      uploadData: {
        modelName: 'safe' // 固定参数
      },
      uploadHeaders: {
        'Authorization': getToken()
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', validator: validPhone }],
        identityCard: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
        deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
        job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
        education: [{ required: true, message: '请选择学历', trigger: 'change' }]

      }
    }
  },
  created() {
    this.form = this.$route.query.data ? this.$route.query.data : this.form

    this.getDepts().then(() => {
      // 如果是编辑模式，直接设置部门ID（因为所有数据已加载）
      if (this.form.id && this.form.dept) {
        this.form.deptId = this.form.dept.id
      }
    })
  },
  methods: {
    // 数据格式化，将后端数据转换为 treeselect 需要的格式
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 获取部门数据（智能加载，只加载必要的层级）
    async getDepts() {
      // 获取目标部门ID（如果是编辑模式）
      const targetDeptId = this.form && this.form.dept ? this.form.dept.id : null

      // 先获取所有根部门
      const rootRes = await getDepts({ enabled: true })
      if (rootRes && rootRes.content) {
        this.depts = await this.buildFullDeptTree(rootRes.content, targetDeptId)
      }
      return rootRes
    },
    // 构建完整的部门树（智能加载，只加载必要的层级）
    async buildFullDeptTree(depts, targetDeptId = null) {
      const result = []

      // 如果没有指定目标部门ID，从表单中获取
      if (!targetDeptId && this.form && this.form.dept) {
        targetDeptId = this.form.dept.id
      }

      for (const dept of depts) {
        const deptNode = {
          id: dept.id,
          name: dept.name,
          label: dept.name,
          hasChildren: dept.hasChildren
        }

        // 检查当前层级是否包含目标部门
        const currentLevelHasTarget = depts.some(d => d.id === targetDeptId)

        // 如果有子部门，判断是否需要递归加载
        if (dept.hasChildren) {
          // 如果当前层级已经包含目标部门，就不需要继续递归加载了
          if (currentLevelHasTarget) {
            // 不加载子部门，保持懒加载状态
            deptNode.children = null
          } else if (!targetDeptId) {
            // 如果没有目标部门（新增模式），加载前两层以提供更好的用户体验

            try {
              const childRes = await getDepts({ enabled: true, pid: dept.id })
              if (childRes && childRes.content && childRes.content.length > 0) {
                // 只加载一层，不再递归
                deptNode.children = childRes.content.map(obj => ({
                  id: obj.id,
                  name: obj.name,
                  label: obj.name,
                  hasChildren: obj.hasChildren,
                  children: obj.hasChildren ? null : undefined
                }))
              }
            } catch (error) {
              deptNode.children = null
            }
          } else {
            // 编辑模式：为了确保能找到目标部门，采用更保守的策略
            // 加载前几层，让懒加载处理更深层的部门
            try {
              const childRes = await getDepts({ enabled: true, pid: dept.id })
              if (childRes && childRes.content && childRes.content.length > 0) {
                // 检查直接子级是否包含目标部门
                const hasTargetInChildren = childRes.content.some(child => child.id === targetDeptId)
                if (hasTargetInChildren) {
                  deptNode.children = childRes.content.map(obj => ({
                    id: obj.id,
                    name: obj.name,
                    label: obj.name,
                    hasChildren: obj.hasChildren,
                    children: obj.hasChildren ? null : undefined
                  }))
                } else {
                  // 没有在直接子级找到，继续递归一层
                  deptNode.children = await this.buildFullDeptTree(childRes.content, targetDeptId)
                }
              }
            } catch (error) {
              deptNode.children = null
            }
          }
        }

        result.push(deptNode)
      }
      return result
    },
    // 懒加载方法：用户手动展开时动态加载子部门
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
          if (res && res.content) {
            parentNode.children = res.content.map(obj => ({
              id: obj.id,
              name: obj.name,
              label: obj.name,
              hasChildren: obj.hasChildren,
              children: obj.hasChildren ? null : undefined
            }))
          } else {
            parentNode.children = []
          }
          callback()
        }).catch(() => {
          parentNode.children = []
          callback()
        })
      }
    },

    // 统计所有部门数量
    countAllDepts(depts) {
      let count = 0
      for (const dept of depts) {
        count++
        if (dept.children && dept.children.length > 0) {
          count += this.countAllDepts(dept.children)
        }
      }
      return count
    },
    // 文件上传前的校验
    beforeUpload(file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPGOrPNG) {
        this.$message.error('上传文件只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
        return false
      }
      return true
    },

    // 文件上传失败回调
    handleUploadError(err) {
      this.$message.error('文件上传失败')
      console.error('Upload error:', err)
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 检查是否有文件需要上传
          if (this.$refs.upload.uploadFiles.length) {
            this.uploadAndSave()
          }
          // 直接保存
          this.saveForm()
        } else {
          this.$message.error('请填写所有必填项')
          return false
        }
      })
    },
    // 上传文件并保存
    uploadAndSave() {
      this.$refs.upload.submit()
    },
    // 保存表单数据
    saveForm() {
      if (this.form.id) {
        delete this.form.dept
        editPeopleInfo(this.form).then(() => {
          this.$message.success('编辑成功')
          this.handleCancel()
        }).catch(error => {
          this.$message.error('编辑失败：' + (error.message || '未知错误'))
        })
      } else {
        addPeopleInfo(this.form).then(() => {
          this.$message.success('保存成功')
          this.handleCancel()
        }).catch(error => {
          this.$message.error('保存失败：' + (error.message || '未知错误'))
        })
      }
    },
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
</style>
