<template>
  <div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="form" :inline="true">
        <el-form-item label="分组名称">
          <el-input v-model="form.jzmc" placeholder="请输入姓名" clearable />
        </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="tabBox">
      <el-table :data="tableData" border ref="dataTreeList" row-key="id" 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 prop="jzmc" show-overflow-tooltip align="center" width="200" label="分组名称" />
        <el-table-column label="分组成员" prop="jzry">
          <template #default="{ row }">
            <span class="xmTag" v-for="item in row.jzry" :key="item.id">{{
              item.xm
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template #default="{ row }">
            <el-button @click="onClickUpdate(row.id)" 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.pageCurrent" :page-sizes="[10, 20, 50]" :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-if="openDialog" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button type="primary" size="small" @click="submit" :loading="loading">保存</el-button>
          <el-button size="small" @click="openDialog = false">关闭</el-button>
        </div>
      </div>
      <el-form ref="elform" :model="addForm" :rules="rules" :inline="true" label-position="top">
        <el-form-item label="分组名称" prop="jzmc">
          <el-input v-model="addForm.jzmc" placeholder="请输入分组名称" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="分组成员" prop="jzry" style="width: 100%">
          <div class="ipt" @click.stop="fjVisible = true">
            <el-tag v-for="tag in fjData" :key="tag.id" class="mx-1" closable :type="tag.type"
              @close="handleClosefj(tag)">
              {{ tag.xm }}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 辅警弹唱 -->
    <FjLoad v-model="fjVisible" :Single="false" @choosedUsers="hanlderChooseFj" />
  </div>
</template>

<script setup>
import { qcckPost, qcckGet, qcckPut } from "@/api/qcckApi.js";
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
import { ElMessage } from "element-plus";
import {
  ref,
  reactive,
  onMounted,
  computed,
  defineExpose,
  defineEmits,
  getCurrentInstance
} from "vue";
const emit = defineEmits(["deleteMore"]);
const { proxy } = getCurrentInstance();
const searchBox = ref(null); // 搜索盒子
//筛选条件参数
const formDefault = ref({});
const form = ref({
  pageCurrent: 1,
  pageSize: 20
});
const tableHeight = ref(); // 表格高度
const tableHeight1 = ref(); // 表格高度
const tableData = ref([]); //表单数据
const keyCount = ref(0); //tabel组件刷新值
const loadingTable = ref(false);
const title = ref("新增分组");
const openDialog = ref(false); //打开弹窗
const total = ref(0); //总数据
const isDisabled = ref(false); //是否警用保存按钮
const loading = ref(false); //按钮是否显示加载
const ids = ref([]); //批量删除的ID
//新增表单参数
const elform = ref(null); //表单对象
const addFormDefault = ref({});
const addForm = ref({});
//新增表单验证数据
const rules = reactive({
  jzmc: [{ required: true, message: "请输入分组名称", trigger: "blur" }]
});
const fjData = ref([]); //选择的辅警数据
const fjVisible = ref(false); //辅警弹窗

onMounted(() => {
  addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
  formDefault.value = JSON.parse(JSON.stringify(form.value));
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
  handleFilter(); //查询数据
});

function init() {
  addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
  openDialog.value = true;
}

//点击查询
const handleFilter = () => {
  form.value.pageCurrent = 1;
  getListData();
};

//获取数据
const getListData = () => {
  loadingTable.value = true;
  qcckGet(form.value, "/mosty-jcgl/tbJcglXfllFz")
    .then((res) => {
      loadingTable.value = false;
      res.records.forEach((element) => {
        element.jzry = JSON.parse(element.jzry);
      });
      tableData.value = res.records;
      total.value = res.total;
    })
    .catch(() => {
      loadingTable.value = false;
    });
};

//选择辅警
function hanlderChooseFj(arr) {
  fjData.value = arr;
  addForm.value.jzry = JSON.stringify(fjData.value);
}

// 删除辅警
function handleClosefj(tag) {
  fjData.value.splice(fjData.value.indexOf(tag), 1);
  addForm.value.jzry = JSON.stringify(fjData.value);
}

//批量数据
const handleSelectionChange = (val) => {
  ids.value = val.map((item) => {
    return item.id;
  });
  emit("deleteMore", ids.value);
};

//更改查询条数
function handleSizeChange(e) {
  form.value.pageSize = e;
  form.value.pageCurrent = 1;
  getListData();
}
//分页查询
function handleCurrentChange(e) {
  form.value.pageCurrent = e;
  getListData();
}

//新增提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      if (title.value == "编辑分组") {
        qcckPut(addForm.value, "/mosty-jcgl/tbJcglXfllFz")
          .then((res) => {
            ElMessage({ message: "修改成功", type: "success" });
            openDialog.value = false;
            loading.value = false;
            handleFilter();
          })
          .catch(() => {
            loading.value = false;
          });
      } else {
        addForm.value.jzry = JSON.stringify(fjData.value);
        qcckPost(addForm.value, "/mosty-jcgl/tbJcglXfllFz")
          .then((res) => {
            ElMessage({ message: "添加成功", type: "success" });
            openDialog.value = false;
            loading.value = false;
            handleFilter();
          })
          .catch(() => {
            loading.value = false;
          });
      }
    }
  });
}
//重置搜索
function reset() {
  form.value = JSON.parse(JSON.stringify(formDefault.value));
  getListData();
}

//点击修改打开弹窗
function onClickUpdate(id) {
  title.value = "编辑分组";
  qcckGet({}, "/mosty-jcgl/tbJcglXfllFz/" + id).then((res) => {
    addForm.value = res;
    fjData.value = JSON.parse(res.jzry);
    openDialog.value = true;
  });
}
//删除人员
function delDictItem(e) {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      deletEate(e.id);
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}

//批量删除数据
const batchDelete = () => {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      deletEate(ids.value);
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
};

function deletEate(data) {
  qcckPost(data, "/mosty-jcgl/tbJcglXfllFz/deleteList").then((res) => {
    ElMessage({
      message: "删除成功",
      type: "success"
    });
    getListData();
  });
}
// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};

defineExpose({
  batchDelete,
  init
});
</script>

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

.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
}

.xmTag {
  border: 1px solid rgb(7, 85, 188);
  padding: 1px 6px;
  margin: 0 4px;
  border-radius: 4px;
  white-space: nowrap;
}
</style>
