<template>
  <el-form :model="screenForm" ref="screenFormRef" inline size="small">
    <el-form-item label="所属站点" prop="districtId">
      <div class="screen-item">
        <district-screen
          v-model:districtId="screenForm.districtId"
          ref="districtScreenRef"
          @districtChange="districtChange"
        ></district-screen>
      </div>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <div class="screen-item">
        <el-input v-model="screenForm.name" clearable></el-input>
      </div>
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <div class="screen-item">
        <el-input v-model="screenForm.mobile" clearable></el-input>
      </div>
    </el-form-item>
    <el-form-item label="系统权限类型" prop="roleType">
      <div class="screen-item">
        <el-select v-model="screenForm.roleType" clearable>
          <template
            v-for="(item, index) in selectItems['roleType']"
            :key="index"
          >
            <el-option :label="item.value" :value="item.key"></el-option>
          </template>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="账号角色类型" prop="approle">
      <div class="screen-item">
        <el-select v-model="screenForm.approle" clearable>
          <template
            v-for="(item, index) in selectItems['approle']"
            :key="index"
          >
            <el-option :label="item.value" :value="item.key"></el-option>
          </template>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="考勤状态" prop="workStatus">
      <div class="screen-item">
        <el-select v-model="screenForm.workStatus" clearable>
          <template
            v-for="(item, index) in selectItems['workStatus']"
            :key="index"
          >
            <el-option :label="item.value" :value="item.key"></el-option>
          </template>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="工作状态" prop="workAtStatus">
      <div class="screen-item">
        <el-select v-model="screenForm.workAtStatus" clearable>
          <template
            v-for="(item, index) in selectItems['workAtStatus']"
            :key="index"
          >
            <el-option :label="item.value" :value="item.key"></el-option>
          </template>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="试用期保护" prop="probationProtection">
      <div class="screen-item">
        <el-select v-model="screenForm.probationProtection" clearable>
          <template
            v-for="(item, index) in selectItems['probationProtection']"
            :key="index"
          >
            <el-option :label="item.value" :value="item.key"></el-option>
          </template>
        </el-select>
      </div>
    </el-form-item>

    <el-form-item label="服务区域" prop="localServiceAreas">
      <div class="screen-item">
        <el-cascader
          :options="serviceAreaOptions"
          :props="serviceAreaProps"
          v-model="screenForm.localServiceAreas"
          ref="serviceAreasRef"
          clearable
        />
      </div>
    </el-form-item>
    <el-form-item label="服务事项" prop="serviceEvents">
      <div class="screen-item">
        <el-select v-model="screenForm.serviceEvents" multiple clearable>
          <template v-for="item in eventData" :key="item.id">
            <el-option :label="item.name" :value="item"></el-option>
          </template>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="所属班组" prop="groups">
      <div class="screen-item">
        <el-select v-model="screenForm.groups" multiple clearable>
          <template v-for="item in groupData" :key="item.id">
            <el-option :label="item.name" :value="item"></el-option>
          </template>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="search" size="small" @click="restSearch"
        >查询</el-button
      >
      <el-button
        icon="Refresh"
        size="small"
        @click="clearScreen(screenFormRef, ['districtId'])"
        >重置</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import { dropdownService } from "@/ApiService/dropdownService.js";
const props = defineProps({
  screenForm: {
    type: Object,
    default: {
      name: "",
      mobile: "",
      roleType: "",
      districtId: 0,
      approle: "",
      workStatus: "",
      workAtStatus: "",
      probationProtection: "",
    },
  },
  selectItems: Object,
});
const screenFormRef = ref();
const districtScreenRef = ref();
const serviceAreaOptions = ref([]);
const groupData = ref([]);
const eventData = ref([]);
const serviceAreaProps = reactive({
  expandTrigger: "hover",
  multiple: true,
  checkStrictly: true,
  children: "childNode",
  label: "name",
  value: "id",
});
const serviceAreasRef = ref();
const $emits = defineEmits(["restSearch", "clearScreen"]);
const clearScreen = (screenFormRefDom, arr) => {
  // screenFormRefDom.resetFields();
  // fetchSite()
  $emits("clearScreen", screenFormRefDom, arr);
};
const restSearch = () => {
  console.log(serviceAreasRef.value.getCheckedNodes());
  const checkNodes = serviceAreasRef.value.getCheckedNodes();
  props.screenForm.serviceAreas = checkNodes.map((item) => {
    const { gridId, id, isscene, level, name, sceneId } = item.data;
    return { gridId, id, isscene, level, name, sceneId };
  });
  $emits("restSearch", true);
};
// 监听站点变化
const districtChange = (obj) => {
  props.screenForm.serviceAreas = null;
  props.screenForm.serviceEvents = null;
  props.screenForm.groups = null;
  if (obj) {
    fetchGridTree();
    fetchMatter();
    fetchWorkGroup();
  } else {
    serviceAreaOptions.value = [];
    groupData.value = [];
    eventData.value = [];
  }
};
const fetchGridTree = () => {
  dropdownService
    .gridSceneTree({ districtId: props.screenForm.districtId })
    .then((res) => {
      if (res.code == 0) {
        serviceAreaOptions.value = res.data.childNode;
      } else {
        $message.error(res.err);
      }
    });
};
const fetchMatter = () => {
  dropdownService
    .selectMatter({ districtId: props.screenForm.districtId })
    .then((res) => {
      if (res.code == 0) {
        eventData.value = res.data;
      } else {
        $message.error(res.err);
      }
    });
};
const fetchWorkGroup = () => {
  dropdownService
    .selectWorkGroup({ districtId: props.screenForm.districtId })
    .then((res) => {
      if (res.code == 0) {
        groupData.value = res.data;
      } else {
        $message.error(res.err);
      }
    });
};
const fetchSite = () => {
  districtScreenRef.value.fetchDistricts().then((res) => {
    if (res && res.length != 0) {
      props.screenForm.districtId = res[0].id;
      fetchGridTree();
      fetchMatter();
      fetchWorkGroup();
    } else {
      props.screenForm.districtId = null;
    }
    restSearch();
  });
};
onMounted(() => {
  fetchSite();
});
</script>
<script>
export default {
  name: "userManageScreen",
};
</script>
