<template>
  <div class="root">
    <div class="event-box">
      <div class="inline-flex">
        <label>人员姓名:</label>
        <el-input v-model="filterData.xm"></el-input>
      </div>
      <div class="inline-flex">
        <el-button type="primary" size="large" @click="openAddModel"
          >新增人员</el-button
        >
      </div>
    </div>
    <div class="form-box">
      <div class="form-content">
        <DynamicTable
          :dataSource="yhzryList"
          :columns="columns"
          :autoHeight="true"
          :pagination="pagination"
        ></DynamicTable>
      </div>
    </div>

    <div class="model-box">
      <MyDialog
        v-model="modelVisible"
        :title="model?.title"
        :dynamicComponent="model?.content"
        :component-props="model?.props"
        :onConfirm="model?.onConfirm"
        :onCancel="model?.onCancel"
        ref="dialogRef"
        :width="model?.width"
      >
      </MyDialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
import DynamicTable from "../../component/DynamicTable";
import { request } from "@/utils/request";
import MyDialog from "../../component/MyDialog";
import AddDialog from "./component/addDialog.vue";
import EditDialog from "./component/editDialog.vue";
import DetailDialog from "./component/detailDialog.vue";

const props = defineProps({
  yhzData: {
    type: Object,
    default: () => ({}),
  },
});

// 养护站ID
const yhzId = ref(props.yhzData.id);
// 表格过滤条件
const filterData = reactive({
  xm: "", // 姓名
});
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50],
  layout: "prev, pager, next, jumper",
  onChange: (page, pageSize) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    getyhzryList(filterData);
  },
}); // 表格分页

// 养护站人员列表
const yhzryList = ref([]);

// 获取养护站人员详情
const getDetailData = async (row) => {
  try {
    const res = await request({
      url: `/snow-ops-platform/yhzry/getById?id=${row.id}`,
      method: "GET",
    });
    if (!res || res.code !== "00000") {
      throw new Error("获取人员详情失败");
    }
    if (res.code === "00000") {
      if (dialogType.value === "detail") {
        model.title = `人员详情`;
        model.content = DetailDialog;
        model.props = {
          detailData: res.data,
        };
        model.onCancel = () => {
          dialogType.value = "";
          modelVisible.value = false;
        };
        model.onConfirm = () => {
          dialogType.value = "";
          modelVisible.value = false;
        };
        model.width = "30%";
        modelVisible.value = true;
      }
      if (dialogType.value === "edit") {
        model.title = `编辑人员`;
        model.content = EditDialog;
        Object.assign(form, res.data);
        model.props = {
          detailData: res.data,
          form: form,
        };
        model.onCancel = () => {
          dialogType.value = "";
          modelVisible.value = false;
        };
        model.onConfirm = async () => {
          await handleEdit();
        };
        model.width = "30%";
        modelVisible.value = true;
      }
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    ElMessage.error(error.message);
    console.log(error);
  }
};

const handleEdit = async () => {
  try {
    await dialogRef?.value?.dynamicComponentRef?.formRef.validate();
    console.log("form", toRaw(form));
    const res = await request({
      url: "/snow-ops-platform/yhzry/update",
      method: "POST",
      data: toRaw(form),
    });
    if (res.code === "00000") {
      ElMessage.success("编辑成功");
      dialogType.value = "";
      modelVisible.value = false;
      getyhzryList(filterData);
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    ElMessage.error(error.message);
    console.log("error", error);
  }
};

const columns = [
  {
    prop: "xm",
    label: "姓名",
    width: 100,
  },
  {
    prop: "gw",
    label: "岗位",
    width: 100,
  },
  {
    prop: "sjhm",
    label: "手机号码",
  },
  {
    prop: "cjsj",
    label: "创建时间",
    render: (row) => () => {
      // 解析 ISO 时间字符串
      const date = new Date(row.cjsj);

      // 格式化为 YYYY-MM-DD HH:mm:ss
      const format = (n) => n.toString().padStart(2, "0");
      return h(
        "div",
        `${date.getFullYear()}-${format(date.getMonth() + 1)}-${format(
          date.getDate()
        )} 
                 ${format(date.getHours())}:${format(
          date.getMinutes()
        )}:${format(date.getSeconds())}`
      );
    },
  },
  {
    prop: "ryjs",
    label: "人员角色",
    width: 150,
    render: (row) => () => {
      const roleConfig = {
        1: { label: "负责人", color: "#f56c6c" },
        2: { label: "普通工作人员", color: "#409eff" },
      };

      const config = roleConfig[row.ryjs] || {
        label: "未知角色",
        color: "#909399",
      };

      return h(
        ElTag,
        {
          style: { "margin-right": "5px" },
          effect: "dark",
          type: row.ryjs === 1 ? "danger" : "primary",
        },
        () => config.label
      );
    },
  },

  {
    label: "操作",
    fixed: "right",
    width: 150,
    render: (row) => () =>
      h("div", { class: "action-btns" }, [
        h(
          ElButton,
          {
            type: "primary",
            link: true,
            onClick: async () => {
              dialogType.value = "detail";
              await getDetailData(row);
            },
          },
          () => "详情"
        ),
        h(
          ElButton,
          {
            type: "primary",
            link: true,
            onClick: async () => {
              dialogType.value = "edit";
              await getDetailData(row);
            },
          },
          () => "编辑"
        ),
        h(
          ElButton,
          {
            type: "danger",
            link: true,
            onClick: async () => {
              try {
                await ElMessageBox.confirm("确定要删除该人员吗？", "删除确认", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                });
                const res = await request({
                  url: `/snow-ops-platform/yhzry/delete`,
                  method: "POST",
                  data: {
                    id: row.id,
                  },
                });
                if (res.code === "00000") {
                  ElMessage.success("删除成功");
                  getyhzryList(filterData);
                } else {
                  throw new Error(res.message);
                }
              } catch (error) {
                ElMessage.error(error.message);
                console.log(error);
              }
            },
          },
          () => "删除"
        ),
      ]),
  },
];

// 获取养护站人员列表
const getyhzryList = async (filterData) => {
  try {
    const data = {
      yhzid: yhzId.value,
      xm: filterData?.xm || "",
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    };
    const res = await request({
      url: "/snow-ops-platform/yhzry/list",
      method: "GET",
      params: data,
    });
    if (res.code === "00000") {
      yhzryList.value = res.data.records;
      pagination.total = res.data.total;
    } else {
      throw new Error(res.msg);
    }
  } catch (error) {
    ElMessage.error(error.message);
    console.log(error);
  }
};

// 分页查询养护站
onMounted(async () => {
  await getyhzryList();
});

// 监听过滤条件
watch(
  [() => filterData],
  ([newFilterData]) => {
    getyhzryList(newFilterData);
  },
  { deep: true }
);

// 弹窗显示状态
const modelVisible = ref(false);
const dialogType = ref(""); // 弹窗类型
const dialogRef = ref(null); // 弹窗实例

// 弹窗
const model = reactive({
  title: "",
  content: null,
  props: {},
  onConfirm: () => {},
  onCancel: () => {},
  width: "30%",
});

const INIT_FORM = {
  xm: "",
  sjhm: "",
  gw: "",
  cjsj: "",
  yhzid: "",
  ryjs: null, // 人员角色 1-负责人 2-普通工作人员
  userId: "",
}; // 表单初始值
const form = reactive({ ...INIT_FORM }); // 表单

// 根据用户信息 查询角色列表
const getUserList = async (key) => {
  try {
    const keyword = key;
    let url = "";
    if (keyword) {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
    } else {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
    }
    const res = await request({
      url: url,
      method: "GET",
    });
    if (res.code === "00000") {
      return res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    ElMessage.error(error.message);
    console.log(error);
  }
};

// 打开新增人员弹窗
const openAddModel = () => {
  model.title = `新增人员`;
  model.content = AddDialog;
  model.width = "30%";
  Object.assign(form, INIT_FORM);
  model.props = {
    form: form,
    getUserList: getUserList,
    yhzdata: props.yhzData,
  };
  model.onCancel = () => {
    dialogType.value = "";
    modelVisible.value = false;
  };
  model.onConfirm = async () => {
    try {
      form.cjsj = new Date()
        .toLocaleString("sv-SE", { hour12: false })
        .replace("T", " ");
      console.log("form", toRaw(form));
      const res = await request({
        url: "/snow-ops-platform/yhzry/add",
        method: "POST",
        data: toRaw(form),
      });
      if (res.code === "00000") {
        ElMessage.success("新增人员成功");
        dialogType.value = "";
        modelVisible.value = false;
        getyhzryList(filterData);
      } else {
        throw new Error(res.message);
      }
    } catch (error) {
      ElMessage.error(error.message);
      console.log("error", error);
    }
  };
  modelVisible.value = true;
};
</script>

<style scoped>
.root {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.inline-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.inline-flex label {
  white-space: nowrap; /* 禁止换行 */
}
.form-box {
  width: 100%;
  height: calc(100% - 60px);
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.event-box {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.form-content {
  width: 100%;
  height: calc(100% - 60px);
}

.model-box {
  position: absolute;
}
</style>