<script setup>
import { ref, reactive } from "vue";
import { getTemplateInfoList } from "@/api/templateInfo";
import { userPageWhitOrganization, getLeaderList } from "@/api/userSetting";
import { getAssessmentPageList } from "@/api/manage";
import { postListTree } from "@/api/department";
import {
  getAssessmentList,
  getModelListByAssessmentId,
  getUserListObjectByModelId
} from "@/api/draw";
import { useRouter, useRoute } from "vue-router";
const $emit = defineEmits(["handClick"]);

const dataList = reactive({
  teplist: [],
  personList: [],
  magList: [],
  deptList: [],
  leaderList: [],
  params: {
    assessmentId: "",
    assessmentModelId: "",
    deptCode: "",
    assessmentObjectId: ""
  }
});
// 考核模板
const getTemplateInfoListApi = async selectedItem => {
  const { data, code } = await getModelListByAssessmentId(selectedItem);
  if (code === 200) {
    dataList.teplist = data;
  }
};
// getTemplateInfoListApi();
// 员工
const userPageWhitOrganizationApi = async () => {
  const { data, code } = await userPageWhitOrganization({
    pageNumber: 1,
    pageSize: 1000
  });
  if (code === 200) {
    dataList.personList = data.records;
  }
};
// userPageWhitOrganizationApi();
// 考核活动
// const getAssessmentPageListApi = async () => {
//   const { data, code } = await getAssessmentList({
//     type: 3
//   });
//   if (code === 200) {
//     dataList.magList = data;
//   }
//   console.log("await", data);
// };
// getAssessmentPageListApi();
// 部门
const postListTreeApi = async () => {
  const { data, code } = await postListTree();
  if (code === 200) {
    dataList.deptList = data;
  }
  console.log("await", data);
};
postListTreeApi();
// 科主任
const getLeaderListApi = async selectedItem => {
  const { data, code } = await getUserListObjectByModelId({
    modelId: selectedItem.assessmentModelId,
    assessmentId: selectedItem.assessmentId,
    type: 3
  });
  if (code === 200) {
    dataList.leaderList = data;
  }
};
// getLeaderListApi();
// ----------------------------
const init = reactive({
  assessmentName: "",
  assessmentModelName: "",
  deptName: "",
  assessmentObjectName: "",
  dimensionName: ""
});
const handClickInit1 = value => {
  if (value) {
    const selectedItem = dataList.magList.find(item => item.id === value);
    init.assessmentName = selectedItem.name;
    localStorage.setItem("fileName", selectedItem.name);
    getTemplateInfoListApi(selectedItem);
  }
  Object.assign(dataList.params, {
    assessmentModelId: "",
    assessmentObjectId: ""
  });
  Object.assign(init, {
    assessmentModelName: "",
    deptName: "",
    assessmentObjectName: "",
    dimensionName: ""
  });
  $emit("handClick", {
    ...dataList.params,
    ...init
  }),
    "0";
};
const handClickInit2 = value => {
  if (value) {
    const selectedItem = dataList.teplist.find(
      item => item.assessmentModelId === value
    );
    init.assessmentModelName = selectedItem.assessmentModelName;
    getLeaderListApi(selectedItem);
  }
  Object.assign(dataList.params, {
    assessmentObjectId: ""
  });
  $emit(
    "handClick",
    {
      ...dataList.params,
      ...init
    },
    "0"
  );
};
const handClickInit3 = value => {
  if (value) {
    const selectedItem = dataList.leaderList.find(
      item => item.assessmentObjectId === value
    );
    init.assessmentObjectName = selectedItem.assessmentObjectName;
  }
  $emit(
    "handClick",
    {
      ...dataList.params,
      ...init
    },
    "1",
    value
  );
};

const route = useRoute();
const getSearchFrom = () => {
  if (Object.keys(route.query).length > 0) {
    const {
      assessmentId,
      assessmentModelId,
      assessmentObjectId,
      assessmentName,
      assessmentModelName,
      assessmentObjectName
    } = route.query;
    const obj = ["assessmentId", "assessmentModelId", "assessmentObjectId"];
    const initObj = [
      "assessmentName",
      "assessmentModelName",
      "assessmentObjectName"
    ];
    obj.map(item => {
      dataList.params[item] = route.query[item];
    });
    initObj.map(item => {
      init[item] = route.query[item];
    });
    const selectedItem = dataList.magList.find(
      item => item.id === assessmentId
    );
    getTemplateInfoListApi(selectedItem);
    setTimeout(() => {
      const selectedItems = dataList.teplist.find(
        item => item.assessmentModelId === assessmentModelId
      );
      // userPageWhitOrganizationApi(selectedItems);
      getLeaderListApi(selectedItems);
      setTimeout(() => {
        $emit(
          "handClick",
          {
            ...dataList.params,
            ...init
          },
          1
        );
      }, 100);
    }, 300);
  }
};

// 考核活动
const getAssessmentPageListApi = async () => {
  const { data, code } = await getAssessmentList({
    type: 3
  });
  if (code === 200) {
    dataList.magList = data;
    getSearchFrom();
  }
};
getAssessmentPageListApi();
// 清除条件
const handClickClear1 = () => {
  dataList.teplist = [];
  dataList.leaderList = [];
};
const handClickClear2 = () => {
  dataList.leaderList = [];
};
</script>

<template>
  <div class="w-full">
    <div class="mb-2 flex gap-2 justify-between flex-wrap">
      <div class="w-[100%] flex mt-2">
        <div class="flex mr-2">
          <div class="text-sm leading-8 mr-3">考核活动</div>
          <el-select
            v-model="dataList.params.assessmentId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit1"
            @clear="handClickClear1"
          >
            <el-option
              v-for="item in dataList.magList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="flex mr-2">
          <div class="text-sm leading-8 mr-3">考核模板</div>
          <el-select
            v-model="dataList.params.assessmentModelId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit2"
            @clear="handClickClear2"
          >
            <el-option
              v-for="item in dataList.teplist"
              :key="item.assessmentModelId"
              :label="item.assessmentModelName"
              :value="item.assessmentModelId"
            />
          </el-select>
        </div>
        <div class="flex mr-2">
          <div class="text-sm leading-8 mr-3">科主任</div>
          <!-- <el-tree-select
            v-model="dataList.params.deptCode"
            :data="dataList.deptList"
            check-strictly
            filterable
            clearable
            :props="{
              label: 'deptName',
              value: 'deptCode',
              children: 'childrenRes'
            }"
            style="width: 200px"
            @change="handClickInit3"
          /> -->
          <el-select
            v-model="dataList.params.assessmentObjectId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit3"
          >
            <el-option
              v-for="item in dataList.leaderList"
              :key="item.assessmentObjectId"
              :label="item.assessmentObjectName"
              :value="item.assessmentObjectId"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
