<template>
  <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.fjName" 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 type="selection" width="40" align="center" />
        <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" show-overflow-tooltip align="center" label="辅警姓名">
        </el-table-column>
        <el-table-column prop="sfzh" show-overflow-tooltip align="center" label="身份证号码">
        </el-table-column>
        <el-table-column prop="ssbm" label="所属部门" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jh" label="警号" 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="closeDialog">关闭</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="sfzh">
          <el-input v-model="addForm.sfzh" placeholder="请输入身份证号码" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" type="password" placeholder="请输入密码" clearable />
        </el-form-item>
        <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="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="ssbmdm" :rules="{ required: true, message: '请选择部门' }">
          <MOSTY.Department :placeholder="addForm.ssbm" width="100%" clearable v-model="addForm.ssbmdm" />
        </el-form-item>
        <el-form-item label="人员类别" prop="lx">
          <el-select clearable v-model="addForm.lx" placeholder="请选择" style="width: 100%" disabled>
            <el-option value="02" label="辅警"></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>
    <!-- 人员档案弹窗 -->
    <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 * as MOSTY from "@/components/MyComponents/index";
import ZbCalendar from "@/components/ZbCalendar/index";
import PersonnelDialog from "../patrol-police/personnelProfile.vue";
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
import Person from "@/assets/images/layout/default_male.png";
import {
  getTbJcglXfll,
  deleteTbJcglXfll,
  getTbJcglXfllInfo,
  updateTbJcglXfll,
  getTbJcglBq,
  addTbJcglXfll,
  getCountBqsl,
  batchDeleteList,
  ryLz
} from "@/api/xfll";
import { ElMessage } from "element-plus";
import {
  ref,
  reactive,
  onMounted,
  computed,
  getCurrentInstance,
  onUnmounted,
  defineExpose,
  defineEmits
} from "vue";
const urlImg = ref("/mosty-api/mosty-base/minio/image/download/");
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
const tableHeight1 = ref(); // 表格高度
const title = ref("新增巡逻辅警信息");
const chackipt = ref(false);
const totalzq = ref(0);
const loadingTable = ref(true);
const emit = defineEmits(["deleteMore"]);
const props = {
  expandTrigger: "children",
  children: "childDeptList",
  label: "orgName",
  value: "orgCode",
  checkStrictly: true,
  emitPath: false
};
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 { proxy } = getCurrentInstance();
const {
  D_BZ_XB,
  D_BZ_WHCD,
  D_BZ_ZZMM,
  D_BZ_HYZK,
  D_BZ_MZ,
  D_BZ_XFXLLX,
  D_BZ_XLCJ,
  D_BZ_SFLZ
} = proxy.$dict(
  "D_BZ_XB",
  "D_BZ_WHCD",
  "D_BZ_ZZMM",
  "D_BZ_HYZK",
  "D_BZ_MZ",
  "D_BZ_XFXLLX",
  "D_BZ_XLCJ",
  "D_BZ_SFLZ"
);
const bqList = ref([]); //标签数据
const lxList = reactive([]); //搜索框标签选择数据
//筛选条件参数
const form = ref({
  current: 1,
  size: 20,
  fjName: "",
  sfzh: "",
  ssbmdm: "",
  xtSjzt: "1"
});
//筛选条件参数执勤
const formzq = ref({
  current: 1,
  size: 20
});
const tableData = ref([]); //表单数据
const total = ref(0); //总数据
//执勤记录弹窗
const zqjl = ref(false);
const mapActive = ref(false);
const dialogFormVisible = ref(false); //是否显示弹窗
const elform = ref(null); //表单对象
const depList = ref([]); //部门数据
const cascader = ref(null); //级联选择器
const isDisabled = ref(false); //是否警用保存按钮
const loading = ref(false); //按钮是否显示加载
const ssbmIds = ref([]); //级联选择器回显ID
const ids = ref([]); //批量删除的ID
const keyCount = ref(0); //tabel组件刷新值
//新增表单参数
const addFormDefault = ref({});
const addForm = ref({
  id: "",
  fl: "02",
  xm: "",
  sfzh: "",
  xbdm: "",
  mzdm: "",
  zzmm: "",
  hyzk: "",
  whcddm: "",
  jh: "",
  lx: "02",
  lxdh: "",
  bz: "",
  ssbm: "",
  ssbmdm: ssbmIds.value[ssbmIds.value - 1]
});
const imgUrl = ref("");
//新增表单验证数据
const rules = reactive({
  xm: [
    {
      required: true,
      message: "请输入辅警姓名"
    }
  ],
  sfzh: [
    {
      required: true,
      message: "请输入身份证号码"
    }
  ],
  password: [
    {
      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: "请选择学历"
    }
  ],
  lxdh: [
    {
      required: true,
      message: "请输入联系电话"
    }
  ],
  lx: [
    {
      required: true,
      message: "请选择人员类别"
    }
  ]
});
function chackZqjl(item) {
  zqjl.value = true;
}

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 closeDialog() {
  dialogFormVisible.value = false;
  isDisabled.value = false;
  imgUrl.value = "";
  addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
}

function setBm() {
  if (ssbmIds.value.length >= 1) {
    const info = cascader.value.getCheckedNodes()[0];
    addForm.value.ssbm = info.label;
    addForm.value.ssbmdm = info.value;
  }
}
onMounted(() => {
  addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
  //获取搜索栏标签选择数据
  getCountBqsl().then((res) => {
    res.forEach((item) => {
      lxList.push(item);
    });
  });
  getListData();
  //获取部门信息
  selectDeptPage({}).then((res) => {
    depList.value = res.records;
  });
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
  //获取新增标签数据
  let data = {
    pageSize: 5000,
    pageCurrent: 1,
    bqlx: "SKL"
  };
  getTbJcglBq(data).then((res) => {
    bqList.value = res.records.filter((item) => {
      return item.xtSjzt == "1";
    });
  });
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
//批量数据
const handleSelectionChange = (val) => {
  ids.value = val.map((item) => {
    return item.id;
  });
  emit("deleteMore", ids.value);
};
//点击标签功能
function chackJn(item) {
  form.value.current = 1;
  form.value.bqId = item.id;
  form.value.bqlx = item.bqlx;
  getListData();
}
//批量删除数据
const batchDelete = () => {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      batchDeleteList(ids.value).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
};
//设置详情
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;
    // form.value.ssbmdm = ssbmIds.value[ssbmIds.value.length - 1];
    addForm.value = res;
    dialogFormVisible.value = true;
    isDisabled.value = true;
  });
}
//更改查询条数
function handleSizeChange(e) {
  form.value.size = e;
  form.value.current = 1;
  getListData();
}
//分页查询
function handleCurrentChange(e) {
  form.value.current = e;
  getListData();
}
//更改查询条数
function handleSizeChangezq(e) {
  formzq.value.size = e;
  formzq.value.current = 1;
  getListData();
}
//分页查询
function handleCurrentChangezq(e) {
  formzq.value.current = e;
  getListData();
}
//查询条件选择部门
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;
      data.bqId = addForm.value.sklList;
      if (data.id) {
        updateTbJcglXfll(data)
          .then((res) => {
            ElMessage({ message: "修改成功", type: "success" });
            closeDialog();
            handleFilter();
            loading.value = false;
          })
          .catch(() => {
            loading.value = false;
          });
      } else {
        addTbJcglXfll(data)
          .then((res) => {
            ElMessage({ message: "添加成功", type: "success" });
            closeDialog();
            handleFilter();
            loading.value = false;
          })
          .catch(() => {
            loading.value = false;
          });
      }
    }
  });
}
//重置搜索
function reset() {
  form.value = {
    current: 1,
    size: 20,
    fjName: "",
    sfzh: "",
    ssbmdm: "",
    xtSjzt: "1"
  };
  getListData();
}

//点击查询
const handleFilter = () => {
  form.value.current = 1;
  getListData();
};
//获取数据
const getListData = () => {
  loadingTable.value = true;
  let data = {
    fl: "02",
    sfzh: form.value.sfzh,
    xm: form.value.fjName,
    pageSize: form.value.size,
    pageCurrent: form.value.current,
    bqId: form.value.bqId,
    bqlx: form.value.bqlx,
    ssbmdm: form.value.ssbmdm
  };
  getTbJcglXfll(data)
    .then((res) => {
      loadingTable.value = false;
      tableData.value = res.records;
      total.value = res.total;
    })
    .catch(() => {
      loadingTable.value = false;
    });
};
function add() {
  chackipt.value = false;
  title.value = "新增巡逻辅警信息";
  dialogFormVisible.value = true;
  ssbmIds.value = [];
  addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
  imgUrl.value = "";
}
//点击修改打开弹窗
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;
    imgUrl.value = res.tpid ? urlImg.value + res.tpid : "";
    addForm.value.sklList = res.sklList.map((item) => item.id);
    dialogFormVisible.value = true;
  });
}
//删除人员
function delDictItem(e) {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      batchDeleteList([e.id]).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}
// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 276;
  tableHeight1.value = window.innerHeight - 57 - 20 - 200;
};
// 人员档案
const personDialog = ref(null);
function getDocument(row) {
  personDialog.value.init(row);
}
defineExpose({
  add,
  batchDelete,
  handleFilter
});
</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;
  // align-items: center;
}

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

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

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #001238;
  border-color: var(--el-disabled-border-color);
  color: var(--el-disabled-text-color);
  cursor: not-allowed;
}

::v-deep .el-select .el-input.is-disabled .el-input__inner:hover,
::v-deep .el-select .el-input.is-disabled .el-input__inner {
  border-color: #09317f;
}

.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>
