<template>
  <BasicDrawer
    destroyOnClose
    v-bind="$attrs"
    showFooter
    width="35%"
    :maskClosable="true"
    :title="businessText"
    @register="registerDrawer"
    wrapClassName="report-drawer"
    @ok="handleSubmit"
    @close="handleClose"
  >
    <BasicForm @register="registerForm">
    </BasicForm>
    <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-input>
      <a-button type="primary" @click="goChoose">选人</a-button>
    </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>
  </BasicDrawer>
</template>
<script setup lang="ts">
import {computed, nextTick, reactive, ref} from "vue";
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { SchemaFiled} from "../../config/enum";
import {BasicForm,useForm} from "/@/components/Form";
import {formSchema} from "../../config/data";
import {useHooks} from "/@/views/report/config/hooks/index.hooks";
import {getUserListByOrg,ledgerEditDetailPage,saveLedger } from "/@/api/equipment/ledger"
import {useUserStore} from "/@/store/modules/user";
import {useThrottleFn} from "@vueuse/shared/index";
import {useMessage} from "/@/hooks/web/useMessage";
import {useI18n} from "/@/hooks/web/useI18n";
import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
const {
  setDefaultTime,
  disableCustomWeekly,
  setPropsForModal,
  removeFields,
} = useHooks();
const userInfo = useUserStore();
const restData = reactive({
  data: {},
});
const { createMessage } = useMessage();
const { t } = useI18n();

// 定义人员选项
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 emits = defineEmits(['success', 'register']);
const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm(
  {
    labelWidth: 140,
    schemas: formSchema,
    showActionButtonGroup: false,
    fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
  }
);

const businessText = ref('');
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  try {
    await nextTick();
    handleClose();
    businessText.value = data.text;
    if (!selectedItem.value) {
      selectedItem.value = { id: '', username: '' };
    }
    selectedItem.value.username = data?.record?.directorName || '';
    selectedItem.value.id = data?.record?.directorId || '';
    setFieldsValue(setDefaultTime());
    updateSchema(disableCustomWeekly(0));
    setDrawerProps(setPropsForModal(businessText.value));
    if (businessText.value === 'add') return;
    const rest = await ledgerEditDetailPage({id: data.record?.id});
    restData.data = rest ?? {};

    await setFieldsValue({
      ...restData.data,
    });

  } finally {
    setDrawerProps({ loading: false });
  }
});
const handleClose = () => {
  resetValue();
}
//重置表单
const resetValue = () => {
  resetFields();
};

const handleSubmit = () => {
  useThrottle();
};

const useThrottle = useThrottleFn(() => {
  getValue();
}, 2000);

const getValue = async () => {
  try {
    setDrawerProps({ confirmLoading: true });
    const values = await validate();
    if (!values) return;
    const data = {
      ...values,
      buyDate: values.buyDate?.format('YYYY-MM-DD hh:mm:ss'),
      productDate: values.productDate?.format('YYYY-MM-DD hh:mm:ss'),
      receiveDate: values.receiveDate?.format('YYYY-MM-DD hh:mm:ss'),
      registeDate: values.registeDate?.format('YYYY-MM-DD hh:mm:ss'),
      directorId: selectedItem.value?.id || '',
    };
    removeFields.forEach((item) => {
      Reflect.deleteProperty(data, item);
    });
    businessText.value === 'add'
      ? await saveLedger(data)
      : saveLedger({ ...restData.data, ...data });
    createMessage.success(
      t(businessText.value !== 'add' ? 'common.editSuccessText' : 'common.createSuccessText')
    );
    closeDrawer();
    handleClose();
    setTimeout(() => {
      emits('success');
    }, 500);
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
};
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>