<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="30rem"
      :title="getTitle"
      @register="register"
      @cancel="handleCancel"
      @ok="handleOk"
      destroyOnClose
    >
      <div>
        <BasicForm @register="registerForm" />
        <div style="display: flex; width: 70%; margin-left: 70px">
          <div style="width: 122px; text-align: center"> 报修人 </div>
          <a-input placeholder="请选择" :disabled="true" v-model:value="selectedUsername" />
          <a-button type="primary" @click="goChoose">选人</a-button>
        </div>
      </div>
      <a-modal
        v-model:visible="userVisible"
        :title="userModalTitle"
        width="60vw"
        height="50vh"
        @ok="handleUserOk"
        @cancel="handleUserCancel"
      >
        <div style="padding: 20px; display: flex">
          <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" isOpen="true" />
          <div style="margin-top: 20px; margin-left: 30px">
            <a-radio-group v-model:value="selectedItem">
              <template v-for="item in Options" :key="`${item.id}`">
                <a-radio :style="radioStyle" :value="item">{{ item.username }}</a-radio>
              </template>
            </a-radio-group>
          </div>
        </div>
      </a-modal>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { computed, reactive, ref, unref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { schemas } from '../index';
  import { getUserListByOrg } from '/@/api/equipment/ledger';
  import { useUserStore } from '/@/store/modules/user';
  import { saveOrder } from '/@/api/repair/order';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
  const { t } = useI18n();
  const isUpdate = ref<Boolean>(false);
  const recordInfo = ref<any>({});
  // 定义人员选项
  const userInfo = useUserStore();
  const { createMessage } = useMessage();

  const userOptions = ref([]);
  const Options = ref([]);
  const searchInfo = reactive<Recordable>({});
  const { organizationIdTreeRef } = useResetOrganizationTree(searchInfo);
  const userVisible = ref(false);
  const userModalTitle = ref('选人');
  const selectedItem = ref<{ id: string; username: string } | null>(null);
  const radioStyle = reactive({
    display: 'block',
    height: '30px',
    lineHeight: '30px',
  });
  // 计算属性实现双向绑定
  const selectedUsername = computed({
    get: () => selectedItem.value?.username || '',
    set: (value) => {
      if (selectedItem.value) {
        selectedItem.value.username = value;
      }
    },
  });

  const emit = defineEmits(['handleReload', 'register']);

  const getTitle = computed(() =>
    !unref(isUpdate) ? t('repair.order.createOrderText') : t('repair.order.editOrderText')
  );

  const [registerForm, { getFieldsValue, setFieldsValue, validate, updateSchema }] = useForm({
    labelWidth: 140,
    schemas,
    actionColOptions: {
      span: 14,
    },
    showActionButtonGroup: false,
  });

  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, loading: true });
    isUpdate.value = data?.isUpdate;
    recordInfo.value = data?.record;
    if (!selectedItem.value) {
      selectedItem.value = { id: '', username: '' };
    }
    selectedItem.value.username = data?.record?.reportByName || '';
    selectedItem.value.id = data?.record?.reportBy || '';
    updateSchema({
      field: 'situationImg',
      componentProps: {
        onChange: handleOrgChange,
      },
    });
    if (data?.record) {
      setFieldsValue(data?.record);
    }
    setModalProps({ loading: false });
  });

  // 监听 org 字段的变化
  const handleOrgChange = async (orgId: string) => {
    if (!orgId) {
      userOptions.value = []; // 清空人员选项
      updateSchema({
        field: 'report',
        componentProps: { options: [] },
      });
      return;
    }
    const _data = {
      page: '1',
      pageSize: '999',
      tenantId: userInfo.getUserInfo.tenantId!,
      organizationId: orgId,
    };
    // 调用接口 B 获取人员数据
    const userList = await getUserListByOrg(_data);
    userOptions.value = userList?.items.map((user) => ({
      label: user.username,
      value: user.id,
    }));

    // 更新 user 字段的选项
    updateSchema({
      field: 'report',
      componentProps: { options: userOptions.value },
    });
  };

  const handleCancel = () => {
    closeModal();
  };

  const handleOk = async () => {
    await validate();
    let values = getFieldsValue();
    if (unref(isUpdate)) {
      values = {
        ...values,
        id: unref(recordInfo).id,
        situationImg: values.image?.[0]?.url,
        reportBy: selectedItem.value?.id || '',
      };
    } else {
      values = {
        ...values,
        situationImg: values.image?.[0]?.url,
        reportBy: selectedItem.value?.id || '',
      };
    }
    await saveOrder(values);
    createMessage.success(t('common.operationSuccessText'));
    emit('handleReload');
    handleCancel();
  };

  const goChoose = () => {
    userVisible.value = true;
    selectedItem.value = null;
  };

  // 确认按钮的回调
  const handleUserOk = () => {
    if (!selectedItem.value) {
      createMessage.warning('请选择一个用户');
      return;
    }

    userVisible.value = false; // 关闭弹框
  };

  const handleUserCancel = () => {
    selectedItem.value = null;
    userVisible.value = false;
  };

  const handleSelect = async (organizationId: string) => {
    searchInfo.organizationId = organizationId;
    const _data = {
      page: '1',
      pageSize: '999',
      tenantId: userInfo.getUserInfo.tenantId!,
      organizationId: organizationId,
    };
    const response = await getUserListByOrg(_data); // 调用接口
    Options.value = response.items;
  };
</script>