<template>
  <div class="map-search">
    <div class="search">
      <!-- 类型下拉框 -->
      <div class="select" @click="showResTypeList">
        <span class="name">{{ typeName }}</span>
        <i class="arrow"></i>
      </div>
      <!-- 查询条件 -->
      <el-input
        class="input"
        type="text"
        :placeholder="placeholder"
        clearable
        autocomplete="new-password"
        v-model="keywords"
        @input="setKeywords"
        @keydown.enter.native="search"
        @clear="onClearSearch"
      />
      <div class="btn" @click="search">搜索</div>
    </div>

    <div class="tool-btn">
      <!-- 资源图层  -->
      <div v-if="showResourceLayers" class="types" @click="showStationTypes"></div>
      <!-- 警情上报预警信息提示 -->
      <div v-if="showIncidents" class="situation" @click="showPoliceIncidents(false)"></div>
    </div>

    <!-- 选择搜索项目 -->
    <transition name="slide-fade">
      <div v-show="resTypeListShow" class="res-type-list res-type-list-type">
        <el-empty v-if="resTypeList.length <= 0"></el-empty>
        <div
          v-for="(item, index) in resTypeRoleList"
          :key="index"
          class="item"
          :class="[item.value === type ? 'item-active' : '', item.disabled ? 'item-disabled' : '']"
          @click="setType(item.value, index)"
        >
          <div class="icon" :class="'icon-' + item.value"></div>
          <span class="name">{{ item.name }}</span>
        </div>
        <div class="filter-type">
          <el-form
            v-if="
              Number(type) === 1 &&
              sysUserInfo.role !== 'Company' &&
              sysUserInfo.role !== 'Urban' &&
              sysUserInfo.role !== 'SubUrb' &&
              sysUserInfo.role !== 'PopulationSubUrb' &&
              sysUserInfo.role !== 'PopulationUrban'
            "
            class="filter-form"
            :model="formEmployee"
          >
            <el-form-item label="类型" style="padding-top: 3px">
              <el-radio-group v-model="formEmployee.type">
                <el-radio
                  style="padding-top: 8px; margin-right: 10px"
                  v-for="item in employeeRolesTypes"
                  :key="item.name"
                  :label="item.code"
                  :disabled="item.disabled"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-form
            v-if="
              Number(type) === 2 &&
              sysUserInfo.role !== 'Company' &&
              sysUserInfo.role !== 'Urban' &&
              sysUserInfo.role !== 'SubUrb' &&
              sysUserInfo.role !== 'Proprietor' &&
              sysUserInfo.role !== 'PopulationSubUrb' &&
              sysUserInfo.role !== 'PopulationUrban' &&
              platform === '1'
            "
            class="filter-form"
            :model="formStation"
          >
            <station-types-form
              v-if="formStation.type === 'Security'"
              :station-types="stationTypes"
              :is-security="isSecurity"
              :is-police-station="isPoliceStation"
              @handleCheckChange="handleCheckChange"
            ></station-types-form>
            <el-form-item label="类型" style="padding-top: 3px">
              <el-radio-group v-model="formStation.type">
                <el-radio style="padding-top: 8px" v-for="item in stationRolesTypes" :key="item.code" :label="item.code">{{
                  item.name
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-form
            v-if="Number(type) === 2 && sysUserInfo.role === 'Proprietor' && platform === '2'"
            class="filter-form"
            :model="formStation"
          >
          </el-form>
          <el-form
            v-if="
              Number(type) === 3 &&
              platform === '2' &&
              (sysUserInfo.role === 'PoliceStation' || sysUserInfo.role === 'PopulationPoliceStation')
            "
            class="filter-form"
            :model="formCompany"
          >
            <el-form-item label="内保单位类型" style="padding-top: 3px">
              <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: 6px">
              <tree-select
                class="tree-select"
                :options="departs"
                placeholder="请选择"
                :normalizer="normalizer1"
                v-model="formCompany.depart"
                noOptionsText="无数据"
                noResultsText="无数据"
                @select="onSelectCompanyDeparts"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </transition>
    <!-- 人员 -->
    <transition name="slide-fade">
      <div v-show="empoloyeesResultShow" class="employee-list">
        <div ref="employeeRes" class="employee-detail" v-if="Number(type) === 1" v-loading="employeeLoading">
          <el-empty v-if="resResult.length <= 0"></el-empty>
          <div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickEmployee(item)">
            <div class="employee-list-item">
              <div class="employee-left">
                <div class="name-photo">{{ item.nameSlice }}</div>
                <div class="employee-item-detail">
                  <div class="employee-name">{{ item.name }}</div>
                  <div class="employee-contact" v-if="platform === '2'">
                    所属内保单位：
                    <el-tooltip effect="dark" :content="item.proprietorCompanyName" placement="top">
                      <span class="item-value">{{ item.proprietorCompanyNameSlice }}</span>
                    </el-tooltip>
                  </div>
                  <div class="employee-contact" v-if="!item.isProprietor">
                    所属公司：
                    <el-tooltip effect="dark" :content="item.companyName" placement="top">
                      <span class="item-value">{{ item.companyNameSlice + (item.institutional === "0104" ? "/自招" : "") }}</span>
                    </el-tooltip>
                  </div>

                  <div class="employee-contact">
                    联系方式：<span class="item-value">{{ item.isContact ? item.contact : "***********" }}</span>
                    <span class="hide-show" @click.stop="lookContact(index, 'isContact')" v-if="item.isContact">隐藏</span>
                    <span class="hide-show" @click.stop="lookContact(index, 'isContact')" v-if="!item.isContact">显示</span>
                  </div>
                  <div class="employee-idCardNo">
                    证件号码：<span class="item-value">{{ item.isIdCardNo ? item.idCardNo : "******************" }}</span>
                    <span class="hide-show" @click.stop="lookContact(index, 'isIdCardNo')" v-if="item.isIdCardNo">隐藏</span>
                    <span class="hide-show" @click.stop="lookContact(index, 'isIdCardNo')" v-if="!item.isIdCardNo">显示</span>
                  </div>
                  <div class="employee-contact" v-if="!item.isProprietor">
                    所属驻勤点：
                    <el-tooltip effect="dark" :content="item.securityStationName" placement="top">
                      <span class="item-value">{{ item.stationNameSlice }}</span>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
            </div>
          </div>
          <div v-if="resResult.length > 0 && !noMore" class="load-more">
            <el-button type="primary" size="mini" @click="loadEmployee">加载更多</el-button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 执勤点 -->
    <transition name="slide-fade">
      <div v-show="stationsResultShow" class="employee-list">
        <div ref="stationRes" class="employee-detail" v-if="Number(type) === 2" v-loading="stationLoading">
          <el-empty v-if="resResult.length <= 0"></el-empty>
          <div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickStation(item.id)">
            <div class="employee-item-new-main">
              <div class="employee-item-new">
                <img src="@/assets/images/mapSearch/驻勤点备份.png" alt="" class="employee-item-new-img" />
                <div class="employee-item-new-detail">
                  <div class="employee-new-name">{{ item.name }}</div>
                  <div class="employee-new-item" style="margin: 9px 0">
                    驻勤地址：<span class="employee-new-value">{{ item.address }}</span>
                  </div>
                  <div class="employee-new-item">
                    保安公司：<span class="employee-new-value">{{ item.companyName }}</span>
                  </div>
                </div>
              </div>
              <img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
            </div>
          </div>
          <div v-if="resResult.length > 0 && !noMore" class="load-more">
            <el-button type="primary" size="mini" @click="loadStation">加载更多</el-button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 内保单位 -->
    <transition name="slide-fade">
      <div v-show="proprietorResultShow" class="employee-list">
        <div ref="proprietorRes" class="employee-detail" v-if="Number(type) === 3" v-loading="proprietorLoading">
          <el-empty v-if="resResult.length <= 0"></el-empty>
          <div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickProprietor(item)">
            <div class="employee-item-new-main">
              <div class="employee-item-new">
                <img
                  src="@/assets/images/mapSearch/内保单位.png"
                  alt=""
                  class="employee-item-new-img"
                  width="56px"
                  height="56px"
                />
                <div class="employee-item-new-detail">
                  <div class="employee-new-name">{{ item.name }}</div>
                  <div class="employee-new-item" style="margin: 9px 0">
                    内保单位地址：<span class="employee-new-value">{{ item.registerAddress }}</span>
                  </div>
                  <div class="employee-new-item">
                    负责人员：<span class="employee-new-value">{{ item.legal }}</span>
                  </div>
                </div>
              </div>
              <img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
            </div>
          </div>
          <div v-if="resResult.length > 0 && !noMore" class="load-more">
            <el-button type="primary" size="mini" @click="loadProprietor">加载更多</el-button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 搜地址结果框 -->
    <transition name="slide-fade">
      <div v-show="resResultShow" class="res-type-list res-type-list-result">
        <!-- 列表 -->
        <div class="pois" v-if="Number(type) === 4">
          <el-empty v-if="resResult.length <= 0"></el-empty>
          <div class="poi" v-for="(item, index) in resResult" :key="index" @click="onClickPoi(item)">
            <span class="name">{{ item.name }}</span>
            <span class="sub">{{ item.district }}{{ item.address }}</span>
          </div>
        </div>
      </div>
    </transition>
    <!-- 资源图层 -->
    <transition name="slide-fade">
      <div v-show="stationTypesShow" class="station-types">
        <div class="header">
          <span class="title">资源图层</span>
          <i class="el-icon-close" @click="stationTypesShow = false"></i>
        </div>
        <div class="content">
          <div class="top">
            <i class="location"></i>
            <span class="title">驻勤点类型</span>
          </div>
          <el-radio-group v-model="stationType">
            <el-row>
              <el-col v-for="item in stationTypes.filter((x, i) => i <= 23)" :key="item.code" :span="8">
                <el-radio :label="item.code" @change="getStationsByType(item.code)"
                  ><img class="type-icon" :src="item.icon" alt="" /><span>{{ item.name }}</span></el-radio
                >
              </el-col>
              <el-col v-for="item in stationTypes.filter((x, i) => i > 23)" :key="item.code" :span="12">
                <el-radio :label="item.code" @change="getStationsByType(item.code)"
                  ><img class="type-icon" :src="item.icon" alt="" /><span>{{ item.name }}</span></el-radio
                >
              </el-col>
            </el-row>
          </el-radio-group>
        </div>
      </div>
    </transition>
    <transition name="slide-fade">
      <div v-show="policeIncidentsShow" class="police-incidents">
        <div class="header">
          <span class="title">线索上报</span>
          <i class="el-icon-close" @click="policeIncidentsShow = false"></i>
        </div>
        <div class="list-detail" v-if="isDetail">
          <div class="detail-header">
            <div class="header-back" @click="goBackList">&lt; 返回警情列表</div>
            <div class="header-btn">
              <div class="header-zb" @click="railCk">周边调度</div>
              <div v-if="isSuperVision" class="header-close" @click="closeIncident(policeIncidentsData.id)">关闭事件</div>
            </div>
          </div>
          <div class="detail">
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">事件类别：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.name || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">报警对象：</div>
              <div class="detail-item-value color-blue" @click="showEmployeeByIncident(policeIncidentsData.tenantEmployeeId)">
                {{ policeIncidentsData.empName || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">联系方式：</div>
              <div class="detail-item-value">
                {{ isPhone ? policeIncidentsData.contact : "***********" }}
                <span class="hide-show" @click.stop="isPhone = !isPhone" v-if="isPhone">隐藏</span>
                <span class="hide-show" @click.stop="isPhone = !isPhone" v-if="!isPhone">显示</span>
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">上报时间：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.createdTime || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">事发地点：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.address || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">事件类型：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.policeEventType || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">事件级别：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.policeEventLevel || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">事件情况：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.reason || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">已采取措施：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.actionTaken || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">处理情况及发展趋势：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.actionTendency || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">进一步处理意见：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.processedSuggestion || "无" }}
              </div>
            </div>
            <div class="detail-item marginbottom11">
              <div class="detail-item-title">现场调度指导：</div>
              <div class="detail-item-value">
                {{ policeIncidentsData.processedLocaleGuidance || "无" }}
              </div>
            </div>
          </div>
        </div>
        <div class="border-list" v-if="!isDetail">
          <div class="border-status">
            <div
              class="border-card"
              v-for="(item, index) in levelCountTabList"
              :key="index"
              :name="item.name"
              :style="activeTab(item)"
            >
              <div class="label" slot="label" @click="getPoliceIncidentsByLevel(item.level, 1)">
                {{ item.label }}
                <div class="value-main">
                  <span class="value"> {{ item.number }} </span><span class="unit">件</span>
                </div>
              </div>
            </div>
          </div>
          <div class="pi-detail" v-if="policeIncidents.data">
            <div v-for="(item, index) in policeIncidents.data" :key="index" :name="item.name" class="pi-detail-list">
              <div class="pi-detail-item">
                <div class="pi-name">{{ item.name }}</div>
                <div class="item margin-bottom-11">
                  报警对象：
                  <div class="item-value">
                    {{ item.empName }}
                    {{ item.isPoliceContact ? "*************" : item.contact }}
                  </div>
                  <!-- <img class="item-icon" src="@/assets/images/map/icons/可查看.png" alt="" @click.stop="policeContact(index)"
                    v-if="item.isPoliceContact" />
                  <img class="item-icon" src="@/assets/images/map/icons/隐藏.png" alt="" @click.stop="policeContact(index)"
                    v-if="!item.isPoliceContact" /> -->
                  <span class="hide-show" @click.stop="policeContact(index)" v-if="item.isPoliceContact">显示</span>
                  <span class="hide-show" @click.stop="policeContact(index)" v-if="!item.isPoliceContact">隐藏</span>
                </div>

                <div class="item margin-bottom-11">事件类型：{{ item.policeEventType }}</div>
                <div class="item margin-bottom-11">事发时间：{{ item.createdTime }}</div>
                <div class="item">事发地点：{{ item.address }}</div>
              </div>
              <div class="pi-detail-btn">
                <div class="detail-btn" @click="lookDetail(item, false)">详情</div>
                <div v-if="isSuperVision" class="close-btn" @click="closeIncident(item.id)">关闭</div>
              </div>
            </div>
            <div style="text-align: center">
              <el-pagination
                small
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :current-page="piCurrentPage"
                :total="piTotal"
                :page-size="piPageSize"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 查询总数统计值 -->
    <div class="total" v-if="Number(type) === 1 && sysUserInfo.role === 'PoliceStation' && platform === '1'">
      <span class="label label-green">总数</span>
      <span class="value value-on">{{ totalNumCount }}</span>
      <span class="label label-green">在岗数</span>
      <span class="value value-on">{{ signInCount }}</span>
      <span class="label label-gray">离岗数</span>
      <span class="value value-off">{{ signOffCount }}</span>
      <span class="label label-green">保安员</span>
      <span class="value value-off">{{ securityCount }}</span>
      <span class="label label-green">社会力量</span>
      <span class="value value-off">{{ populationCount }}</span>
      <span class="label label-gray">未激活数</span>
      <span class="value value-off">{{ noActivation }}</span>
    </div>
    <div class="total" v-if="Number(type) === 2 && sysUserInfo.role === 'PoliceStation' && platform === '1'">
      <span class="label label-green">驻勤点</span>
      <span class="value value-off">{{ securityCount }}</span>
      <span class="label label-green">社区警务</span>
      <span class="value value-off">{{ populationCount }}</span>
      <span class="label label-gray">无坐标数</span>
      <span class="value value-off">{{ noLonLatCount }}</span>
    </div>
  </div>
</template>

<script>
import address from "address";
import treeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { ipLocation, place } from "@/api/amap";
import { getAllStationTypes } from "@/api/security-station-controller";
import { getStations, getStationDetail } from "@/api/security-station-controller";
import { getEmployees, getEmployeeDetail } from "@/api/employee-controller";
import { getCompanys } from "@/api/company-controller";
import { getOrganizationType } from "@/api/resource-controller";
import { getDeparts } from "@/api/departs-controller";
import {
  getLevelCount,
  getPoliceIncidentsNeOver,
  policeIncidentsDetail,
  policeIncidentsHandle,
} from "@/api/police-incident-controller";
import { getCurrentUser } from "@/api/tenant-user-controller";
import { textSlice } from "@/api/common";
import _ from "lodash";
import stationTypesForm from "@/components/StationTypesForm/index.vue";

export default {
  name: "mapSearch",
  props: {
    sysUserInfo: {
      type: Object,
      required: true,
    }, // sysUserInfo.role[ Urban 市局：SubUrb 分局：Company 企业 PoliceStation：基层派出所]
    type: {
      type: [String, Number],
      default() {
        return 1;
      },
    },
    showResourceLayers: Boolean,
    showIncidents: {
      type: Boolean,
      default: false,
    },
  },
  components: { treeSelect, stationTypesForm },
  data() {
    return {
      platform: localStorage.getItem("platform") || "1",
      deskTypes: localStorage.getItem("platform") === "1" ? ["Normal"] : ["Proprietor"],
      isIndeterminatePro: false,
      checkAllPro: false,
      isCompany: false,
      isSecurity: false, //当前用户角色是否为治安市局/分局
      isPoliceStation: false, //当前用户角色是否为派出所
      companyTypes: [],
      proprietorTypes: [],
      proprietorTypesCode: [],
      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,
        };
      },
      normalizer1(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.code,
          label: node.name,
          children: node.children,
        };
      },
      formCompany: {
        institutional: [],
        depart: null,
        superviseDepartIds: [],
      },
      resTypeListShow: false,
      activeTypeIndex: 0,
      resTypeList: [
        {
          name: "保安员",
          value: 1,
          roles: ["Urban", "SubUrb", "Company"],
          platform: ["1"],
          placeholder: "请输入保安员证件号或姓名",
        },
        {
          name: "保安员",
          value: 1,
          roles: ["Company"],
          platform: ["2"],
          placeholder: "请输入保安员证件号或姓名",
        },
        {
          name: "人员",
          value: 1,
          roles: ["PoliceStation", "PopulationPoliceStation", "PopulationUrban", "PopulationSubUrb", "Proprietor"],
          platform: ["1"],
          placeholder: "请输入人员证件号或姓名",
        },
        {
          name: "人员",
          value: 1,
          roles: [
            "Urban",
            "SubUrb",
            "PoliceStation",
            "PopulationPoliceStation",
            "PopulationUrban",
            "PopulationSubUrb",
            "Proprietor",
          ],
          platform: ["2"],
          placeholder: "请输入人员证件号或姓名",
        },
        {
          name: "驻勤点",
          value: 2,
          roles: ["Urban", "SubUrb", "Company"],
          platform: ["1"],
          placeholder: "请输入驻勤点名称",
        },
        {
          name: "驻勤点",
          value: 2,
          roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
          platform: ["2"],
          placeholder: "请输入驻勤点名称",
        },
        {
          name: "执勤点",
          value: 2,
          roles: ["PoliceStation", "PopulationPoliceStation", "PopulationUrban", "PopulationSubUrb", "Proprietor"],
          platform: ["1"],
          placeholder: "请输入执勤点名称",
        },
        {
          name: "内保单位",
          value: 3,
          roles: [
            "Urban",
            "SubUrb",
            "PoliceStation",
            "PopulationPoliceStation",
            "PopulationUrban",
            "PopulationSubUrb",
            "Proprietor",
          ],
          platform: ["2"],
          placeholder: "请输入内保单位名称",
        },
        {
          name: "搜地点",
          value: 4,
          roles: ["*"],
          platform: ["*"],
          placeholder: "请输入地点名称",
        },
        {
          name: "智能设备",
          value: 5,
          roles: ["*"],
          platform: ["*"],
          disabled: true,
          placeholder: "请输入智能设备名称",
        },
      ],
      keywords: "",
      empoloyeesResultShow: false,
      stationsResultShow: false,
      proprietorResultShow: false,
      resResultShow: false,
      resResult: [],
      policeIncidents: {},
      stationTypesShow: false,
      policeIncidentsShow: false,
      stationType: null,
      stationTypes: [],
      levelCounts: [],
      levelCountTabList: [
        {
          label: "特别重大",
          number: "0",
          name: "greatsCount",
          level: "Greats",
          bgColor: "#A80000",
        },
        {
          label: "重大",
          number: "0",
          name: "greatCount",
          level: "Great",
          bgColor: "#F48200",
        },
        {
          label: "较大",
          number: "0",
          name: "moreCount",
          level: "More",
          bgColor: "#F7BE00",
        },
        {
          label: "一般",
          number: "0",
          name: "comonCount",
          level: "Comon",
          bgColor: "#00B40C",
        },
      ],
      employees: [],
      levelIndex: undefined, //警情上报选中
      isDetail: false, //是否详情
      isFromWarn: false, //true 来自报警消息立即处理 false 本地报警消息查看
      currentLevel: "Greats",
      policeIncidentsData: {}, //警情上报详情
      isPoliceContact: true,
      piCurrentPage: 1, //当前页
      piTotal: 0, //分页总条数
      piPageSize: 3, //分页默认3条
      isPhone: false,
      isSuperVision: false, //是否监管账户 是 ture 否：false
      stationCount: 0,
      employeeCount: 0,
      companyCount: 0,
      stationLoading: false,
      proprietorLoading: false,
      employeeLoading: false,
      stationPageIndex: 1,
      proprietorPageIndex: 1,
      employeePageIndex: 1,
      pageSize: 10,
      noMore: false,
      formEmployee: {
        type: null,
      },
      employeeTypes: [
        {
          code: null,
          name: "全部",
          roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor", "Urban", "SubUrb"],
          platform: ["1", "2"],
        },
        {
          code: ["Security"],
          name: "保安员",
          roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
          platform: ["1", "2"],
        },
        {
          code: ["Population"],
          name: "社会力量",
          roles: ["PoliceStation", "PopulationPoliceStation"],
          platform: ["1"],
        },
        {
          code: ["Population", "Security"],
          name: "社会力量（保安员）",
          roles: ["PoliceStation", "PopulationPoliceStation"],
          platform: ["1"],
        },
        {
          code: ["Proprietor"],
          name: "保卫管理员",
          roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
          platform: ["2"],
        },
        {
          code: [""],
          name: "智能设备持有人",
          roles: ["PoliceStation", "Urban", "SubUrb", "PopulationPoliceStation", "Proprietor"],
          platform: ["1", "2"],
          disabled: true,
        },
      ],
      formStation: {
        type: null,
        stationTypes: [],
      },
      formStationTypes: [
        {
          code: null,
          name: "全部",
          roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
        },
        {
          code: "Security",
          name: "驻勤点",
          roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
        },
        {
          code: "Population",
          name: "社区警务",
          roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
        },
      ],
    };
  },
  computed: {
    // ...mapState({ poiList: (state) => state.poiList || [] }),
    resTypeRoleList() {
      const platform = localStorage.getItem("platform") || "1";
      return this.resTypeList.filter((type) => {
        if (type.roles.includes("*") && type.platform.includes("*")) {
          return type;
        } else {
          // return type.roles.includes(this.sysUserInfo.role) || type.platform.includes(platform);
          if (type.roles.includes(this.sysUserInfo.role)) {
            return type.platform.includes(platform) || type.platform.includes("*");
          }
          if (type.platform.includes(platform)) {
            return type.roles.includes(this.sysUserInfo.role) || type.roles.includes("*");
          }
        }
      });
    },
    stationRolesTypes() {
      return this.formStationTypes.filter((type) => type.roles.includes(this.sysUserInfo.role)); // 通过用户角色过滤可选的类型
    },
    employeeRolesTypes() {
      const platform = localStorage.getItem("platform") || "1";
      return this.employeeTypes.filter((type) => type.roles.includes(this.sysUserInfo.role) && type.platform.includes(platform)); // 通过用户角色过滤可选的类型
    },
    typeName() {
      return this.resTypeRoleList[this.activeTypeIndex].name;
    },
    placeholder() {
      return this.resTypeRoleList[this.activeTypeIndex].placeholder;
    },
    activeTab() {
      return function ({ bgColor, level }) {
        return {
          color: "#fff",
          background: bgColor,
          borderColor: this.currentLevel === level ? "#0e71ff" : "grey",
          opacity: this.currentLevel === level ? 1 : 0.4,
        };
      };
    },
    disabled() {
      return this.stationLoading || this.noMore;
    },
    totalNumCount() {
      return this.resResult.length;
    },
    signInCount() {
      return this.resResult.filter((x) => x.dutyStatus === "SignIn").length;
    },
    signOffCount() {
      return this.resResult.filter((x) => x.dutyStatus === "SignOut").length;
    },
    populationCount() {
      return this.resResult.filter((x) => !x.rts.includes("Security")).length;
    },
    noActivation() {
      return this.resResult.filter((x) => x.dutyStatus === "None").length;
    },
    securityCount() {
      return this.resResult.filter((x) => x.rts.includes("Security")).length;
    },
    noLonLatCount() {
      return this.resResult.filter((x) => {
        return !Object.prototype.hasOwnProperty.call(x, "longitude") || !Object.prototype.hasOwnProperty.call(x, "latitude");
      }).length;
      // return this.resResult.filter((x) => !x.longitude && !x.latitude).length;
    },
  },
  methods: {
    handleCheckChange(val) {
      this.formStation.stationTypes = val;
    },
    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;
    },
    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) => getTail(m)));
        console.log(" log result", result);
        this.formCompany.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
      } else {
        this.formCompany.superviseDepartIds = [node.code];
      }
    },
    parseStringToStar(str) {
      if (str) {
        return str.length > 2 ? str.substr(0, 2) + new Array(str.length - 2).join("*") + str.substr(-2) : str;
      } else {
        return "";
      }
    },
    railCk() {
      this.$emit("clickRail", this.policeIncidentsData);
    },
    async init() {
      this.stationTypes = await getAllStationTypes(); //获取驻勤点信息
      console.log("stationTypes", this.stationTypes);
      if (this.sysUserInfo.role !== "Company") {
        this.formEmployee.type = this.employeeRolesTypes[0]?.code;
        this.formStation.type = this.stationRolesTypes[0]?.code;
      }
      const userInfo = localStorage.getItem("userInfo");
      let userInfoJson;
      if (userInfo) {
        userInfoJson = JSON.parse(userInfo);
      } else {
        getCurrentUser().then(async (response) => {
          userInfoJson = JSON.stringify(response);
        });
      }
      if (userInfoJson) {
        this.isSuperVision = userInfoJson.superviseDesk; //判断身份 ture:监管账户；false:企业账户
        //判断是否是企业或内保单位
        if (userInfoJson.role === "Company" || userInfoJson.role === "Proprietor") {
          this.isCompany = true;
        }
        this.isSecurity = userInfoJson.role === "Urban" || userInfoJson.role === "SubUrb";
        this.isPoliceStation = userInfoJson.role === "PopulationPoliceStation" || userInfoJson.role === "PoliceStation";
      }
      this.companyTypes = await getOrganizationType(); // 获取企业类型 {code,name}
      this.proprietorTypes = this.companyTypes.filter((item) => item.category === "Proprietor");
      this.proprietorTypesCode = this.proprietorTypes.map((item) => {
        return item.code;
      });
      this.departs = await getDeparts(); // 获取辖区树
    },
    //显示搜索类型信息
    showResTypeList() {
      this.resResultShow = false;
      this.resTypeListShow = !this.resTypeListShow; //搜索类型
      this.stationTypesShow = false; //隐藏资源图层
      this.policeIncidentsShow = false; //隐藏警情上报
      this.empoloyeesResultShow = false; //隐藏保安员列表
      this.stationsResultShow = false; //隐藏驻勤点列表
      this.proprietorResultShow = false; //隐藏内保单位列表
    },
    setType(type, index) {
      this.activeTypeIndex = index;
      console.log(type);
      this.$emit("update:type", type);
      // this.resTypeListShow = false;
      // 类型切换后置空搜索内容
      this.keywords = "";
      this.resResult = [];
      this.stationPageIndex = 1;
      this.employeePageIndex = 1;
      this.proprietorPageIndex = 1;
      // 清空图标
      this.$emit("clearMap");
    },
    async search() {
      this.resResult = [];
      this.employeePageIndex = 1;
      this.stationPageIndex = 1;
      this.proprietorPageIndex = 1;
      const roles1 = ["Urban", "SubUrb", "PopulationUrban", "PopulationSubUrb", "Company"];
      if (this.type === 1) {
        if (roles1.includes(this.sysUserInfo.role)) {
          if (!this.keywords.trim()) {
            this.$message.info("请输入搜索条件");
            return false;
          }
        }
      }
      if (this.type === 2) {
        if (roles1.includes(this.sysUserInfo.role)) {
          if (!this.keywords.trim()) {
            this.$message.info("请输入搜索条件");
            return false;
          }
        }
      }
      if (this.type === 4) {
        if (!this.keywords.trim()) {
          this.$message.info("请输入搜索条件");
          return false;
        }
        this.resResultShow = !!this.keywords;
        // this.$store.commit("SET_PLACE_KEYWORDS", this.keywords);
      }
      this.noMore = false;
      this.resTypeListShow = false;
      this.stationTypesShow = false; //隐藏资源图层
      this.policeIncidentsShow = false; //隐藏警情上报
      this.$emit("hideAllLayers");
      // 清空图标
      this.$emit("clearMap");
      console.log("type", this.type);
      if (this.type === 1) {
        //查询人员
        await this.searchEmployees();
      } else if (this.type === 2) {
        // 查询执勤点
        await this.searchStations();
      } else if (this.type === 3) {
        //查询内保单位
        await this.searchProprietors();
      } else if (this.type === 4) {
        // 查询地点
        await this.getPlace();
      }
    },
    setKeywords() {
      this.employeePageIndex = 1;
      this.stationPageIndex = 1;
      this.proprietorPageIndex = 1;
    },
    onClearSearch() {
      this.empoloyeesResultShow = false;
      this.stationsResultShow = false;
      this.proprietorResultShow = false;
      this.resTypeListShow = false;
      this.resResultShow = false;
      this.$emit("search", {
        type: this.type,
        data: [],
      });
    },
    //显示驻勤点类型
    async showStationTypes() {
      this.stationTypesShow = !this.stationTypesShow;
      this.resResultShow = false; //搜索地址表
      this.resTypeListShow = false;
      this.policeIncidentsShow = false; //隐藏警情上报
      this.empoloyeesResultShow = false; //隐藏保安员列表
      this.stationsResultShow = false; //隐藏驻勤点列表
      this.proprietorResultShow = false; //隐藏内保单位列表
      // 类型切换后置空搜索内容
      this.keywords = "";
      this.$emit("clearMap");
      this.$emit("hideAllLayers");
    },
    //根据驻勤点类型查询驻勤点
    async getStationsByType(stationType) {
      getStations({
        keyword: "",
        searchModel: "StationType",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        pageIndex: 1,
        pageSize: 100,
        stationTypes: [stationType + ""],
      })
        .then((res) => {
          this.$emit(
            "getStationsByType",
            res.map((x) => {
              x.type = "station";
              return x;
            })
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @隐藏所有搜索结果列表框
     */
    hideAllList() {
      this.resResultShow = false;
      this.resTypeListShow = false;
      this.stationTypesShow = false; //隐藏资源图层
      this.empoloyeesResultShow = false; //隐藏保安员列表
      this.stationsResultShow = false; //隐藏驻勤点列表
      this.proprietorResultShow = false; //隐藏内保单位列表
      this.policeIncidentsShow = false; //隐藏警情上报列表
    },
    //显示警情上报
    async showPoliceIncidents(alwaysShow) {
      if (!alwaysShow) {
        this.currentLevel = "Greats";
        this.policeIncidentsShow = !this.policeIncidentsShow;
      }
      // 类型切换后置空搜索内容
      this.keywords = "";
      this.$emit("clearMap");
      this.resResultShow = false;
      this.resTypeListShow = false;
      this.stationTypesShow = false; //隐藏资源图层
      this.empoloyeesResultShow = false; //隐藏保安员列表
      this.stationsResultShow = false; //隐藏驻勤点列表
      this.proprietorResultShow = false; //隐藏内保单位列表
      this.levelCounts = await getLevelCount(); //获取警情上报等级数量
      console.log("levelCounts", this.levelCounts);
      // this.levelCountTabList.forEach((item) => {
      //   item.number = this.levelCounts[item.name];
      // });
      for (let key in this.levelCounts) {
        const data = this.levelCountTabList.find((x) => x.name === key);
        if (data) data.number = this.levelCounts[key];
      }
      await this.getPoliceIncidentsByLevel(
        // this.levelCountTabList[0].level,
        this.currentLevel,
        1
      );
    },
    //根据级别显示警情上报
    async getPoliceIncidentsByLevel(level, currentPage) {
      this.isDetail = false;
      this.currentLevel = level;
      this.policeIncidents = {};
      this.piCurrentPage = currentPage;
      this.$forceUpdate();
      getPoliceIncidentsNeOver({
        pageIndex: currentPage,
        pageSize: this.piPageSize,
        level: level,
        status: "None",
      })
        .then((res) => {
          console.log("PoliceIncidents", res);
          this.piTotal = res.totalCount; //总数
          this.policeIncidents = res;
          for (let i = 0; i < this.policeIncidents.data.length; i++) {
            let item = this.policeIncidents.data[i];
            item.isPoliceContact = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.piCurrentPage = val;
      this.getPoliceIncidentsByLevel(this.currentLevel, val);
    },
    policeContact(index) {
      let that = this;
      let list = JSON.parse(JSON.stringify(that.policeIncidents.data));
      list[index].isPoliceContact = !list[index].isPoliceContact;
      this.$nextTick(() => {
        that.policeIncidents.data = [];
        this.$set(that.policeIncidents, "data", list);
      });
      console.log(that.policeIncidents.data[index].isPoliceContact);
    },
    lookContact(index, type) {
      console.log(index, type);
      this.resResult[index][type] = !this.resResult[index][type];
      this.$set(this.resResult, index, this.resResult[index]);
    },
    loadEmployee() {
      if (this.keywords) {
        this.noMore = false;
        this.employeePageIndex++;
        this.searchEmployees();
      }
    },
    //查询保安员
    async searchEmployees() {
      this.employeeLoading = true;
      getEmployees({
        pageIndex: this.employeePageIndex,
        pageSize: this.pageSize,
        keyword: this.keywords,
        searchModel: this.keywords ? "Keyword" : "SecurityResource",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        resourceTypes: this.formEmployee.type,
      })
        .then((res) => {
          if ([...res].length < this.pageSize) {
            this.noMore = true;
          } else {
            this.employeeCount += [...res].length;
          }
          this.resResult = [...this.resResult, ...res];
          this.resResult.forEach((item) => {
            item["isIdCardNo"] = false;
            item["isContact"] = false;
            if (this.keywords) {
              item["nameSlice"] = item.name.slice(-2);
              item["companyNameSlice"] = textSlice(item.companyName);
              item["proprietorCompanyNameSlice"] = textSlice(item.proprietorCompanyName);
              item["stationNameSlice"] = textSlice(item.securityStationName);
              item["idCardNoHide"] = this.parseStringToStar(item.idCardNo);
              item["contactHide"] = this.parseStringToStar(item.contact);
              item["isProprietor"] = item.rts.includes("Proprietor") ? true : false; //是否保卫管理员
            }
            item["type"] = "employee";
          });
          this.empoloyeesResultShow = this.keywords !== "";
          const roles = ["PoliceStation", "PopulationPoliceStation", "PopulationUrban", "PopulationSubUrb", "Proprietor"];
          if (!this.keywords && roles.includes(this.sysUserInfo.role)) {
            this.$emit("search", {
              type: 1,
              data: this.resResult,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.employeeLoading = false;
          if (this.resResult.length >= 10) {
            this.$nextTick(() => {
              this.scrollToBottom("employeeRes");
            });
          }
        });
    },
    //查询驻勤点
    async searchStations() {
      this.stationLoading = true;
      getStations({
        pageIndex: this.stationPageIndex,
        pageSize: this.pageSize,
        searchModel: this.keywords ? "Name" : "SecurityResource",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        stationTypes: this.formStation.type === "Security" ? this.formStation.stationTypes : [],
        keyword: this.keywords,
        resourceType: this.keywords ? null : this.formStation.type,
      })
        .then((res) => {
          console.log(res);
          if ([...res].length < this.pageSize) {
            this.noMore = true;
          } else {
            this.stationCount += [...res].length;
          }
          this.resResult = [...this.resResult, ...res];
          this.stationsResultShow = this.keywords !== "";
          if (!this.keywords) {
            this.$emit("search", {
              type: 2,
              data: this.resResult.map((res) => {
                return { ...res, type: "station" };
              }),
            });
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.stationLoading = false;
          this.$nextTick(() => {
            this.scrollToBottom("stationRes");
          });
        });
    },
    loadStation() {
      console.log(this.keywords);
      if (this.keywords) {
        this.noMore = false;
        this.stationPageIndex++;
        this.searchStations();
      }
    },
    //查询内保单位
    async searchProprietors() {
      this.proprietorLoading = true;
      console.log("institutional", this.formCompany.institutional);
      var institutional = this.proprietorTypesCode;
      if (this.formCompany.institutional && this.formCompany.institutional.length > 0) {
        institutional = this.formCompany.institutional;
      }
      getCompanys({
        pageIndex: 1,
        pageSize: 5,
        institutionals: institutional,
        keyword: this.keywords,
        searchModel: this.keywords ? "Keyword" : "SecurityResource",
        superviseDepartIds: this.formCompany.superviseDepartIds,
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
      })
        .then((res) => {
          console.log(res);
          if ([...res].length < this.pageSize) {
            this.noMore = true;
          } else {
            this.companyCount += [...res].length;
          }
          this.resResult = [...this.resResult, ...res];
          this.proprietorResultShow = this.keywords !== "";
          if (!this.keywords) {
            this.$emit("search", {
              type: 3,
              data: this.resResult.map((res) => {
                return { ...res, type: "company" };
              }),
            });
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.proprietorLoading = false;
          this.$nextTick(() => {
            this.scrollToBottom("proprietorRes");
          });
        });
    },
    loadProprietor() {
      console.log(this.keywords);
      if (this.keywords) {
        this.noMore = false;
        this.proprietorPageIndex++;
        this.searchProprietors();
      }
    },
    scrollToBottom(name) {
      const container = this.$refs[name];
      console.log(container.scrollHeight);
      container.scrollTop = container.scrollHeight;
    },
    //查询地址
    async getPlace() {
      const city = (await ipLocation(address.ip())) || "厦门";
      console.log(city);
      place({
        keywords: this.keywords,
        offset: 10,
        city,
      })
        .then((res) => {
          console.log("placeRes", res);
          const { status, data } = res;
          if (status === 200) {
            console.log("poidata", data);
            // if (data.infocode === "10044") {
            //   this.$message({
            //     message: "搜地点达到今日限额！",
            //     type: "warning",
            //   });
            //   return;
            // }
            if (data.tips) {
              this.resResult = data.tips
                .map((poi) => {
                  return { ...poi, type: "location" };
                })
                .filter((x) => typeof x.id === "string");
              console.log("locationresResult", this.resResult);
              this.resResultShow = true;
              this.$emit("search", {
                type: 4,
                data: this.resResult,
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickEmployee(employee) {
      if (employee.longitude && employee.latitude) {
        //有经纬度
        // 清空图标
        this.$emit("clearMap");
        console.log(employee);
        this.hideAllList();
        this.$emit("clickEmployee", employee);
      } else {
        this.$message({
          message: "该人员未完成签到，无位置坐标！",
          type: "warning",
        });
      }
    },
    onClickStation(stationId) {
      console.log("stationId", stationId);
      getStationDetail(stationId)
        .then((station) => {
          console.log("station", station);
          if (station) {
            if (station.longitude && station.latitude) {
              //有经纬度
              this.$emit("clickStation", station);
              // 清空图标
              this.$emit("clearMap");
              this.hideAllList();
            } else {
              this.$message({
                message: "该驻勤点未完善位置坐标！",
                type: "warning",
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickProprietor(company) {
      console.log("company", company);
      if (company) {
        if (company.longitude && company.latitude) {
          //有经纬度
          this.$emit("clickCompany", company, "company");
          // 清空图标
          this.$emit("clearMap");
          this.hideAllList();
        } else {
          this.$message({
            message: "该内保单位未完善位置坐标！",
            type: "warning",
          });
        }
      }
    },
    onClickPoi(poi) {
      // 清空图标
      this.$emit("clearMap");
      this.hideAllList();
      this.$emit("clickPoi", poi);
    },
    // 查看详情
    lookDetail(item, isFromWarn) {
      console.log("item", item);
      this.isDetail = true;
      this.isFromWarn = isFromWarn;
      this.levelCountTabList.forEach((temp) => {
        if (temp.label === item.policeEventLevel) {
          this.currentLevel = temp.level;
        }
      });
      policeIncidentsDetail(item.id).then((res) => {
        console.log(res);
        this.policeIncidentsData = res;
      });
    },
    //关闭警情
    closeIncident(id) {
      this.$confirm("是否确认关闭事件，关闭事件后则默认事件状态为已处理", "提示", {
        confirmButtonText: "确认关闭",
        cancelButtonText: "取消",
        customClass: "del-model",
        type: "warning",
      })
        .then(() => {
          policeIncidentsHandle(id);
          this.$message({
            type: "success",
            message: "关闭成功!",
          });
          this.showPoliceIncidents(true);
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消关闭'
          // });
        });
    },
    // 返回警情列表
    goBackList() {
      this.isDetail = false;
      if (this.isFromWarn) {
        //如果是预警处理，需要刷新页面
        this.showPoliceIncidents(true);
      }
    },
    showEmployeeByIncident(employeeId) {
      getEmployeeDetail(employeeId)
        .then((employee) => {
          this.$emit("clickEmployee", employee);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
@import "src/styles/animation";

.map-search {
  position: absolute;
  top: 16px;
  left: 34px;

  .search {
    //width: 500px;
    //height: 52px;
    //background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.0993);
    border-radius: 4px 4px 4px 0px;
    //opacity: 1;
    border: 2px solid #3e8dff;
    display: flex;

    .select {
      width: 82px;
      height: 48px;
      background: #f2f2f2;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      //padding: 0 8px;
      cursor: pointer;

      .name {
        //width: 42px;
        //height: 17px;
        font-size: 14px;
        //font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4019);
        //line-height: 17px;
        //-webkit-background-clip: text;
        //-webkit-text-fill-color: transparent;
        margin-right: 8px;
      }

      .arrow {
        display: block;
        width: 16px;
        height: 16px;
        background: url("~@/assets/images/mapSearch/下拉 1.png") no-repeat center;
      }
    }

    .input {
      width: 476px;
      height: 48px;
      background: #ffffff;
      outline: none;
      border: 0;
      padding: 0 24px;

      ::v-deep .el-input__inner {
        width: 100%;
        height: 100%;
        border: 0;
      }

      &:focus {
        outline: none;
        border: 0;
      }

      &::placeholder {
        color: rgba(0, 0, 0, 0.4);
      }
    }

    .btn {
      width: 60px;
      //height: 52px;
      background: #0e71ff;
      border-radius: 0px 2px 2px 0px;
      //opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
  }

  .employee-list {
    width: 560px;
    height: 510px;
    //overflow-y: auto;
    //overflow: scroll;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 8px 8px;
    opacity: 1;
    border: 2px solid #3e8dff;
    position: absolute;
    left: 0;
    top: 50px;
    display: flex;
    justify-content: space-between;

    /* align-items: center; */
    .employee-detail {
      width: 100%;
      overflow-y: auto;
      //padding: 0 24px;

      .employee-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);

        &:hover {
          background: rgba(14, 113, 255, 0.1);
        }

        cursor: pointer;
        flex-direction: column;
        align-items: center;
        padding: 9px 16px;

        .employee-name {
          font-size: 14px;
          font-weight: 400;
        }

        .employee-contact {
          font-size: 12px;
          font-weight: 400;
        }

        .employee-idCardNo {
          font-size: 12px;
          font-weight: 400;
        }

        .employee-list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 0px;

          .employee-left {
            display: flex;
            align-items: center;

            .name-photo {
              width: 60px;
              height: 60px;
              background: #0e71ff;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: #fff;
            }

            .employee-item-detail {
              margin-left: 12px;

              .employee-name {
                color: #000000;
                font-size: 14px;
              }

              .employee-contact {
                font-size: 14px;
                margin-top: 10px;
                color: #000000;
                display: flex;
                align-content: center;

                .item-value {
                  color: #000000;
                }

                .type-icon {
                  width: 16px;
                  height: 16px;
                  margin-left: 4px;
                }
              }

              .employee-idCardNo {
                font-size: 14px;
                margin-top: 10px;
                color: #000000;
                display: flex;
                align-content: center;

                .item-value {
                  color: #000000;
                }

                .type-icon {
                  width: 16px;
                  height: 16px;
                  margin-left: 4px;
                }
              }
            }
          }

          .address-icon {
            width: 24px;
            height: 34px;
          }
        }

        .employee-item-new-main {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 9px 0;
        }

        .employee-item-new {
          display: flex;
          align-items: center;

          .employee-item-new-img {
            width: 60px;
            height: 60px;
          }

          .employee-item-new-detail {
            margin-left: 5px;

            .employee-new-name {
              font-size: 14px;
              color: #000000;
            }

            .employee-new-item {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: rgba(0, 0, 0, 0.65);

              .mployee-new-value {
                color: #000000;
              }
            }
          }
        }

        .address-icon {
          width: 24px;
          height: 34px;
        }
      }
    }
    .load-more {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 10px 0;
      box-sizing: content-box;
    }
  }

  .res-type-list {
    width: 558px;
    //height: 112px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 8px 8px;
    opacity: 1;
    border: 2px solid #3e8dff;
    position: absolute;
    left: 0;
    top: 50px;
    //padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-type {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 110px;
        height: 94px;
        //height: 112px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 9px 0;

        &-active {
          background: rgba(0, 0, 0, 0.05);
        }

        &-disabled {
          pointer-events: none;
          opacity: 0.3;
        }

        .icon {
          &-1 {
            width: 42px;
            height: 43px;
            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,
          &-0 {
            width: 42px;
            height: 43px;
            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%;
          }
        }

        .name {
          margin-top: 16px;
        }
      }
      .filter-type {
        width: 100%;
        margin: 10px;
        padding: 13px 0;
        border-top: 1px solid #eeeeee;
        ::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;
              }
            }
          }
        }
        //.filter-item {
        //  padding-top: 16px;
        //  width: 100%;
        //  border-top: 1px solid #eeeeee;
        //}
      }
    }

    &-result {
      align-items: unset;
      height: auto;
      max-height: 460px;
      overflow-y: scroll;
      padding-top: 8px;

      .pois {
        width: 100%;

        .poi {
          width: 100%;
          height: 46px;
          cursor: pointer;
          //padding: 0 24px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgba(0, 0, 0, 0.15);
          padding: 0 16px;

          &:hover {
            background: rgba(14, 113, 255, 0.1);
          }

          .name {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
          }

          .sub {
            margin-left: 16px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }

  .station-types {
    width: 608px;
    height: 716px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px 4px 8px 8px;
    border: 2px solid #3e8dff;
    position: absolute;
    top: 68px;
    left: 0;
    padding: 0 24px;

    .header {
      height: 54px;
      border-bottom: 1px solid #bdcfde;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }

      i {
        cursor: pointer;
        font-size: 16px;
        color: #999999;
      }
    }

    .content {
      .top {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        margin: 16px 0 19px 0;

        .location {
          width: 22px;
          height: 22px;
          background: url("~@/assets/images/mapSearch/驻勤点类型.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 8px;
        }

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #0e71ff;
        }
      }

      .type-icon {
        width: 16px;
        height: 16px;
      }

      .el-col {
        margin-bottom: 24px;
      }

      ::v-deep .el-radio {
        display: flex;
        align-items: center;

        .el-radio__label {
          display: flex;
          align-items: center;
          padding-left: 8px;
          font-size: 16px;
          color: #666666;
        }
      }
    }
  }

  .police-incidents {
    width: 568px;
    height: auto;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px 4px 8px 8px;
    border: 2px solid #3e8dff;
    position: absolute;
    top: 58px;
    left: 0;

    /* padding: 0 24px; */
    .header {
      height: 54px;
      /* border-bottom: 1px solid #bdcfde; */
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 12px 0 12px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }

      i {
        cursor: pointer;
        font-size: 16px;
        color: #999999;
      }
    }

    .border-list {
      background: #e6f0ff;
      height: 655px;
      padding: 7px 12px 12px 12px;
    }

    .border-status {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .border-card {
        width: 126px;
        height: 64px;
        cursor: pointer;
        background: #f0f0f0;
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #d9d9d9;
        /* float: left; */
        margin-top: 7px;
        padding: 8px;
        box-sizing: border-box;

        .label {
          font-size: 14px;
          /* color: #666666; */
          font-weight: 500;
        }

        .value-main {
          vertical-align: middle;

          .value {
            font-size: 28px;
            /* color: #666666; */
            font-weight: bold;
          }

          .unit {
            font-size: 8px;
            /* color: #999999; */
          }
        }
      }
    }

    .pi-detail {
      background: #fff;
      border: 1px solid #0e71ff;
      height: 570px;
      // overflow: scroll;
      padding: 0 16px;

      .pi-detail-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #bdcfde;
        padding: 19px 0;
      }

      .pi-detail-item {
        .pi-name {
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          margin-bottom: 8px;
        }

        .item {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #5e5e5e;

          .item-value {
            color: #333333;
          }

          .item-icon {
            margin-left: 8px;
            width: 16px;
            height: 16px;
          }
        }
      }

      .margin-bottom-11 {
        margin-bottom: 11px;
      }

      .pi-detail-btn {
        .detail-btn {
          width: 76px;
          height: 32px;
          background: #0e71ff;
          box-shadow: 0px 2px 0px 0px rgba(5, 145, 255, 0.1);
          border-radius: 6px;
          opacity: 1;
          border: 1px solid rgba(0, 0, 0, 0);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 14px;
          color: #ffffff;
        }

        .close-btn {
          width: 76px;
          height: 32px;
          border-radius: 6px;
          opacity: 1;
          border: 1px solid #ff4d4f;
          font-size: 14px;
          color: #ff4d4f;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-top: 16px;
        }
      }
    }

    .list-detail {
      padding: 0px 11px 14px 14px;

      .detail-header {
        padding-top: 10px;
        border-top: 1px solid #bdcfde;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-back {
          font-size: 14px;
          color: #0e70ff;
          cursor: pointer;
        }

        .header-btn {
          display: flex;
          align-items: center;

          .header-zb {
            width: 76px;
            height: 32px;
            background: #1677ff;
            box-shadow: 0px 2px 0px 0px rgba(5, 145, 255, 0.1);
            border-radius: 6px;
            opacity: 1;
            border: 1px solid rgba(0, 0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: 14px;
            cursor: pointer;
          }

          .header-close {
            width: 76px;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #ff4d4f;
            color: #ff4d4f;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            margin-left: 16px;
            cursor: pointer;
          }
        }
      }

      .detail {
        width: 100%;
        height: auto;
        background: #e6f0ff;
        border-radius: 4px;
        margin-top: 20px;
        padding: 16px 18px;
        // overflow: scroll;

        .detail-item {
          display: flex;
          align-items: center;
          font-size: 14px;

          .detail-item-title {
            color: #5e5e5e;
          }

          .detail-item-value {
            color: #333333;
          }

          .color-blue {
            color: #0e70ff;
            border-bottom: 1px solid #0e70ff;
            cursor: pointer;
          }
        }

        .marginbottom11 {
          margin-bottom: 11px;
        }
      }
    }
  }

  .tool-btn {
    //width: 52px;
    height: 52px;
    position: absolute;
    top: 0;
    left: 650px;
    display: flex;
    align-items: center;
    .types {
      width: 52px;
      height: 52px;
      cursor: pointer;
      background: url("~@/assets/images/mapSearch/资源图层.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
      //position: absolute;
      //top: 0;
      //left: 530px;
    }
    .situation {
      width: 52px;
      height: 52px;
      cursor: pointer;
      background: url("~@/assets/images/mapSearch/警情上报.png") no-repeat;
      background-size: 100% 100%;
      //position: absolute;
      //top: 0;
      //left: 598px;
    }
  }

  .total {
    position: absolute;
    right: -100px;
    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;
      }
      &:first-child {
        border-left: 0;
        padding-left: 0;
      }
    }
    .value {
      font-size: 24px;
      font-weight: 500;
      color: #000000;
      margin-left: 8px;
      word-wrap: normal;
      white-space: nowrap;
    }
  }
}
.hide-show {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #0e70ff;
  cursor: pointer;
  padding-left: 5px;
}
</style>
