<template>
  <a-modal
    v-model:visible="visible"
    title="维修"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form style="padding: 20px" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" :rules="rules">
      <a-form-item label="维修人" name="repairByName">
        <div style="display: flex">
          <a-input
            v-model:value="form.repairByName"
            placeholder="请选择"
            :disabled="true"
          >
          </a-input>
          <a-button
            type="primary"
            @click="goChoose"
            :disabled="isViewMode"
          >
            选人
          </a-button>
        </div>
      </a-form-item>
      <a-form-item label="维修时间" name="repairDate">
        <a-date-picker
          v-model:value="form.repairDate"
          placeholder="请选择维修时间"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="维修情况说明" name="description">
        <a-textarea v-model:value="form.description" placeholder="请输入维修情况说明" />
      </a-form-item>
      <a-form-item label="故障原因" name="malfunctionReasonId">
        <a-select
          v-model:value="form.malfunctionReasonId"
          :options="reasonOptions"
          placeholder="请选择"
        />
      </a-form-item>
    </a-form>
  </a-modal>
  <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>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from 'vue';
import {OrganizationIdTree, useResetOrganizationTree} from "/@/views/common/organizationIdTree";
import {getUserListByOrg} from "/@/api/equipment/ledger";
import {useUserStore} from "/@/store/modules/user";
import {useMessage} from "/@/hooks/web/useMessage";
import {getEquipmentErrorList} from "/@/api/equipment/errorReason";

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({
      form: {
        orderId: '',
        repairBy: '',
        repairByName: '',
        repairDate: '',
        description: '',
        malfunctionReasonId: '',
      }
    }),
  },
  visible: {
    type: Boolean,
    default: false,
  },
});

const visible = ref(props.visible);
const emit = defineEmits(['update:visible', 'submit']);

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 form = ref({
  orderId: '',
  repairBy: '',
  repairByName: '',
  repairDate: '',
  description: '',
  malfunctionReasonId: '',
});
const { createMessage } = useMessage();
const userInfo = useUserStore();
const rules = {
  repairByName: [{ required: true, message: '请输入维修人', trigger: 'blur' }],
  description: [{ required: true, message: '请输入维修情况说明', trigger: 'blur' }],
  malfunctionReasonId: [{ required: true, message: '请输入故障原因', trigger: 'blur' }],
};
watch(
  () => props.visible,
  (newVal) => {
    visible.value = newVal;
  }
);


// 监听 visible 的变化并通知父组件
watch(
  () => visible.value,
  (newVal) => {
    emit('update:visible', newVal);
  }
);

// 监听 initialData 的变化
watch(
  () => props.initialData,
  (newVal) => {
    form.value = { ...newVal.form };
  },
  { deep: true }
);
const reasonOptions = ref([]);
const Options = ref([]);

const handleOk = () => {
  emit('submit', form.value);
  resetForm();
};

// 清空表单和表格数据
const resetForm = () => {
  form.value = {
    orderId: '',
    repairBy: '',
    repairByName: '',
    repairDate: '',
    description: '',
    malfunctionReasonId: '',
  };
};

const handleCancel = () => {
  emit('update:visible', false); // 关闭模态框
};


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

onMounted(() => {
  fetchAgeOptions();
});

const fetchAgeOptions = async () => {
  try {
    const response = await getEquipmentErrorList({ page: 1, pageSize: 999 }); // 调用接口
    reasonOptions.value = response.items?.map((item: any) => {
      return {
        value: item?.id,
        label: item?.reason
      }
    });
  } catch (error) {
    console.error('失败:', error);
  }
};

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;

};

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

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

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

</script>