<template>
  <div>
    <div class="titleBox">
      <div class="title">巡防辅警</div>
      <div class="btnBox">
        <el-button type="primary" @click="isShowPolice = false">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">分组管理</span>
        </el-button>

        <el-button type="primary" @click="isShowPolice = true" v-if="!isShowPolice">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">返回</span>
        </el-button>

        <el-button type="primary" @click="addPolice">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">新增 </span>
        </el-button>

        <el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
          <el-icon style="vertical-align: middle">
            <Delete />
          </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button>

        <el-button type="info" v-if="isShowPolice" plain icon="Upload" @click="isImport = true">
          <span style="vertical-align: middle">导入</span>
        </el-button>
      </div>
    </div>
    <div>
      <PoliceF v-if="isShowPolice" ref="policeComponnet" @deleteMore="deleteMore" />
      <PoliceGroup ref="groupComponnet" v-else @deleteMore="deleteMore" />
    </div>

    <!-- 导入 -->
    <Export :show="isImport" lx="policeF" @closeImport="isImport = false" @handleImport="handleImport" />
  </div>
</template>

<script setup>
import Export from "@/components/export/index.vue";
import PoliceF from "./policeF.vue";
import PoliceGroup from "./policeGroup.vue";
import { nextTick, ref } from "vue";
const ids = ref([]);
const policeComponnet = ref(null);
const groupComponnet = ref(null);
const isShowPolice = ref(true);
const isImport = ref(false);
// 新增
function addPolice() {
  if (isShowPolice.value) {
    policeComponnet.value.add();
  } else {
    groupComponnet.value.init();
  }
}
function deleteMore(val) {
  ids.value = val;
}
// 批量删除
function batchDelete() {
  if (isShowPolice.value) {
    policeComponnet.value.batchDelete();
  } else {
    groupComponnet.value.batchDelete();
  }
}

// 确定上传
function handleImport(val) {
  policeComponnet.value.handleFilter();
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
