<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getUserListObjectByModelId, getAssessmentIndName } from "@/api/draw";

const props = defineProps({
  // 行数
  activeName: {
    type: String,
    default: "0"
  }
});
const $emit = defineEmits(["handClick"]);
const dataList = reactive({
  teplist: [],
  personList: [],
  magList: [],
  deptList: [],
  params: {
    assessmentId: "",
    assessmentModelId: "",
    deptCode: "",
    assessmentObjectId: "",
    indName: ""
  }
});

// 员工
const userCodeList = ref([]);
const userPageWhitOrganizationApi = async (selectedItem, type) => {
  let assessmentId;
  if (type) {
    assessmentId = selectedItem.id;
  } else {
    assessmentId = selectedItem.assessmentId;
  }
  const { data, code } = await getUserListObjectByModelId({
    modelId: selectedItem?.assessmentModelId,
    assessmentId,
    type: 0
  });
  if (code === 200) {
    dataList.personList = data;
    data.map(item => {
      if (
        item.assessmentObjectId &&
        item.assessmentObjectId.substring(0, 4) == "user"
      ) {
        userCodeList.value.push(item.assessmentObjectId);
      }
    });
  }
};

// 指标
const route = useRoute();
const assessmentList = ref([]);
const getAssessmentIndNameApi = async () => {
  const { data, code } = await getAssessmentIndName({
    assessmentId: route.query.id
  });
  if (code === 200) {
    assessmentList.value = data;
  }
};

onMounted(() => {
  dataList.params.assessmentId = route.query.id;
  dataList.params.assessmentModelId = route.query.mid;
  init.assessmentName = route.query.name;
  init.assessmentModelName = route.query.mname;
  userPageWhitOrganizationApi(
    {
      assessmentId: route.query.id,
      assessmentModelId: route.query.mid
    },
    0
  );
  getAssessmentIndNameApi();
});

// -----------------------------------
const init = reactive({
  assessmentName: "",
  assessmentModelName: "",
  deptName: "",
  assessmentObjectName: "",
  dimensionName: ""
});
const handClickInit4 = value => {
  if (value) {
    const selectedItem = dataList.personList.find(
      item => item.assessmentObjectId === value
    );
    init.assessmentObjectName = selectedItem.assessmentObjectName;
  }
  $emit(
    "handClick",
    {
      ...dataList.params,
      ...init
    },
    "1"
  );
};
const handClickInit5 = value => {
  $emit(
    "handClick",
    {
      ...dataList.params,
      ...init,
      indName: value
    },
    "1"
  );
};
</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 v-if="props.activeName === '0'" class="flex mr-2">
          <div class="text-sm leading-8 mr-3">员工</div>
          <el-select
            v-model="dataList.params.assessmentObjectId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit4"
          >
            <el-option
              v-for="item in dataList.personList"
              :key="item.assessmentObjectId"
              :label="item.assessmentObjectName"
              :value="item.assessmentObjectId"
            />
          </el-select>
        </div>
        <div v-else class="flex mr-2">
          <div class="text-sm leading-8 mr-3">指标</div>
          <el-select
            v-model="dataList.params.indName"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit5"
          >
            <el-option
              v-for="(item, idx) in assessmentList"
              :key="idx"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
