<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>