<template>
  <div class="resource-search">
    <!-- 绫诲埆 -->
    <div class="resource-type">
      <div
        class="resource-type-item"
        v-for="item in resourceTypes"
        :class="[
          item.value === activeType ? 'resource-type-item-active' : '',
          item.value == 5 && !isShowDevice ? 'resource-type-item-disabled' : '',
          item.value == 7 && !isShowExam ? 'resource-type-item-disabled' : '',
        ]"
        :key="item.value"
        @click="switchType(item.value)"
      >
        <i class="icon" :class="'icon-' + item.value"></i>
        <span class="name">{{ item.name }}</span>
      </div>
    </div>
    <!-- 绛涢€夋 鎼滀紒涓�-->
    <div v-if="activeType === '1' && filterShow" class="filter-content">
      <el-form class="filter-form" :model="formCompany">
        <el-form-item label="浼佷笟绫诲瀷" style="padding-top: 3px" v-if="isSecurity || isPoliceStation">
          <el-radio-group v-model="formCompany.institutional">
            <el-radio label="" style="padding-top: 8px">鍏ㄩ儴</el-radio>
            <el-radio style="padding-top: 8px" v-for="item in securityTypes" :key="item.code" :label="item.code">{{
              item.name
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="isSecurity || isPoliceStation || isPopulationTeam" label="杈栧尯" style="padding-top: 6px">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="璇烽€夋嫨"
            :normalizer="normalizer1"
            v-model="formCompany.depart"
            noOptionsText="鏃犳暟鎹�"
            noResultsText="鏃犳暟鎹�"
            @select="onSelectCompanyDeparts"
          />
        </el-form-item>
        <el-form-item class="center is-last">
          <el-button
            class="btn-full"
            type="primary"
            @click="searchCompany"
            :disabled="loading"
            v-loading="loading"
            element-loading-spinner="el-icon-loading"
          >
            鎼滅储
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 绛涢€夋 鎼滀繚瀹夊憳 -->
    <div v-if="activeType === '2' && filterShow" class="filter-content">
      <el-form class="filter-form" :model="formEmployee">
        <el-form-item label="绫诲瀷" style="padding-top: 6px" v-if="isPoliceStation">
          <el-radio-group class="multi-row-radio" v-model="formEmployee.resourceType">
            <el-radio :label="1">鍏ㄩ€�</el-radio>
            <el-radio :label="2">淇濆畨鍛�</el-radio>
            <el-radio v-if="platform === '1'" :label="3">鍏ㄩ儴绀句細鍔涢噺</el-radio>
            <el-radio v-if="platform === '1'" :label="4">鍏艰亴绀句細鍔涢噺(閮ㄥ垎淇濆畨鍛�)</el-radio>
            <el-radio v-if="platform === '1'" :label="5" style="padding-top: 10px; margin-bottom: 0">鍏ㄨ亴绀句細鍔涢噺</el-radio>
            <el-radio v-if="platform === '2'" :label="6" style="padding-top: 10px; margin-bottom: 0">鐢叉柟绠＄悊鍛�</el-radio>
            <el-radio :label="7" disabled style="padding-top: 10px; margin-bottom: 0">鏅鸿兘璁惧鎸佹湁浜�</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="绫诲瀷" style="padding-top: 6px" v-if="isPopulationTeam">
          <el-radio-group v-model="formEmployee.resourceType">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio v-if="platform === '1'" :label="3">绀句細鍔涢噺</el-radio>
            <el-radio v-if="platform === '1'" :label="4">绀句細鍔涢噺锛堜繚瀹夊憳锛�</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item
          label="鍏虫敞绫诲瀷"
          style="padding-top: 6px"
          v-if="isSecurity || isPoliceStation || isPopulationTeam || isCompany"
        >
          <el-radio-group v-model="formEmployee.type">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">宸插叧娉�</el-radio>
            <el-radio :label="3">鏈叧娉�</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="鍦ㄥ矖鐘舵€�"
          style="padding-top: 6px"
          v-if="isSecurity || isPoliceStation || isPopulationTeam || isCompany"
        >
          <el-radio-group v-model="formEmployee.status">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">鍦ㄥ矖</el-radio>
            <el-radio :label="3">绂诲矖</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="杈栧尯" style="padding-top: 6px" v-if="isSecurity || isPoliceStation || isPopulationTeam">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="璇烽€夋嫨"
            :normalizer="normalizer"
            v-model="formEmployee.depart"
            noOptionsText="鏃犳暟鎹�"
            noResultsText="鏃犳暟鎹�"
            :flat="true"
            @select="onSelectEmployeeDeparts"
          />
        </el-form-item>
        <el-form-item class="center is-last">
          <el-button
            class="btn-full"
            type="primary"
            :disabled="loading"
            v-loading="loading"
            element-loading-spinner="el-icon-loading"
            @click.prevent="searchEmployee(false)"
          >
            鎼滅储
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 绛涢€夋 鎼滈┗鍕ょ偣 -->
    <div v-if="activeType === '3' && filterShow" class="filter-content">
      <el-form class="filter-form" :model="formStation">
        <station-types-form
          v-if="formStation.resourceType === 1 || formStation.resourceType === 2"
          :station-types="stationTypes"
          :is-security="isSecurity"
          :is-company="isCompany"
          :is-police-station="isPoliceStation"
          @handleCheckChange="handleCheckChange"
        ></station-types-form>
        <el-form-item label="绫诲瀷" style="padding-top: 3px" v-if="platform === '1' && (isPoliceStation || isPopulationTeam)">
          <el-radio-group v-model="formStation.resourceType">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">椹诲嫟鐐�</el-radio>
            <el-radio :label="3">绀惧尯璀﹀姟</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="鍏虫敞绫诲瀷"
          style="padding-top: 3px"
          v-if="isSecurity || isPoliceStation || isPopulationTeam || isCompany"
        >
          <el-radio-group v-model="formStation.type">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">宸插叧娉�</el-radio>
            <el-radio :label="3">鏈叧娉�</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="杈栧尯" style="padding-top: 3px" v-if="isSecurity || isPoliceStation || isPopulationTeam">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="璇烽€夋嫨"
            :normalizer="normalizer1"
            v-model="formStation.depart"
            noOptionsText="鏃犳暟鎹�"
            noResultsText="鏃犳暟鎹�"
            @select="onSelectStationDepart"
          />
        </el-form-item>
        <el-form-item class="center is-last">
          <el-button
            class="btn-full"
            type="primary"
            :disabled="loading"
            v-loading="loading"
            element-loading-spinner="el-icon-loading"
            @click="searchStation"
          >
            鎼滅储
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 绛涢€夋 鎼滃唴淇濆崟浣� -->
    <div v-if="activeType === '4' && platform === '2' && filterShow" class="filter-content">
      <el-form class="filter-form" :model="formCompany">
        <el-form-item label="鍐呬繚鍗曚綅绫诲瀷" style="padding-top: 3px" v-if="platform === '2' && isPoliceStation">
          <el-checkbox :indeterminate="isIndeterminatePro" v-model="checkAllPro" @change="handleCheckAllChangePro"
            >鍏ㄩ€�</el-checkbox
          >
          <el-checkbox-group v-model="formCompany.institutional" @change="handleCheckedCitiesChangePro">
            <el-row>
              <el-col style="padding-top: 10px" v-for="item in proprietorTypes" :key="item.code" :span="8">
                <el-checkbox :label="item.code">
                  <span style="font-size: 12px; padding-left: 2px">{{ item.name }}</span>
                </el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="鍏虫敞绫诲瀷" style="padding-top: 3px">
          <el-radio-group v-model="formCompany.type">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">宸插叧娉�</el-radio>
            <el-radio :label="3">鏈叧娉�</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="isPoliceStation || !isProprietor" label="杈栧尯" style="padding-top: 3px">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="璇烽€夋嫨"
            :normalizer="normalizer1"
            v-model="formCompany.depart"
            noOptionsText="鏃犳暟鎹�"
            noResultsText="鏃犳暟鎹�"
            @select="onSelectCompanyDeparts"
          />
        </el-form-item>
        <el-form-item class="center is-last">
          <el-button
            class="btn-full"
            type="primary"
            :disabled="loading"
            v-loading="loading"
            element-loading-spinner="el-icon-loading"
            @click="searchProprietor"
          >
            鎼滅储
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 绛涢€夋 鎼滄櫤鑳借澶� -->
    <div v-if="activeType === '5' && filterShow" class="filter-content">
      <el-form class="filter-form" :model="formDevice">
        <el-form-item label="鍏虫敞绫诲瀷" style="padding-top: 6px">
          <el-radio-group v-model="formDevice.focus">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">宸插叧娉�</el-radio>
            <el-radio :label="3">鏈叧娉�</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="璁惧绫诲瀷" style="padding-top: 6px">
          <el-radio-group v-model="formDevice.type">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio v-for="item in deviceTypes" :key="item.code" :label="item.code">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="center is-last">
          <el-button
            class="btn-full"
            type="primary"
            :disabled="loading"
            v-loading="loading"
            element-loading-spinner="el-icon-loading"
            @click="searchDevice"
          >
            鎼滅储
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 绛涢€夋 鎼滅數瀛愬洿鏍� -->
    <div v-if="activeType === '6' && filterShow" class="filter-content">
      <el-form class="filter-form" :model="formSecurityStationRail">
        <el-form-item v-if="isSupervision" label="杈栧尯" style="padding-top: 6px">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="璇烽€夋嫨"
            :normalizer="normalizer1"
            v-model="formSecurityStationRail.depart"
            noOptionsText="鏃犳暟鎹�"
            noResultsText="鏃犳暟鎹�"
            @select="onSelectRailDepart"
          />
        </el-form-item>
        <el-form-item class="center is-last">
          <el-button
            class="btn-full"
            type="primary"
            :disabled="loading"
            v-loading="loading"
            element-loading-spinner="el-icon-loading"
            @click="searchRail"
          >
            鎼滅储
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 绛涢€夋 鎼滆€冨満 -->
    <div v-if="activeType === '7' && filterShow" class="filter-content">
      <el-form class="filter-form" :model="formExam">
        <el-form-item label="鍏虫敞绫诲瀷" style="padding-top: 6px">
          <el-radio-group v-model="formExam.type">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">宸插叧娉�</el-radio>
            <el-radio :label="3">鏈叧娉�</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="鑰冨満鐘舵€�" style="padding-top: 6px">
          <el-radio-group v-model="formExam.status">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">鍚敤</el-radio>
            <el-radio :label="3">绂佺敤</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="鑰冭瘯鐘舵€�" style="padding-top: 6px">
          <el-radio-group v-model="formExam.examTaking">
            <el-radio :label="1">鍏ㄩ儴</el-radio>
            <el-radio :label="2">鑰冭瘯涓�</el-radio>
            <el-radio :label="3">鏃犺€冭瘯</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="isSupervision" label="杈栧尯" style="padding-top: 6px">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="璇烽€夋嫨"
            :normalizer="normalizer1"
            v-model="formExam.depart"
            noOptionsText="鏃犳暟鎹�"
            noResultsText="鏃犳暟鎹�"
            @select="onSelectExamDepart"
          />
        </el-form-item>
        <el-form-item class="center is-last">
          <el-button
            class="btn-full"
            type="primary"
            :disabled="loading"
            v-loading="loading"
            element-loading-spinner="el-icon-loading"
            @click.prevent="searchExamSiteRooms(false)"
          >
            鎼滅储
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 绛涢€�/鏀惰捣 鎸夐挳 -->
    <div v-if="activeType && activeType !== '1'" class="filter-bar" @click="filterShow = !filterShow">
      <span class="text">{{ filterText }}</span>
      <i class="arrow" :class="'arrow-' + (filterShow ? 'up' : 'down')"></i>
    </div>
    <!-- 鏌ヨ鎬绘暟缁熻鍊� -->
    <div v-if="activeType && activeType !== '5' && activeType !== '6'" class="total">
      <span class="label">鎬绘暟</span>
      <span class="value">{{ total }}</span>
      <span v-if="activeType === '2'" class="label label-green">鍦ㄥ矖鏁�</span>
      <span v-if="activeType === '2'" class="value value-on">{{ onDuty }}</span>
      <span v-if="activeType === '2'" class="label label-gray">绂诲矖鏁�</span>
      <span v-if="activeType === '2'" class="value value-off">{{ noDuty }}</span>
      <span v-if="activeType === '2'" class="label label-gray">鏈縺娲绘暟</span>
      <span v-if="activeType === '2'" class="value value-off">{{ noActivation }}</span>
      <span v-if="activeType === '1' || activeType === '3'" class="label label-gray">鏃犲潗鏍囨暟</span>
      <span v-if="activeType === '1' || activeType === '3'" class="value value-off">{{ noLonLat }}</span>
      <span v-if="activeType === '7'" class="label label-green">鍚敤鎬绘暟</span>
      <span v-if="activeType === '7'" class="value value-on">{{ onExam }}</span>
      <span v-if="activeType === '7'" class="label label-gray">绂佺敤鎬绘暟</span>
      <span v-if="activeType === '7'" class="value value-off">{{ noExam }}</span>
    </div>
  </div>
</template>

<script>
// import {mapGetters} from "vuex";
import treeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getEmployees } from "@/api/employee-controller";
import { getExamSiteRooms } from "@/api/exam-site-room-controller";
import { getCompanys } from "@/api/company-controller";
import { getAllStationTypes, getStations } from "@/api/security-station-controller";
import { getDeparts } from "@/api/departs-controller";
import { getDeviceType, getOrganizationType } from "@/api/resource-controller";
import { searchRail } from "@/api/security-station-rails-controller";
import _ from "lodash";
import stationTypesForm from "@/components/StationTypesForm/index.vue";

export default {
  name: "resourceSearch",
  components: { treeSelect, stationTypesForm },
  data() {
    return {
      platform: localStorage.getItem("platform") || "1",
      deskTypes:
        localStorage.getItem("platform") === "2"
          ? ["Proprietor"]
          : localStorage.getItem("platform") === "3"
          ? ["TemporarySecurity"]
          : ["Normal"],
      isCompany: false,
      isIndeterminate: false,
      isIndeterminatePro: false,
      checkAll: false,
      checkAllPro: false,
      companyTypes: [],
      securityTypes: [],
      securityTypesCode: [],
      proprietorTypes: [],
      proprietorTypesCode: [],
      deviceTypes: [],
      resourceTypes: [],
      activeType: "",
      filterShow: false,
      isSecurity: false, //褰撳墠鐢ㄦ埛瑙掕壊鏄惁涓烘不瀹夊競灞€/鍒嗗眬
      isPopulationTeam: false, //褰撳墠鐢ㄦ埛瑙掕壊鏄惁涓轰汉鍙ｆ€婚槦甯傚眬/鍒嗗眬
      isPoliceStation: false, //褰撳墠鐢ㄦ埛瑙掕壊鏄惁涓烘淳鍑烘墍
      isSupervision: false, //鏄惁鐩戠绔� 鏄剧ず杈栧尯锛氫紒涓氳处鍙疯繘鏉ヤ笉灞曠ず銆愯緰鍖恒€戠瓫閫夐」:false锛屽彧鏈夌洃绠¤处鍙疯繘鏉ユ墠灞曠ず:true
      isProprietor: false, //鏄惁鍐呬繚鍗曚綅
      isShowDevice: false, //鏄惁鍙敤鏅鸿兘璁惧
      isShowExam: false, //鏄惁鍙敤鑰冨満
      stationTypes: [],
      departs: [],
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.code,
          label: node.name,
          children: node.children,
          // isDisabled: !node.selectable,
          isDisabled: false,
        };
      },
      normalizer1(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.code,
          label: node.name,
          children: node.children,
        };
      },
      total: 0, //鎬绘暟
      onDuty: 0, //鍦ㄥ矖
      noDuty: 0, //绂诲矖
      noActivation: 0, //鏈縺娲�
      noLonLat: 0, //鏃犲潗鏍囨暟
      onExam: 0, //鍚敤鎬绘暟
      noExam: 0, //绂佺敤鎬绘暟
      formCompany: {
        institutional: [],
        type: 1,
        depart: null,
        superviseDepartIds: [],
      },
      formEmployee: {
        resourceType: 1,
        type: 1,
        status: 1,
        depart: null,
        superviseDepartIds: [],
      },
      formDevice: {
        focus: null,
        type: null,
      },
      formStation: {
        resourceType: 1,
        type: 1,
        stationType: [],
        depart: null,
        superviseDepartIds: [],
      },
      formSecurityStationRail: {
        depart: null,
        superviseDepartIds: [],
      },
      formExam: {
        type: 1,
        status: 1,
        examTaking: 1,
        depart: null,
        superviseDepartIds: [],
      },
      loading: false,
    };
  },
  computed: {
    filterText() {
      return this.filterShow ? "鏀惰捣" : "绛涢€�";
    },
  },
  methods: {
    handleCheckChange(val) {
      this.formStation.stationType = val;
    },
    handleCheckAllChange(val) {
      this.formStation.stationType = val ? this.stationTypes.map((x) => x.code) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.stationTypes.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.stationTypes.length;
    },
    handleCheckAllChangePro(val) {
      this.formCompany.institutional = val ? this.proprietorTypes.map((x) => x.code) : [];
      this.isIndeterminatePro = false;
    },
    handleCheckedCitiesChangePro(value) {
      let checkedCount = value.length;
      this.checkAllPro = checkedCount === this.proprietorTypes.length;
      this.isIndeterminatePro = checkedCount > 0 && checkedCount < this.proprietorTypes.length;
    },
    async init() {
      this.stationTypes = await getAllStationTypes({ deskTypes: [] }); //鑾峰彇椹诲嫟鐐逛俊鎭�
      console.log("stationTypes", this.stationTypes);
      this.companyTypes = await getOrganizationType(); // 鑾峰彇浼佷笟绫诲瀷 {code,name}
      this.securityTypes = this.companyTypes.filter((item) => item.category === "Security");
      this.securityTypesCode = this.securityTypes.map((item) => {
        return item.code;
      });
      this.proprietorTypes = this.companyTypes.filter((item) => item.category === "Proprietor");
      this.proprietorTypesCode = this.proprietorTypes.map((item) => {
        return item.code;
      });
      console.log(
        "proprietorTypes",
        this.proprietorTypes.map((item) => {
          return item.code;
        })
      );
      this.deviceTypes = await getDeviceType(); // 鑾峰彇璁惧绫诲瀷 {code,name}
      console.log("deviceTypes", this.deviceTypes);
      this.departs = await getDeparts({ deskTypes: this.deskTypes }); // 鑾峰彇杈栧尯鏍�
      console.log("departs", this.departs);
      //鍒ゆ柇鏄惁鏄剧ず杈栧尯
      // let accountType = "";
      // let deviceDeskServiceScopes = [];
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        this.isSupervision = JSON.parse(userInfo).superviseDesk; //鍒ゆ柇韬唤 ture:鐩戠璐︽埛锛沠alse:浼佷笟璐︽埛
        this.isCompany = JSON.parse(userInfo).role === "Company" || JSON.parse(userInfo).role === "Proprietor";
        this.isSecurity = JSON.parse(userInfo).role === "Urban" || JSON.parse(userInfo).role === "SubUrb";
        this.isPopulationTeam =
          JSON.parse(userInfo).role === "PopulationUrban" || JSON.parse(userInfo).role === "PopulationSubUrb";
        this.isPoliceStation =
          JSON.parse(userInfo).role === "PopulationPoliceStation" || JSON.parse(userInfo).role === "PoliceStation";
        this.isProprietor = JSON.parse(userInfo).role === "Proprietor"; //鏄惁鍐呬繚鍗曚綅
        if (this.isPopulationTeam || this.isPoliceStation) {
          //濡傛灉鐢ㄦ埛瑙掕壊鏄汉鍙ｆ€婚槦 PopulationUrban 浜哄彛甯傚眬  PopulationSubUrb 浜哄彛鍒嗗眬  PopulationPoliceStation 浜哄彛娲惧嚭鎵€  PoliceStation 娲惧嚭鎵€
          if (this.platform === "1") {
            this.resourceTypes = [
              {
                name: "浼佷笟",
                value: "1",
              },
              {
                name: "浜哄憳",
                value: "2",
              },
              {
                name: "鎵у嫟鐐�",
                value: "3",
              },
              {
                name: "鏅鸿兘璁惧",
                value: "5",
              },
              {
                name: "鐢靛瓙鍥存爮",
                value: "6",
              },
              {
                name: "鑰冨満",
                value: "7",
              },
            ];
          } else {
            this.resourceTypes = [
              {
                name: "浜哄憳",
                value: "2",
              },
              {
                name: "椹诲嫟鐐�",
                value: "3",
              },
              {
                name: "鍐呬繚鍗曚綅",
                value: "4",
              },
              {
                name: "鏅鸿兘璁惧",
                value: "5",
              },
              {
                name: "鐢靛瓙鍥存爮",
                value: "6",
              },
            ];
          }
        } else if (this.isProprietor || this.platform === "2") {
          this.resourceTypes = [
            {
              name: "浜哄憳",
              value: "2",
            },
            {
              name: "椹诲嫟鐐�",
              value: "3",
            },
            {
              name: "鍐呬繚鍗曚綅",
              value: "4",
            },
            {
              name: "鏅鸿兘璁惧",
              value: "5",
            },
            {
              name: "鐢靛瓙鍥存爮",
              value: "6",
            },
          ];
        } else {
          this.resourceTypes = [
            {
              name: "浼佷笟",
              value: "1",
            },
            {
              name: "淇濆畨鍛�",
              value: "2",
            },
            {
              name: "椹诲嫟鐐�",
              value: "3",
            },
            {
              name: "鏅鸿兘璁惧",
              value: "5",
            },
            {
              name: "鐢靛瓙鍥存爮",
              value: "6",
            },
            {
              name: "鑰冨満",
              value: "7",
            },
          ];
        }
        this.isShowDevice = [
          "TLK_DMT1", //娴嬭瘯鐜浣跨敤
          "TLK_DMT347", //娴嬭瘯鐜浣跨敤
          "__yUx7oCr0CPEjfFd0T1K",
          "__Ovmh5cBQhH9e6IJtWlz",
          "O7f4fVUf",
        ].includes(JSON.parse(userInfo).organizationId);

        this.isShowExam = [
          "TLK_DMT1", //娴嬭瘯鐜浣跨敤
          "TLK_DMT347", //娴嬭瘯鐜浣跨敤
          "__l4j8hCF7xNmFSRfeQb0",
          "7JXUKfBb",
          "O7f4fVUf",
          "09T9dNBG",
          "VxPArVQC",
          "__iZjB3As6MOfttXkZTXo",
        ].includes(JSON.parse(userInfo).organizationId);
      }
    },
    // 鍒囨崲鎼滅储绫诲瀷
    switchType(type) {
      this.activeType = type;
      this.filterShow = true;
      this.$emit("switchType", this.activeType);
      this.$emit("clearMap");
      this.total = 0;
      this.onDuty = 0;
      this.noDuty = 0;
      this.noActivation = 0;
      this.noLonLat = 0;
      this.onExam = 0;
      this.noExam = 0;

      if (this.isSupervision) {
        //鐩戠璋冨害
      } else {
        //浼佷笟璋冨害
        if (type == 1) {
          this.filterShow = false;
          this.searchCompany();
        }
      }
    },
    // 鏄剧ず绛涢€夋潯浠�
    showFilter() {
      this.filterShow = true;
    },
    // 鏀惰捣绛涢€夋潯浠�
    hideFilter() {
      this.filterShow = false;
    },
    // 鎼滀紒涓�
    searchCompany() {
      var institutional = [];
      console.log("institutional", this.formCompany.institutional);
      if (this.formCompany.institutional.length === 0) {
        institutional = this.securityTypesCode;
      } else {
        institutional = [this.formCompany.institutional + ""];
      }

      this.loading = true;
      getCompanys({
        institutionals: institutional,
        superviseDepartIds: this.formCompany.superviseDepartIds,
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        searchModel: "SecurityResource",
      })
        .then((res) => {
          console.log(res);
          this.$emit("searchCompany", res);
        })
        .catch((err) => {
          this.$emit("searchCompany", []);
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 鎼滀繚瀹夊憳
    searchEmployee() {
      if (this.isSupervision && !this.formEmployee.depart) {
        this.$message({
          message: "璇烽€夋嫨杈栧尯",
          type: "warning",
        });
        return;
      }
      var resourceTypes = null;
      if (this.formEmployee.resourceType == "2") {
        resourceTypes = ["Security"];
      } else if (this.formEmployee.resourceType == "3") {
        resourceTypes = ["Population"];
      } else if (this.formEmployee.resourceType == "4") {
        resourceTypes = ["Population", "Security"];
      } else if (this.formEmployee.resourceType == "5") {
        resourceTypes = ["ProfessionalPopulation"];
      } else if (this.formEmployee.resourceType == "6") {
        resourceTypes = ["Proprietor"];
      }

      var followed = null;
      if (this.formEmployee.type == "2") {
        followed = true;
      } else if (this.formEmployee.type == "3") {
        followed = false;
      }
      var onDuty = null;
      if (this.formEmployee.status == "2") {
        onDuty = true;
      } else if (this.formEmployee.status == "3") {
        onDuty = false;
      }
      this.loading = true;
      getEmployees({
        pageIndex: 1,
        pageSize: 5000,
        followed: followed,
        onDuty: onDuty,
        resourceTypes: resourceTypes,
        superviseDepartIds: this.formEmployee.superviseDepartIds,
        searchModel: "SecurityResource",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
      })
        .then((res) => {
          console.log(res);
          this.$emit("searchEmployee", res);
        })
        .catch((err) => {
          this.$emit("searchEmployee", []);
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //璁剧疆淇濆畨鍛樹汉鏁�
    setEmployeeNum(onDuty, noDuty, noActivation) {
      this.total = onDuty + noDuty + noActivation;
      this.onDuty = onDuty;
      this.noDuty = noDuty;
      this.noActivation = noActivation;
    },
    // 鎼滈┗鍕ょ偣
    searchStation() {
      //鎸囨尌璋冨害鎼滅储椹诲嫟鐐�
      let resourceType = null;
      if (this.isPopulationTeam || this.isPoliceStation) {
        //濡傛灉鏄汉鍙ｆ€婚槦
        if (this.formStation.resourceType === 2) {
          resourceType = "Security";
        } else if (this.formStation.resourceType === 3) {
          resourceType = "Population";
        }
      } else {
        resourceType = "Security";
      }
      let followed = null;
      if (this.formStation.type === 2) {
        followed = true;
      } else if (this.formStation.type === 3) {
        followed = false;
      }
      // var stationType = [];
      // if (this.formStation.stationType !== 0) {
      //   stationType.push(this.formStation.stationType + "");
      // }
      this.loading = true;
      getStations({
        pageIndex: 1,
        pageSize: 5,
        followed: followed,
        resourceType: resourceType,
        stationTypes: resourceType !== "Population" ? this.formStation.stationType : [],
        superviseDepartIds: this.formStation.superviseDepartIds,
        searchModel: "SecurityResource",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
      })
        .then((res) => {
          res["stationTypes"] = this.stationTypes;
          console.log(res);

          this.$emit("searchStation", res);
        })
        .catch((err) => {
          this.$emit("searchStation", []);
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 鎼滃唴淇濆崟浣�
    searchProprietor() {
      //瀹変繚璋冨害鎼滅储鍐呬繚鍗曚綅
      var institutional = this.proprietorTypesCode;
      if (this.formCompany.institutional && this.formCompany.institutional.length > 0) {
        institutional = this.formCompany.institutional;
      }
      var followed = null;
      if (this.formCompany.type == "2") {
        followed = true;
      } else if (this.formCompany.type == "3") {
        followed = false;
      }
      this.loading = true;
      getCompanys({
        pageIndex: 1,
        pageSize: 5,
        institutionals: institutional,
        followed: followed,
        superviseDepartIds: this.formCompany.superviseDepartIds,
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        searchModel: "SecurityResource",
      })
        .then((res) => {
          this.$emit("searchCompany", res, "Proprietor");
        })
        .catch((err) => {
          this.$emit("searchCompany", []);
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //璁剧疆椹诲嫟鐐规暟
    setStationNum(total, noLonLat) {
      this.total = total;
      this.noLonLat = noLonLat;
    },
    //璁剧疆浼佷笟鏁�
    setCompanyNum(total, noLonLat) {
      this.total = total;
      this.noLonLat = noLonLat;
    },
    //璁剧疆鑰冨満鏁�
    setExamNum(onExam, noExam) {
      this.total = onExam + noExam;
      this.onExam = onExam;
      this.noExam = noExam;
    },
    // 鎼滄櫤鑳借澶�
    searchDevice() {},
    // 鎼滅數瀛愬洿鏍�
    searchRail() {
      this.loading = true;
      searchRail({
        pageIndex: 1,
        pageSize: 50,
        superviseDepartIds: this.formSecurityStationRail.superviseDepartIds,
        searchModel: "SecurityResource",
      })
        .then((res) => {
          console.log("searchRail", res);
          if (res) {
            console.log(res);
            this.$emit("searchRail", res);
          }
        })
        .catch((err) => {
          this.$emit("searchRail", []);
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 鎼滆€冨満
    searchExamSiteRooms() {
      var followed = null;
      if (this.formExam.type == "2") {
        followed = true;
      } else if (this.formExam.type == "3") {
        followed = false;
      }

      //鑰冨満鐘舵€�
      var status = null;
      if (this.formExam.status == "2") {
        status = true;
      } else if (this.formExam.status == "3") {
        status = false;
      }

      //鑰冭瘯鐘舵€�
      var examTaking = null;
      if (this.formExam.examTaking == "2") {
        examTaking = true;
      } else if (this.formExam.examTaking == "3") {
        examTaking = false;
      }

      this.loading = true;
      getExamSiteRooms({
        pageIndex: 1,
        pageSize: 5,
        forExport: false,
        followed: followed,
        status: status,
        examTaking: examTaking,
        superviseDepartIds: this.formExam.superviseDepartIds,
        searchModel: "SecurityResource",
      })
        .then((res) => {
          console.log(res);
          this.$emit("searchExam", res);
        })
        .catch((err) => {
          this.$emit("searchExam", []);
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onSelectEmployeeDeparts(node) {
      console.log(node);
      if (node?.children?.length > 0) {
        const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
        const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
        console.log(" log result", result);
        this.formEmployee.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
      } else {
        this.formEmployee.superviseDepartIds = [node.code];
      }
    },
    onSelectCompanyDeparts(node) {
      if (node?.children?.length > 0) {
        const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
        const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
        console.log("resource log result", result);
        this.formCompany.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
      } else {
        this.formCompany.superviseDepartIds = [node.code];
      }
    },
    onSelectStationDepart(node) {
      if (node?.children?.length > 0) {
        const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
        const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
        console.log(" log result", result);
        this.formStation.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
      } else {
        this.formStation.superviseDepartIds = [node.code];
      }
    },
    onSelectRailDepart(node) {
      if (node?.children?.length > 0) {
        const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
        const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
        console.log(" log result", result);
        this.formSecurityStationRail.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
      } else {
        this.formSecurityStationRail.superviseDepartIds = [node.code];
      }
    },
    onSelectExamDepart(node) {
      console.log(node);
      if (node?.children?.length > 0) {
        const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
        const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
        console.log(" log result", result);
        this.formExam.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
      } else {
        this.formExam.superviseDepartIds = [node.code];
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.resource-search {
  position: absolute;
  top: 13px;
  left: 34px;
  width: 588px;
  //height: 140px;
  background: #ffffff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px 4px 4px 4px;
  z-index: 2;
  .resource-type {
    width: 100%;
    padding: 8px 12px 14px 12px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    &-item {
      width: 94px;
      height: 94px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 9px 0 11px 0;
      cursor: pointer;
      &-active {
        background: #f2f2f2;
      }
      &-disabled {
        pointer-events: none;
        opacity: 0.3;
      }
      .icon {
        display: block;
        &-1 {
          width: 38px;
          height: 39px;
          background: url("~@/assets/images/mapSearch/鎼滃湴鍧€.png") no-repeat;
          background-size: 100% 100%;
        }
        &-2 {
          width: 42px;
          height: 43px;
          background: url("~@/assets/images/mapSearch/淇濆畨浜哄憳.png") no-repeat;
          background-size: 100% 100%;
        }
        &-3 {
          width: 42px;
          height: 42px;
          background: url("~@/assets/images/mapSearch/椹诲嫟鐐瑰浠�.png") no-repeat;
          background-size: 100% 100%;
        }
        &-4 {
          width: 44px;
          height: 44px;
          background: url("~@/assets/images/mapSearch/鍐呬繚鍗曚綅.png") no-repeat;
          background-size: 100% 100%;
        }
        &-5 {
          width: 44px;
          height: 44px;
          background: url("~@/assets/images/mapSearch/鏅鸿兘瀵硅缁堢.png") no-repeat;
          background-size: 100% 100%;
        }
        &-6 {
          width: 44px;
          height: 44px;
          background: url("~@/assets/images/mapSearch/鐢靛瓙鍥存爮.png") no-repeat;
          background-size: 100% 100%;
        }
        &-7 {
          width: 42px;
          height: 42px;
          background: url("~@/assets/images/mapSearch/鎼滆€冨満.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .name {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 17px;
      }
    }
  }
  .filter-content {
    padding: 0 15px;
    ::v-deep .filter-form {
      .el-form-item {
        // padding-top: 10px;
        width: 100%;
        border-top: 1px solid #eeeeee;
        margin-bottom: 10px;
        &.is-last {
          border-top: 0;
        }
        &.center {
          width: 100%;
          display: flex;
          justify-content: center;
          .btn-full {
            width: 428px;
            height: 39px;
            line-height: 10px;
            background: #0e71ff;
            &:hover,
            &:active {
              background: #569bff;
            }
            .el-loading-spinner {
              margin-top: 0;
              transform: translate(-26px, -6px);
              i {
                color: #fff;
              }
            }
          }
        }
      }
      .el-form-item__label {
        border-left: 4px solid #0e71ff;
        height: 20px;
        width: 100%;
        padding-left: 12px;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 18px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .el-form-item__content {
        padding-left: 4px;
        line-height: 1;
      }
      .type-icon {
        width: 16px;
        height: 16px;
      }
      .tree-select {
        padding-top: 6px;
        width: 477px;
        font-size: 14px;
        line-height: 35px;
        // font-family: PingFang SC-Regular, PingFang SC;
        // font-weight: 400;
        color: #606266;
        .vue-treeselect__placeholder {
          line-height: 35px;
        }
        .vue-treeselect__control {
          height: 35px !important;
        }
        .vue-treeselect__placeholder,
        .vue-treeselect__single-value {
          line-height: 35px;
        }
      }
      .el-checkbox-group {
        .el-row {
          //height: 270px;
          overflow-y: auto;
          overflow-x: hidden;
          .el-checkbox {
            line-height: 1;
          }
        }
      }
      .multi-row-radio {
        .el-radio {
          margin-bottom: 10px;
        }
      }
    }
    .filter-item {
      padding-top: 16px;
      width: 100%;
      border-top: 1px solid #eeeeee;
    }
  }
  .filter-bar {
    width: 588px;
    height: 24px;
    background: #ffffff;
    border-radius: 0 0 4px 4px;
    opacity: 1;
    border-top: 2px solid #e1e1e1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    .arrow {
      display: block;
      width: 24px;
      height: 24px;
      &-down {
        background: url("~@/assets/images/mapSearch/24px灞曞紑.png") no-repeat;
        background-size: 100% 100%;
      }
      &-up {
        background: url("~@/assets/images/mapSearch/24px灞曞紑-2.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .text {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 19px;
      margin-right: 16px;
    }
  }
  .total {
    position: absolute;
    right: -16px;
    top: 0;
    min-width: 152px;
    height: 60px;
    background: rgba(255, 255, 255, 0.8);
    transform: translate(100%, 0);
    border-radius: 4px;
    border-left: 4px solid #0e70ff;
    padding: 0 12px;
    display: flex;
    align-items: center;
    .label {
      height: 30px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      word-wrap: normal;
      white-space: nowrap;
      &::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background: #0e70ff;
        border-radius: 50%;
        margin-right: 2px;
      }
      &-green {
        &::before {
          background: #60da84;
        }
      }
      &-gray {
        &::before {
          background: #999999;
        }
      }
      &-green,
      &-gray {
        margin-left: 10px;
        padding-left: 16px;
        border-left: 2px solid #b2cce4;
      }
    }
    .value {
      font-size: 24px;
      font-weight: 500;
      color: #000000;
      margin-left: 8px;
      word-wrap: normal;
      white-space: nowrap;
    }
  }
}
</style>