<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-form-item label="关联类型" name="linkScopeType">
      <a-select
        v-model:value="form.linkScopeType"
        allowClear
        placeholder="请选择关联类型"
        style="width: 100%"
        @change="linkScopeTypeChange"
      >
        <a-select-option :value="10">机构</a-select-option>
        <a-select-option :value="20">人员</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="范围类型" name="scopeType">
      <a-select v-model:value="form.scopeType" allowClear placeholder="请选择范围类型" style="width: 100%">
        <a-select-option :value="1">指定范围</a-select-option>
        <a-select-option :value="2" v-if="form.linkScopeType == 10">指定范围及以下</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="选择范围" name="linkBusinessIdList">
      <a-input v-model:value="linkBusinessName" @focus="linkBusinessIdListFocus" placeholder="请选择范围" allow-clear autocomplete="off" />
    </a-form-item>

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

<script setup name="EffectiveForm">
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';

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

const formRef = ref();

// 验证规则
const rules = reactive({
  linkScopeType: [{ required: true, message: '请选择关联类型', type: 'number', trigger: 'change' }],
  scopeType: [{ required: true, message: '请选择范围类型', type: 'number', trigger: 'change' }],
  linkBusinessIdList: [{ required: true, message: '请选择范围', type: 'array', trigger: 'change' }]
});

const showSelection = ref(false);

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

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

const isRadio = ref(true);

const linkBusinessNameList = ref([]);

const linkBusinessName = ref('');

const linkScopeTypeChange = () => {
  props.form.scopeType = 1;
};

const linkBusinessIdListFocus = () => {
  const { linkScopeType, scopeType } = props.form;
  if (!linkScopeType) return message.warning('请先选择关联类型');
  if (!scopeType) return message.warning('请先选择范围类型');
  if (linkScopeType == 10) {
    showTab.value = ['dept'];
    isRadio.value = scopeType == 1 ? false : true;
    if (linkBusinessName.value) {
      selectedData.value.selectOrgList = linkBusinessNameList.value;
    }
  } else if (linkScopeType == 20) {
    showTab.value = ['user'];
    if (linkBusinessName.value) selectedData.value.selectUserList = linkBusinessNameList.value;
    isRadio.value = false;
  }
  showSelection.value = true;
};

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