<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="80vw"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin-top: 32px" :rules="rules">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="巡检计划" name="inspectionPlanId">
            <a-select
              v-model:value="form.inspectionPlanId"
              :options="planOptions"
              :disabled="isViewMode"
              placeholder="请选择"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="巡检计划编号" name="code">
            <a-input v-model:value="form.code" :disabled="true" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="巡检日期" name="checkDate">
            <a-date-picker
              v-model:value="form.checkDate"
              :disabled="isViewMode"
              placeholder="请选择"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="巡检结果" name="recordResult">
            <a-select
              v-model:value="form.recordResult"
              :options="[{label: '正常',value: true},{label: '异常',value: false}]"
              :disabled="isViewMode"
              placeholder="请选择"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="巡检人" name="preserveByName">
            <div style="display: flex">
              <a-input
                v-model:value="form.inspectorName"
                placeholder="请选择"
                :disabled="true"
              >
              </a-input>
              <a-button
                type="primary"
                @click="goChoose"
                :disabled="isViewMode"
              >
                选人
              </a-button>
            </div>
          </a-form-item>
        </a-col>

      </a-row>
      <a-form-item label="巡检明细" name="tkInspectionDetailsDTOList">
        <a-table bordered :data-source="tableData" :columns="columns">
          <template #tkDeviceAccountDTO="{ text, record, index }">
            <div>
              {{record?.tkDeviceAccountDTO?.name}}
            </div>
          </template>
          <template #recordResult="{ text, record, index }">
            <div>
              <a-select
                v-model:value="record.recordResult"
                :options="[{label: '正常',value: true},{label: '异常',value: false}]"
                :disabled="isViewMode"
                placeholder="请选择"
              />
            </div>
          </template>
          <template #operation="{ text, record, index }">
            <div>
              <a-button type="link" @click="handleDelete(index)" :disabled="isViewMode">删除</a-button>
            </div>
          </template>
        </a-table>
      </a-form-item>
    </a-form>
    <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>
  </a-modal>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, ref, unref, watch} from "vue";
import {getInspectionPlanList, getInsPlanDetail} from "/@/api/inspection/inspectionPlan";
import { ApiTreeSelect } from '/@/components/Form';
import {OrganizationListItem} from "/@/api/system/model/systemModel";
import {getOrganizationList} from "/@/api/system/system";
import {getUserListByOrg} from "/@/api/equipment/ledger";
import {useUserStore} from "/@/store/modules/user";
import {useI18n} from "/@/hooks/web/useI18n";
import {useMessage} from "/@/hooks/web/useMessage";
import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
interface Value {
  value?: string;
  label?: string;
}
const rules = {
  code: [{ required: true, message: '请输入', trigger: 'blur' },],
  inspectionPlanId: [{ required: true, message: '请输入', trigger: 'blur' },],
  orgId: [{ required: true, message: '请选择', trigger: 'change' }],
  inspectorId: [{ required: true, message: '请选择', trigger: 'change' }],
  inspectorName: [{ required: true, message: '请选择', trigger: 'change' }],

};
const columns = [
  {
    title: '巡检设备',
    dataIndex: 'tkDeviceAccountDTO',
    slots: { customRender: 'tkDeviceAccountDTO' },
    width: '180px'
  },
  {
    title: '巡检内容',
    dataIndex: 'planDetails',
    width: '180px'
  },
  {
    title: '巡检结果',
    dataIndex: 'recordResult',
    slots: { customRender: 'recordResult' },
    width: '160px'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
    width: '120px'
  }
];

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({
      form: {
        code: '',
        inspectionPlanId: '',
        inspectorId: '',
        inspectorName: '',
        checkDate: '',
        recordResult: '',
        orgId: '',
      },
      tableData: [],
    }),
  },
  visible: {
    type: Boolean,
    default: false,
  },
  isViewMode: {
    type: Boolean,
    default: false,
  },
  modalTitle: {
    type: String,
    default: '',
  },
});
const visible = ref(props.visible);
const isViewMode = ref(props.isViewMode);
const modalTitle = ref(props.modalTitle);
const form = ref({ ...props.initialData.form });
const tableData = ref([...props.initialData.tableData]);
const emit = defineEmits(['update:visible', 'submit']);
const planOptions = ref([]);
const Options = ref([]);
const userInfo = useUserStore();
const timespan = ref(Date.now());
const orgList = ref<Recordable[]>([]);
const { t } = useI18n();
const needReload = ref(true);

const { createMessage } = useMessage();

const searchInfo = reactive<Recordable>({});
const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
const userVisible = ref(false);
const userModalTitle = ref('选人');
const selectedItem = ref<{ id: number; username: string } | null>(null);
const radioStyle = reactive({
  display: 'block',
  height: '30px',
  lineHeight: '30px',
});

// 监听 visible 的变化
watch(
  () => props.visible,
  (newVal) => {
    visible.value = newVal;
  }
);

watch(
  () => props.isViewMode,
  (newVal) => {
    isViewMode.value = newVal;
  }
);

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

// 监听 initialData 的变化
watch(
  () => props.initialData,
  (newVal) => {
    console.log(newVal?.form,'66666')
    form.value = { ...newVal.form, inspectorId: newVal.form?.userDTO?.id || '',inspectorName: newVal.form?.userDTO?.realName || ''};

    tableData.value = [...newVal.tableData];
  },
  { deep: true }
);

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

const handleDelete = (index) => {
  tableData.value.splice(index, 1);
};

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

  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;

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

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

const getBindProps = computed<Recordable>(() => {
  const params = {}
  return {
    replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
    getPopupContainer: () => document.body,
    placeholder: t('deviceManagement.device.organizationPlaceholderText'),
    maxLength: 250,
    value: form.orgId,
    dropdownStyle: { maxHeight: '300px' },
    api: async (params: OrganizationListItem) => {
      try {
        const result = ((await getOrganizationList(params)) as unknown as Recordable[]) || [];
        orgList.value = result;
        needReload.value = false;
        return result;
      } catch (error) {
        return unref(orgList);
      }
    },
    params: {
      ...params,
      _t: unref(timespan),
    },
    onChange: async (...args: any[]) => {
      const _data = {
        page: '1',
        pageSize: '999',
        tenantId: userInfo.getUserInfo.tenantId!,
        organizationId: args?.[0]
      }
      const response = await getUserListByOrg(_data); // 调用接口
      Options.value = response.items?.map((item: any) => {
        return {
          label: item.username,
          value: item.id,
        }
      });
      form.orgId.value = args?.[0]

    },
  };
});

const handleChange = async (value: Value) => {
  const res = await getInsPlanDetail({id:value})
  form.value.code = res.code
  tableData.value = res?.tkCheckDetailsDTOList?.map((item: any) => {
    return {
      checkDeviceId: item?.checkDeviceId || '',
      recordResult: true,
      planDetails: item?.checkDeviceId || '',
      tkDeviceAccountDTO: item?.tkDeviceAccountDTO
    }
  }) || []
};

const handleOk = () => {
  if (isViewMode.value) {
    visible.value = false;
    return;
  }
  const objData = { ...form.value, tkInspectionDetailsDTOList: tableData.value };
  emit('submit', objData); // 将数据提交给父组件
  resetForm();
}
const handleCancel = () => {
  resetForm();
  visible.value = false;
}

// 清空表单和表格数据
const resetForm = () => {
  form.value = {
    code: '',
    inspectionPlanId: '',
    inspectorId: '',
    inspectorName: '',
    checkDate: '',
    recordResult: '',
    orgId: '',
  };
  tableData.value = [];
  isViewMode.value = false;
};

</script>