<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="recordCode">
            <a-input v-model:value="form.recordCode" :disabled="isViewMode" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="保养计划" name="preservePlanId">
            <a-select
              v-model:value="form.preservePlanId"
              :options="planOptions"
              :disabled="isViewMode"
              placeholder="请选择"
              @change="handleChange"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="保养日期" name="preserveDate">
            <a-date-picker
              v-model:value="form.preserveDate"
              :disabled="isViewMode"
              placeholder="请选择"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="维护结果" name="preserveStatus">
            <a-select
              v-model:value="form.preserveStatus"
              :disabled="isViewMode"
              placeholder="请选择"
              :options="[{label:'未完成',value:'INCOMPLETE'},{label:'已完成',value:'COMPLETE'}]"
            ></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.preserveByName"
                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="preserveDetailList">
        <a-table bordered :data-source="tableData" :columns="columns">
          <template #deviceInfo="{ record }">
            <div>
              {{record?.deviceInfo.name}}
            </div>
          </template>
          <template #status="{ record }">
            <div>
              <a-select
                v-model:value="record.status"
                :options="defaultOptions"
                :disabled="isViewMode"
                :field-names="{ label: 'name', value: 'id' }"
                placeholder="请选择"
              />
            </div>
          </template>
          <template #operation="{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">
// 定义 props
import {onMounted, ref, watch, reactive} from "vue";
import {getServicePlanList} from "/@/api/inspection/servicePlan";
import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
import {getUserListByOrg} from "/@/api/equipment/ledger";
import {useUserStore} from "/@/store/modules/user";
import {serveRecordDetail} from "/@/api/inspection/serviceRecord";
import {useMessage} from "/@/hooks/web/useMessage";
const { createMessage } = useMessage();

const searchInfo = reactive<Recordable>({});
const { organizationIdTreeRef } = 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',
});

interface Value {
  value?: string;
  label?: string;
}
const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({
      form: {
        recordCode: '',
        preserveName: '',
        preservePlanId: '',
        preserveDate: '',
        preserveStatus: '',
        orgId: '',
        preserveBy: '',
        preserveByName: '',
      },
      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 defaultOptions = [
  {
    label: '未执行',
    value: 'UNEXECUTED',
  },
  {
    label: '已执行',
    value: 'EXECUTED',
  },
]
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 rules = {
  recordCode: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  preservePlanId: [{ required: true, message: '请选择', trigger: 'change' }],
  orgId: [{ required: true, message: '请选择', trigger: 'change' }],
  preserveBy: [{ required: true, message: '请选择', trigger: 'change' }],
  preserveByName: [{ required: true, message: '请选择', trigger: 'change' }],
  preserveStatus: [{ required: true, message: '请选择', trigger: 'change' }],
};

const columns = [
  {
    title: '保养明细编号',
    dataIndex: 'detailCode',
    slots: { customRender: 'detailCode' },
    width: '160px'
  },
  {
    title: '保养设备',
    dataIndex: 'deviceInfo',
    slots: { customRender: 'deviceInfo' },
    width: '180px'
  },
  {
    title: '保养明细',
    dataIndex: 'preserveDetail',
    width: '180px'
  },
  {
    title: '执行状态',
    dataIndex: 'status',
    slots: { customRender: 'status' },
    width: '160px'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
    width: '120px'
  }
];

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


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

const handleChange = async (value: Value) => {
  const res = await serveRecordDetail({preservePlanId:value,page:'1',pageSize:'999'})
  tableData.value = res?.items?.map((item: any) => {
    return {
      detailCode: item?.detailCode || '',
      preserveDetail: item?.preserveDetail || '',
      deviceInfo: item?.deviceInfo || {},
      preserveDetailId: item?.id || '',
      status: 'UNEXECUTED'
    }
  }) || []
};

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

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

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

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

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

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

// 清空表单和表格数据
const resetForm = () => {
  form.value = {
    recordCode: '',
    preserveName: '',
    preservePlanId: '',
    preserveDate: '',
    preserveStatus: '',
    orgId: '',
    preserveBy: '',
    preserveByName: '',
  };
  tableData.value = [];
  isViewMode.value = false;
};

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

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.preserveBy = selectedItem.value.id
  form.value.preserveByName = selectedItem.value.username

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

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