<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-form-item label="选择人员范围" name="managerUserIdList">
      <a-input
        v-model:value="linkBusinessName"
        @focus="managerUserIdListFocus"
        placeholder="请选择选择人员范围"
        allow-clear
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="内容权限" name="authTypeList">
      <a-checkbox-group v-model:value="form.authTypeList">
        <a-checkbox value="design">拖拽布局配置</a-checkbox>
        <a-checkbox value="content">新闻、轮播图和应用链接维护</a-checkbox>
        <a-checkbox value="admin">管理员权限</a-checkbox>
      </a-checkbox-group>
    </a-form-item>

    <!-- 选择弹框 -->
    <Selection
      v-model:visible="showSelection"
      v-if="showSelection"
      :data="selectedData"
      :showTab="showTab"
      :title="'选择'"
      :isRadio="false"
      @done="closeFlowPick"
    ></Selection>
  </a-form>
</template>

<script setup name="PermissionForm">
import { reactive, ref } from 'vue';

const props = defineProps({
  // 表单数据
  form: Object,
  designId: String
});

const formRef = ref();

// 验证规则
const rules = reactive({
  managerUserIdList: [{ required: true, message: '请选择人员范围', type: 'array', trigger: 'change' }]
});

const showSelection = ref(false);

// 总数据
const selectedData = ref({
  selectUserList: []
});

const showTab = ref(['user']);

const linkBusinessNameList = ref([]);

const linkBusinessName = ref('');

const managerUserIdListFocus = () => {
  showTab.value = ['user'];
  if (linkBusinessName.value) selectedData.value.selectUserList = linkBusinessNameList.value;
  showSelection.value = true;
};

const closeFlowPick = data => {
  const { selectUserList } = data;
  const valueData = selectUserList;
  linkBusinessNameList.value = valueData?.map(item => {
    return { bizId: item.bizId, name: item.name };
  });
  linkBusinessName.value = linkBusinessNameList.value.map(item => item.name).join(',');
  props.form.managerUserIdList = linkBusinessNameList.value.map(item => item.bizId);
};
</script>
