<template>
  <div class="operate">
    <el-form
      ref="ruleForm"
      :model="form"
      class="dialogForm"
      :label-width="120"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="文件名称:" prop="fileName">
            <el-input
              v-model="form.fileName"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="分配部门权限:" prop="dept">
            <el-select
              v-model="form.dept"
              placeholder="请选择部门"
              style="width: 100%"
              multiple
            >
              <el-option
                v-for="item in options"
                :key="item.refId"
                :label="item.refName"
                :value="item.refId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="分配用户权限:" prop="user">
            <el-select
              v-model="form.user"
              placeholder="请选择用户"
              style="width: 100%"
              multiple
            >
            <el-option-group
              v-for="group in groupOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.refId"
                :label="item.refName"
                :value="item.refId"
              />
            </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { inheritAttr } from '@/utils/v3'
import { optTextMap } from '@/utils/map'
import { required } from '@/utils/validate-helper'
import { useDicts } from '@/hooks'
import {
  getDocumentAuthorityDisAuthDepart,
  documentAuthorityEdit
} from '@/api/document/fileManagement/readAuth'

const { proxy } = getCurrentInstance()
const {
  document_save_type
} = proxy.useDict('document_save_type')

const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  }
})
const { curRow } = props
const emit = defineEmits(['close'])
const form = reactive({
  fileId: curRow.id || '',
  fileName: curRow.fileName,
  dept: [],
  user: []
})
const rules = reactive({
  fileName: required('文件名称'),
  dept: required('部门'),
  user: required('用户')
})
const options = ref([])
const groupOptions = ref([])

const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      const refList = []
      if(form.dept?.length){
        refList.push({ refId: form.dept, refType: 'dept' })
      }
      if(form.user?.length){
        refList.push({ refId: form.user, refType: 'user' })
      }
      const params = {
        fileId: form.fileId,
        refList
      }
      const res = await documentAuthorityEdit(params)
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功')
      emit('close', { isRefresh: true })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const getDetail = async () => {
  const res = await getDocumentAuthorityDisAuthDepart({
    fileId: form.fileId
  })
  if(res?.code !== 200) return
  const deptList = res.data.deptList || []
  options.value = deptList
  const userList = res.data.userList || []
  const departmentNameList = Object.keys(userList)
  let checkedUserList = []
  for (const departmentName of departmentNameList) {
    if(!userList[departmentName]) continue
    const checkedUserItemList = userList[departmentName].filter(it => it.refFlag).map(it => it.refId)
    checkedUserList = checkedUserList.concat(checkedUserItemList)
    const departmentObj = {
      label: departmentName,
      options: userList[departmentName]
    }
    groupOptions.value.push(departmentObj)
  }
  form.dept = deptList.filter(it => it.refFlag).map(it => it.refId)
  form.user = checkedUserList
}

onMounted(() => {
  if(form.fileId) getDetail()
})

defineExpose({
  submit
})
</script>

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