<template>
  <div>
    <div class="titleBox">
      <div class="title">巡防民警</div>
      <div class="btnBox">
        <el-button type="primary" @click="add">
          <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>
      </div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="form" :inline="true">
        <el-form-item label="所属部门">
          <MOSTY.Department width="100%" clearable v-model="form.ssbmdm" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.mjName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form.sfzh" placeholder="请输入身份证号码" clearable />
        </el-form-item>

        <el-form-item label="是否离职">
          <el-select clearableupdate v-model="form.xtSjzt" placeholder="请选择状态">
            <el-option v-for="item in D_BZ_SFLZ" :label="item.label" :key="item.value" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="handleFilter"> 查询 </el-button>
          <el-button type="info" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="total">
      <span>民警总数 {{ total }} 人</span>
      <div class="jnbq">
        <el-button v-for="item in lxList" :key="item.id" :class="form.bqId === item.id ? 'on' : ''"
          @click="chackJn(item)" size="small">{{ item.bqmc }}</el-button>
      </div>
    </div>
    <div class="tabBox">
      <el-table :data="tableData" border ref="dataTreeList" row-key="id"
        :tree-props="{ children: 'itemList', hasChildren: true }" style="width: 100%"
        @selection-change="handleSelectionChange" :height="tableHeight" :key="keyCount" v-loading="loadingTable"
        element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column width="120" align="center" label="图片">
          <template #default="{ row }">
            <div class="phone">
              <el-image v-if="row.tpid" :src="urlImg + row.tpid" fit="cover" lazy />
              <el-image v-else :src="Person" fit="cover" lazy />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="xm" width="130" show-overflow-tooltip align="center" label="民警姓名">
        </el-table-column>
        <el-table-column prop="sfzh" width="200" show-overflow-tooltip align="center" label="身份证号码">
        </el-table-column>
        <el-table-column prop="ssbm" label="所属部门" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="jh" label="警号" width="120" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="zyjn" show-overflow-tooltip label="专业技能" align="center">
          <template #default="{ row }">
            <el-tag class="ml-2" v-for="(it, index) in row.sklList" :key="index">{{ it.bqmc }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="370px" fixed="right">
          <template #default="{ row }">
            <el-button @click="onClickUpdate(row)" size="small">修改</el-button>
            <el-button plain @click="chackZqjl(row)" size="small">执勤记录</el-button>
            <el-button plain size="small" @click="getDocument(row)">人员档案</el-button>

            <el-button v-if="row.xtSjzt != 0" @click="lzList(row)" type="warning" size="small">离职</el-button>

            <el-button @click="delDictItem(row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="form.current" :page-sizes="[10, 20, 50]" :page-size="form.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button type="primary" size="small" @click="submit" v-if="!isDisabled" :loading="loading">保存</el-button>
          <el-button size="small" @click="(dialogFormVisible = false), (isDisabled = false)">关闭</el-button>
        </div>
      </div>
      <el-form ref="elform" :model="addForm" :rules="rules" :inline="true" label-position="top">
        <div style="
            width: 25%;
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
          ">
          <div style="position: relative; width: 90px; height: 100px">
            <el-upload action="/mosty-api/mosty-base/minio/image/upload/id" :on-change="upImgFile" :on-success="upImg"
              :show-file-list="false">
              <el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
              <el-icon v-else>
                <Plus></Plus>
              </el-icon>
              <span v-if="imgUrl" style="position: absolute; top: -52px; right: -20px">
                <el-icon size="20" @click.stop="deletImg">
                  <Close />
                </el-icon>
              </span>
            </el-upload>
          </div>
        </div>
        <el-form-item label="民警姓名" prop="xm">
          <el-input v-model="addForm.xm" placeholder="请输入民警姓名" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="身份证号码" prop="sfzh">
          <el-input v-model="addForm.sfzh" placeholder="请输入身份证号码" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="性别" prop="xbdm">
          <el-select clearable v-model="addForm.xbdm" placeholder="请选择" style="width: 100%">
            <el-option v-for="(item, index) in D_BZ_XB" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族" prop="mzdm">
          <el-select clearable v-model="addForm.mzdm" placeholder="请选择民族" style="width: 100%">
            <el-option v-for="(item, index) in D_BZ_MZ" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="政治面貌" prop="zzmm">
          <el-select clearable v-model="addForm.zzmm" placeholder="请选择" style="width: 100%">
            <el-option v-for="(item, index) in D_BZ_ZZMM" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="婚姻状况" prop="hyzk">
          <el-select clearable v-model="addForm.hyzk" placeholder="请选择" style="width: 100%">
            <el-option v-for="(item, index) in D_BZ_HYZK" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历" prop="whcddm">
          <el-select clearable v-model="addForm.whcddm" placeholder="请选择" style="width: 100%">
            <el-option v-for="(item, index) in D_BZ_WHCD" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民警编号" prop="jh">
          <el-input v-model="addForm.jh" placeholder="请输入民警编号" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系电话" prop="lxdh">
          <el-input v-model="addForm.lxdh" placeholder="请输入联系电话" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="所属部门" prop="ssbmid">
          <MOSTY.Department :placeholder="addForm.ssbm" style="width: 100%" ref="cascader" clearable filterable
            :options="depList" :props="props" @change="handleChange" v-model="addForm.ssbmid" />
        </el-form-item>
        <el-form-item label="人员类别" prop="lx">
          <el-select clearable v-model="addForm.lx" placeholder="请选择" style="width: 100%">
            <el-option v-for="(item, index) in D_BZ_RYLB" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 100%" label="专业技能" prop="sklList" @change="selectJnbq">
          <el-select v-model="addForm.sklList" multiple placeholder="请选择" style="width: 100%" @change="onChangeBQ">
            <el-option v-for="item in bqList" :key="item.id" :label="item.bqmc" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%">
          <el-input v-model="addForm.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <!-- 执勤记录 -->
    <div v-if="zqjl" class="dialog">
      <div class="head_box">
        <div class="title">巡防民警————执勤记录</div>
        <div>
          <el-button v-if="mapActive" type="primary" size="small" @click="mapActive = false">关闭日历模式</el-button>
          <el-button v-else type="primary" size="small" @click="mapActive = true">日历模式</el-button>
          <el-button size="small" @click="zqjl = false">关闭</el-button>
        </div>
      </div>
      <div v-if="mapActive" class="txmap">
        <ZbCalendar />
      </div>
      <div v-else>
        <el-table :data="zqjlData" border ref="dataTreeList" row-key="id"
          :tree-props="{ children: 'itemList', hasChildren: true }" style="width: 100%"
          @selection-change="handleSelectionChange" :height="tableHeight1" :key="keyCount" v-loading="loadingTable"
          element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
          <el-table-column prop="zqbm" show-overflow-tooltip align="center" width="150px" label="执勤部门">
          </el-table-column>
          <el-table-column prop="jzcy" show-overflow-tooltip align="center" width="200" label="警组成员">
          </el-table-column>
          <el-table-column prop="sc" label="时长" align="center" width="150"></el-table-column>
          <el-table-column prop="lc" label="里程" width="100px" align="center"></el-table-column>
          <el-table-column prop="jqczsl" show-overflow-tooltip label="警情处置数量" align="center">
          </el-table-column>
          <el-table-column prop="xctjs" show-overflow-tooltip label="现场调解数" align="center">
          </el-table-column>
          <el-table-column prop="tjl" show-overflow-tooltip label="调解率" align="center">
          </el-table-column>
          <el-table-column prop="yjzlczsl" show-overflow-tooltip label="预警指令处置数量" align="center">
          </el-table-column>
          <el-table-column prop="ryyjsl" show-overflow-tooltip label="人员移交数量" align="center">
          </el-table-column>
          <el-table-column prop="pccls" show-overflow-tooltip label="盘查车辆数量" align="center">
          </el-table-column>
          <el-table-column prop="clyjsl" show-overflow-tooltip label="移交数量" align="center">
          </el-table-column>
        </el-table>
        <div class="fenye" :style="{ top: tableHeight1 + 'px' }">
          <el-pagination class="pagination" @size-change="handleSizeChangezq" @current-change="handleCurrentChangezq"
            :current-page="formzq.current" :page-sizes="[10, 20, 50]" :page-size="form.size"
            layout="total, sizes, prev, pager, next, jumper" :total="totalzq">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="dialog" v-if="chooseUserVisible">
      <div class="head_box">
        <span class="title">选择用户</span>
        <div>
          <el-button v-if="chooseUserVisible" type="primary" size="small" @click="plADD">保存</el-button>
          <el-button v-else type="primary" size="small" @click="chooseUserVisible = false">保存</el-button>
          <el-button size="small" @click="chooseUserVisible = false">关闭</el-button>
        </div>
      </div>
      <div class="my_transfer">
        <div class="tree">
          <MOSTY.DepartmentTree width="300px" placeholder="管理部门ID" clearable filterable :isBmId="true"
            v-model="userQuery.deptId" />
        </div>
        <div class="left">
          <div class="serch">
            <el-form :model="userQuery" :inline="true">
              <el-form-item label="用户名">
                <el-input placeholder="请输入用户名" v-model="userQuery.loginName" clearable></el-input>
              </el-form-item>
              <el-form-item label="电话号码">
                <el-input placeholder="请输入电话" v-model="userQuery.phone" clearable></el-input>
              </el-form-item>
              <el-form-item label="身份证号码">
                <el-input v-model="userQuery.idEntityCard" placeholder="请输入身份证号码" clearable />
              </el-form-item>
              <el-form-item label="是否包含下级">
                <el-select v-model="userQuery.isChild">
                  <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
                    }}</el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="getListLeftData">查询</el-button>
                <el-button type="info" @click="resetLeftdata()">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="tableBox" :style="{ height: tableHeight1 + 'px' }" style="border: 1px solid #07376d">
            <el-table :data="tableLeftData" border row-key="id" height="100%" style="width:100%"
              @selection-change="handleSelectionChangeLeft">
              <el-table-column type="selection" width="40" align="center" />
              <el-table-column prop="deptName" label="所属部门" align="center" />
              <el-table-column prop="userName" label="用户姓名" align="center" />
              <el-table-column prop="idEntityCard" label="身份证号" align="center" />
              <el-table-column prop="mobile" label="电话号码" align="center" />
              <el-table-column prop="inDustRialId" label="警号" align="center" />
            </el-table>
            <div>
              <el-pagination class="pagination" @size-change="handleSizeChangeUser"
                @current-change="handleCurrentChangeUser" :current-page="userQuery.current"
                :page-sizes="[10, 20, 50, 100]" :page-size="userQuery.size"
                layout="total, sizes, prev, pager, next, jumper" :total="totalUser">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button :icon="Back" circle @click="upLeft" />
          <el-button :icon="Right" circle @click="upRight" />
        </div>
        <div class="right" style="height: 700px; border: 1px solid #07376d">
          <el-table :data="tableRightData" ref="multipleTableRef" border row-key="id" height="100%"
            @selection-change="handleSelectionChangeRight">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column prop="deptName" label="所属部门" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户姓名" align="center"></el-table-column>
            <el-table-column prop="inDustRialId" label="警号" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 人员档案弹窗 -->
    <PersonnelDialog :D_BZ_XB="D_BZ_XB" :D_BZ_MZ="D_BZ_MZ" :D_BZ_XLCJ="D_BZ_XLCJ" :D_BZ_XFXLLX="D_BZ_XFXLLX"
      ref="personDialog" />
  </div>
</template>

<script setup>
import PersonnelDialog from "./personnelProfile.vue";
import ZbCalendar from "@/components/ZbCalendar/index";
import { Right, Back } from "@element-plus/icons-vue";
import * as MOSTY from "@/components/MyComponents/index";
import Person from "@/assets/images/layout/default_male.png";
import { selectDeptPage, selectUserDeptPage } from "@/api/user-manage";
import {
  getTbJcglXfll,
  deleteTbJcglXfll,
  getTbJcglXfllInfo,
  updateTbJcglXfll,
  addTbJcglXfll,
  getTbJcglBq,
  getCountBqsl,
  batchDeleteList,
  getSfhList,
  ryLz
} from "@/api/xfll";
import { getSysUserList } from "@/api/user-manage";
import { ElMessage } from "element-plus";
import {
  ref,
  reactive,
  onMounted,
  computed,
  getCurrentInstance,
  onUnmounted,
  toRaw,
  watch
} from "vue";
const multipleTableRef = ref(null);
const tableLeftData = ref([]);
//左边选中数据
const leftdata = ref([]);
//右边选中数据
const rightData = ref([]);
const urlImg = ref("/mosty-api/mosty-base/minio/image/download/");
const zqjlData = ref([
  {
    zqbm: "xxx部门",
    jzcy: "张三、李四、王五...",
    sc: "8小时",
    jqczsl: "13件",
    yjzls: "21",
    xctjs: "16件",
    tjl: "30%",
    pcrysl: 13,
    ryyjsl: 2,
    lc: "123KM",
    pccls: 4,
    clyjsl: 1,
    createtime: "2022-06-01 11:42"
  },
  {
    zqbm: "xxx部门",
    jzcy: "张三、李四、王五...",
    sc: "8小时",
    jqczsl: "13件",
    xctjs: "16件",
    tjl: "30%",
    lc: "123KM",
    yjzls: "21",
    pcrysl: 13,
    ryyjsl: 2,
    pccls: 4,
    clyjsl: 1,
    createtime: "2022-06-02 14:44"
  }
]);
const personDialog = ref(null);

const tableRightData = ref([]);
const treeRef = ref(null);
const defaultProps = {
  children: "children",
  label: "label"
};
const data = ref([]);
//用户穿梭框搜索数据
const userQuery = ref({
  current: 1,
  size: 20,
  deptId: "",
  loginName: "",
  phone: "",
  isChild: "1",
  idEntityCard: ""
});
const imgUrl = ref("");
function resetLeftdata() {
  userQuery.value = {
    current: 1,
    size: 20
  };
  getListLeftData();
}
const value = ref([]);
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
const title = ref("新增巡逻民警信息");
function upImgFile(row) { }
function upImg(row) {
  addForm.value.tpid = row.data;
  imgUrl.value = urlImg.value + row.data;
}
function deletImg() {
  imgUrl.value = "";
  addForm.value.tpid = "";
}

function upRight() {
  let num = leftdata.value.length;
  leftdata.value.forEach((v) => {
    const index = tableRightData.value.indexOf(v);
    const i = tableLeftData.value.indexOf(v);
    if (index == -1 && idEntityList.value.indexOf(v.idEntityCard) == -1) {
      tableRightData.value.push(v);
      multipleTableRef.value.toggleRowSelection(v, true);
      tableLeftData.value.splice(i, 1);
      num--;
    }
  });
  if (num != 0) {
    ElMessage({ message: "请勿重复添加", type: "warning" });
  }
}
// 人员档案
function getDocument(row) {
  personDialog.value.init(row);
}
function upLeft() {
  rightData.value.forEach((v) => {
    const index = tableLeftData.value.indexOf(v);
    const i = tableRightData.value.indexOf(v);
    if (index == -1) {
      tableLeftData.value.push(v);
      tableRightData.value.splice(i, 1);
    }
  });
}
//级联选择器配置
const props = {
  expandTrigger: "children",
  children: "childDeptList",
  label: "orgName",
  value: "id",
  checkStrictly: true
  // emitPath: false
};
//获取字典数据
const { proxy } = getCurrentInstance();
const {
  D_BZ_XB,
  D_BZ_WHCD,
  D_BZ_ZZMM,
  D_BZ_HYZK,
  D_BZ_MZ,
  D_BZ_RYLB,
  D_BZ_SF,
  D_BZ_XLCJ,
  D_BZ_XFXLLX,
  D_BZ_SFLZ
} = proxy.$dict(
  "D_BZ_XB",
  "D_BZ_WHCD",
  "D_BZ_ZZMM",
  "D_BZ_HYZK",
  "D_BZ_MZ",
  "D_BZ_RYLB",
  "D_BZ_SF",
  "D_BZ_XLCJ",
  "D_BZ_XFXLLX",
  "D_BZ_SFLZ"
);

const lxList = reactive([]); //搜索框标签选择数据
//筛选条件参数
const form = ref({
  current: 1,
  size: 20,
  mjName: "",
  sfzh: "",
  ssbmdm: "",
  bqId: "",
  bqlx: "",
  xtSjzt: "1"
});
//筛选条件参数执勤记录
const formzq = ref({
  current: 1,
  size: 20
});
const chooseUserVisible = ref(false); //是否显示选择用户弹窗
const tableData = ref([]); //表单数据
const total = ref(0); //总数据
//执勤记录弹窗
const zqjl = ref(false);
const mapActive = ref(false);
const totalzq = ref(0);
const dialogFormVisible = ref(false); //是否显示弹窗
const elform = ref(null); //表单对象
const loadingTable = ref(true);
const cascader = ref(null); //级联选择器
const depList = ref([]); //部门数据
const bqList = ref([]); //标签数据
const tableHeight1 = ref(0);
const bqIdList = ref([]); // 选中的
const isDisabled = ref(false); //是否警用保存按钮
const ssbmIds = ref([]); //级联选择器回显ID
const ids = ref([]); //批量删除的ID
const chackipt = ref(false);
const keyCount = ref(0); //tabel组件刷新值
//列表身份证集合，穿梭框去重
const idEntityList = ref([]);
//新增表单参数
const loading = ref(false); //是否显示按钮加载
const listQuery = ref({
  current: 1,
  size: 20,
  loginName: "",
  phone: "",
  isChild: "1"
});
const addForm = ref({
  id: "",
  fl: "01",
  xm: "",
  sfzh: "",
  xbdm: "",
  mzdm: "",
  zzmm: "",
  hyzk: "",
  whcddm: "",
  jh: "",
  jx: "",
  lx: "",
  lxdh: "",
  sklList: [],
  bz: "",
  ssbm: "",
  ssbmid: ssbmIds.value[ssbmIds.value - 1]
});
//新增表单验证数据
const rules = reactive({
  xm: [
    {
      required: true,
      message: "请输入民警姓名"
    }
  ],
  sfzh: [
    {
      required: true,
      message: "请输入身份证号码"
    }
  ],
  xbdm: [
    {
      required: true,
      message: "请选择性别",
      trigger: "change"
    }
  ],
  mzdm: [
    {
      required: true,
      message: "请选择民族"
    }
  ],
  zzmm: [
    {
      required: true,
      message: "请选择政治面貌"
    }
  ],
  hyzk: [
    {
      required: true,
      message: "请选择婚姻状况"
    }
  ],
  whcddm: [
    {
      required: true,
      message: "请选择学历"
    }
  ],
  jh: [
    {
      required: true,
      message: "请输入民警编号"
    }
  ],
  lxdh: [
    {
      required: true,
      message: "请输入联系电话"
    }
  ],
  jx: [
    {
      required: true,
      message: "请选择警衔"
    }
  ],
  bqId: [
    {
      required: true,
      message: "请选择技能"
    }
  ]
});
function chackZqjl(item) {
  zqjl.value = true;
}
function setBm() {
  if (ssbmIds.value.length > 1) {
    const info = cascader.value.getCheckedNodes()[0];
    addForm.value.ssxgaj = info.label;
    addForm.value.ssxgajdm = info.value;
  }
}
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};
onMounted(() => {
  let deopt = JSON.parse(localStorage.getItem("deptId"));
  userQuery.value.deptId = deopt[0].deptId;
  getLeftdata();
  //获取搜索栏标签选择数据
  getCountBqsl().then((res) => {
    res.forEach((item) => {
      lxList.push(item);
    });
  });

  getListData();
  //获取部门信息
  selectDeptPage({}).then((res) => {
    depList.value = res.records;
  });
  //获取新增标签数据
  let data = {
    pageSize: 5000,
    pageCurrent: 1,
    xtSjzt: "1",
    bqlx: "SKL"
  };
  getTbJcglBq(data).then((res) => {
    bqList.value = res.records.filter((item) => {
      return item.xtSjzt == "1";
    });
  });
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
  getListLeftData();
});
function add() {
  tableRightData.value = [];
  title.value = "新增巡逻民警信息";
  chooseUserVisible.value = true;
  ssbmIds.value = [];
  addForm.value = {
    id: "",
    fl: "01",
    xm: "",
    sfzh: "",
    xbdm: "",
    mzdm: "",
    zzmm: "",
    hyzk: "",
    whcddm: "",
    jh: "",
    jx: "",
    lx: "",
    lxdh: "",
    sklList: [],
    bz: "",
    ssbm: "",
    ssbmid: "",
    ssbmdm: ""
  };
  getLeftdata();
}
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
//批量数据
const handleSelectionChange = (val) => {
  ids.value = [];
  if (val) {
    val.forEach((item) => {
      ids.value.push(item.id);
    });
  }
};
function handleSelectionChangeLeft(val) {
  leftdata.value = val;
}
function handleSelectionChangeRight(val) {
  rightData.value = val;
}
watch(
  () => userQuery.value.deptId,
  (newVal) => {
    getListLeftData();
  }
);
function getLeftdata() {
  // selectUserDeptPage(userQuery.value).then((res) => {
  //   tableLeftData.value = [];
  //   let rightIds = tableRightData.value.map((item) => item.id);
  //   res.records.forEach((v) => {
  //     if (rightIds.indexOf(v.id) == -1) {
  //       tableLeftData.value.push(v);
  //     }
  //   });
  //   totalUser.value = res.total;
  // });
}

// 获取数据的方法
const getListLeftData = async () => {
  const res = await getSysUserList(userQuery.value);
  tableLeftData.value = res?.records;
  totalUser.value = res.total;
};
//批量删除数据
const batchDelete = () => {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      batchDeleteList(ids.value).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
};
// 用户穿梭框相关
const totalUser = ref(0);
function handleSizeChangeUser(e) {
  userQuery.value.size = e;
  getListLeftData();
}
function handleCurrentChangeUser(e) {
  userQuery.value.current = e;
  getListLeftData();
}
//更改查询条数
function handleSizeChangezq(e) {
  formzq.value.size = e;
  formzq.value.current = 1;
  // getListData();
}
//分页查询
function handleCurrentChangezq(e) {
  formzq.value.current = e;
  // getListData();
}
//更改查询条数
function handleSizeChange(e) {
  form.value.size = e;
  form.value.current = 1;
  getListData();
}
//分页查询
function handleCurrentChange(e) {
  form.value.current = e;
  getListData();
}
//新增选择部门
function addHandleChange(e) {
  const info = cascader.value.getCheckedNodes()[0];
  addForm.value.ssbm = info.label;
  addForm.value.ssbmid = info.value;
}
//选择标签
function onChangeBQ(e) {
  addForm.value.bqId = JSON.parse(JSON.stringify(e));
}
//查询条件选择部门
function handleChange(e) {
  const ids = JSON.parse(JSON.stringify(e));
}
//新增提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      let data = addForm.value;
      if (data.id) {
        updateTbJcglXfll(data)
          .then((res) => {
            ElMessage({
              message: "修改成功",
              type: "success"
            });
            dialogFormVisible.value = false;
            loading.value = false;
            form.value.current = 1;
            getListData();
          })
          .catch(() => {
            loading.value = false;
          });
      } else {
        addTbJcglXfll(data)
          .then((res) => {
            ElMessage({
              message: "添加成功",
              type: "success"
            });
            dialogFormVisible.value = false;
            loading.value = false;
            form.value.current = 1;
            getListData();
          })
          .catch(() => {
            loading.value = false;
          });
      }
    }
  });
}
//批量新增
function plADD() {
  const allData = tableRightData.value.map((item) => {
    const itemForm = {
      ryid: item.id,
      ssbmid: item.deptId,
      ssbm: item.deptName,
      ssbmdm: item.deptCode,
      lxdh: item.mobile,
      xm: item.userName,
      sfzh: item.idEntityCard,
      whcddm: item.whcd,
      fl: "01",
      jh: item.inDustRialId,
      zzmm: item.politic,
      hyzk: item.marital,
      lx: item.type,
      xbdm: item.sex,
      mzdm: item.nation
    };
    return addTbJcglXfll(itemForm);
  });
  Promise.all(allData).then((res) => {
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    chooseUserVisible.value = false;
    dialogFormVisible.value = false;
    getListData();
  });
}

//点击标签功能
function chackJn(item) {
  form.value.current = 1;
  form.value.bqId = item.id;
  form.value.bqlx = item.bqlx;
  getListData();
}
//重置搜索
function reset() {
  form.value = {
    current: 1,
    size: 20,
    mjName: "",
    sfzh: "",
    ssbmdm: "",
    bqId: "",
    bqlx: "",
    xtSjzt: "1"
  };
  getListData();
}
//点击查询
const handleFilter = () => {
  form.value.current = 1;
  getListData();
};
//获取数据
const getListData = () => {
  loadingTable.value = true;
  let data = {
    fl: "01",
    sfzh: form.value.sfzh,
    xm: form.value.mjName,
    pageSize: form.value.size,
    ssbmdm: form.value.ssbmdm,
    pageCurrent: form.value.current,
    bqId: form.value.bqId,
    bqlx: form.value.bqlx,
    ssbmdm: form.value.ssbmdm,
    xtSjzt: form.value.xtSjzt
  };
  getTbJcglXfll(data)
    .then((res) => {
      if (res.records.length > 0) {
        res.records.forEach((item) => {
          if (item.sklTag) {
            item.jnbqList = item.sklTag.split(",");
          }
          if (item.expTag) {
            item.jybqList = item.expTag.split(",").splice(2);
          }
        });
      }
      tableData.value = res.records;
      total.value = res.total;
      loadingTable.value = false;
    })
    .catch(() => {
      loadingTable.value = false;
    });
  // 获取身份证数据
  getSfhList().then((res) => {
    idEntityList.value = res;
  });
};
//设置详情
function setInfo(e) {
  title.value = "巡逻民警详情";
  getTbJcglXfllInfo(e.id).then((res) => {
    ssbmIds.value = [];
    proxy.$set(res.ssbmdm, depList.value, "childDeptList", (res) => {
      ssbmIds.value.push(res);
    });
    addForm.value = res;
    dialogFormVisible.value = true;
  });
}
//点击修改打开弹窗
function onClickUpdate(e) {
  chackipt.value = true;
  title.value = "修改巡逻民警信息";
  getTbJcglXfllInfo(e.id).then((res) => {
    ssbmIds.value = [];
    proxy.$set(res.ssbmdm, depList.value, "childDeptList", (res) => {
      ssbmIds.value.push(res);
    });
    addForm.value = res;
    addForm.value.ssbmid = addForm.value.ssbmid * 1;
    addForm.value.ssbmid = addForm.value.ssbmid * 1;
    addForm.value.sklList = res.sklList.map((item) => item.id);
    dialogFormVisible.value = true;
    imgUrl.value = res.tpid ? urlImg.value + res.tpid : "";
  });
}
//删除人员
function delDictItem(e) {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      batchDeleteList([e.id]).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}

//人员离职
function lzList(e) {
  proxy
    .$confirm("确定要离职", "警告", {
      type: "warning"
    })
    .then(() => {
      ryLz([e.id]).then((res) => {
        ElMessage({
          message: "成功",
          type: "success"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}

// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 274;
  tableHeight1.value = window.innerHeight - 340;
};
</script>

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

.dialog {
  .mj_box {
    display: flex;
    padding: 3rem;

    .item {
      height: 40rem;
      width: 20rem;
    }

    .leftAndRiight {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      width: 10rem;
    }
  }
}

.treeLeft,
.checkedRight {
  padding: 1.5rem;
  border: 1px solid #07376d;
}

.total {
  display: flex;
}

.jnbq {
  margin-left: 1rem;
  margin-bottom: 0.5rem;

  >.el-button.on {
    background: #046ce4;
  }
}

.head_box {
  // width: 300px;
  width: 97%;
}

.my_transfer {
  height: calc(100% - 50px);
  display: flex;

  .btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
  }

  .left {
    margin: 12px;
    flex: 1;
    position: relative;

    .tableBox {
      position: absolute;
      width: 100%;
    }

    .serch {
      position: relative;
      width: 100%;
      height: 96px;

      >.el-form--inline {
        display: block;
        width: 100%;
        padding: 0;

        >.el-form-item--default {
          width: 31%;
        }
      }
    }

    .tableBox {
      width: 100%;
    }
  }

  .right {
    width: 380px;
    margin: 12px;
  }
}

.phone {
  width: 95px;
  height: 120px;

  .el-image {
    width: 95px;
    max-height: 120px;
  }
}

::v-deep .el-upload {
  width: 90px;
  height: 100px;
  border: 1px dashed #e0e0e0;
  margin-bottom: 14px;

  .el-icon {
    margin-top: 34px;
    font-size: 26px;
  }

  .el-image {
    width: 100%;
    height: 100%;
  }
}
</style>
