<template>
  <div>
    <div class="titleBox">
      <div class="title">重点人员管理</div>
      <div class="btnBox" style="display: flex">
        <el-button type="primary" style="margin-left: 10px" @click="dialogFormVisible = true;">
          <el-icon><CirclePlus /></el-icon>
          <span>新增</span>
        </el-button>
      </div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="姓名">
          <el-input placeholder="请输入重点人员姓名" v-model="listQuery.xm" clearable />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker  unlink-panels v-model="listQuery.gkkssj"  type="date"  format="YYYY-MM-DD"  value-format="YYYY-MM-DD"  placeholder="请选择日期"  />
        </el-form-item>
        <el-form-item label="责任区">
          <el-select v-model="listQuery.xfqid" placeholder="请选择责任区" filterable>
            <el-option v-for="item in zrqList" :key="item.id" :label="item.xfqMc" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="管控状态">
          <el-select v-model="listQuery.gkzt" placeholder="请选择管控状态" >
            <el-option v-for="item in D_ZDRGK_GKZT" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="listQuery.gkbq" placeholder="请选择管控状态" filterable>
            <el-option v-for="item in D_ZDRGK_GKBQ" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter">查询</el-button>
          <el-button @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabBox">
      <el-table :data="tableData" border row-key="orgCode" style="width: 100%" :key="keyCount" :height="tableHeight">
        <el-table-column prop="sfzh" label="身份证号码" show-overflow-tooltip align="center" width="200"/>
        <el-table-column prop="xm" label="姓名" show-overflow-tooltip width="120"/>
        <el-table-column label="性别" show-overflow-tooltip width="80">
          <template #default="{ row }">
            <dict-tag :options="D_BZ_XB" :value="row.xbdm" :tag="false" />
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center"  width="150">
          <template #default="{ row }">
            <el-image
              style="width=80px;height:90px"
              :preview-src-list="[`/mosty-base/minio/image/download/${row.fjdz}`]"
              v-if="row.fjdz"
              hide-on-click-modal
              preview-teleported
              fit="cover"
              :src="`/mosty-base/minio/image/download/${row.fjdz}`"/>
          </template>
        </el-table-column>

        <el-table-column label="民族" align="center" width="80" >
          <template #default="{ row }">
            <dict-tag :options="D_BZ_MZ" :value="row.mz" :tag="false"  />
          </template>
        </el-table-column>

        <!-- <el-table-column prop="jzdz" label="居住地" show-overflow-tooltip align="center" width="320"/>
        <el-table-column prop="lxfs" label="联系方式" show-overflow-tooltip align="center" width="180"/> -->
        <el-table-column label="紧急联系人及方式" show-overflow-tooltip align="center" width="180" >
          <template #default="{ row }">
            <span>{{ row.jjlxr }}({{ row.jjlxrLxfs }})</span>
          </template>
        </el-table-column>
        <el-table-column label="标签" show-overflow-tooltip align="center" width="200">
          <template #default="{ row }">
            <div class="rybq_box">
              <dict-tag v-for="item in row.gkbq" :key="item" :options="D_ZDRGK_GKBQ" :value="item" :tag="true"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="linkMan" label="等级" show-overflow-tooltip align="center" width="100">
          <template #default="{ row }">
            <dict-tag :options="D_ZDRGK_GKDJ" :value="row.gkdj" :tag="false" />
          </template>
        </el-table-column>
        <el-table-column prop="linkMan" label="管控状态" show-overflow-tooltip align="center" width="100">
          <template #default="{ row }">
            <dict-tag :options="D_ZDRGK_GKZT" :value="row.gkzt" :tag="false" />
          </template>
        </el-table-column>

        <el-table-column prop="xtCjsj" label="创建时间" show-overflow-tooltip align="center" width="150"/>
        <!-- <el-table-column prop="gksj" label="最近管控时间" show-overflow-tooltip align="center" width="150"/>
        <el-table-column prop="linkMan" label="管控次数" show-overflow-tooltip align="center" width="100">
          <template #default="{ row }">
            <span>{{ row.gkjlList?.length }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="gkyy" label="管控原因" show-overflow-tooltip align="center" width="200"/>
        <el-table-column prop="czfs" label="处置方式" show-overflow-tooltip align="center" width="100"/>
        <el-table-column label="操作" align="center" fixed="right" width="230">
          <template #default="{ row }">
            <el-button @click="lookGj(row)" size="small">预警轨迹</el-button>
            <el-button @click="update(row)" size="small">编辑</el-button>
            <el-popconfirm @confirm="delDictItem(row)" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </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="listQuery.pageCurrent"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ isUpdate ? "修改" : "新增" }}</span>
        <div>
          <!-- 修改 -->
          <el-button v-if="isUpdate" type="primary" size="small" @click="onSave" :loading="buttonLoading" >修改</el-button>
          <!-- 新增 -->
          <el-button v-else type="primary" size="small" @click="onAdd" :loading="buttonLoading" >保存</el-button>
          <el-button size="small" @click="closeDialog">关闭</el-button>
        </div>
      </div>
      <el-form class="mosty-from-wrap" ref="editRef" label-width="140px" :rules="rules" :inline="true" label-position="top" :model="dialogForm">
        <el-form-item label="身份证号码" show-word-limit prop="sfzh" required >
          <el-input placeholder="请填写身份证号码" v-model="dialogForm.sfzh" />
        </el-form-item>
        <el-form-item label="姓名" prop="xm">
          <el-input placeholder="请填写重点人员姓名" v-model="dialogForm.xm" show-word-limit/>
        </el-form-item>
        <el-form-item label="性别" required>
          <el-select v-model="dialogForm.xbdm" placeholder="请选择性别">
            <el-option v-for="item in D_BZ_XB" :key="item" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="民族">
          <MOSTY.PackageSelect width="280px" v-model="dialogForm.mz" dictEnum="NATION" clearable filterable/>
        </el-form-item>
        <el-form-item  label="居住地" >
          <el-input show-word-limit  placeholder="请填写详细居住地" v-model="dialogForm.jzdz" />
        </el-form-item>
        <el-form-item label="联系方式" >
          <el-input placeholder="请填写联系方式" show-word-limit  v-model="dialogForm.lxfs"  />
        </el-form-item>
        <el-form-item label="责任社区民警" >
          <el-input placeholder="请填写责任社区民警" show-word-limit v-model="dialogForm.jjlxr"  />
        </el-form-item>
        <el-form-item label="责任社区民警电话" >
          <el-input placeholder="请填写责任社区民警电话" show-word-limit v-model="dialogForm.jjlxrLxfs" />
        </el-form-item>
        <el-form-item label="标签" prop="gkbq" >
          <el-select v-model="dialogForm.gkbq" multiple placeholder="请选择标签">
            <el-option v-for="item in D_ZDRGK_GKBQ" :key="item" :label="item.label"  :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="等级" prop="gkdj" >
          <el-select v-model="dialogForm.gkdj" placeholder="请选择等级">
            <el-option
              v-for="item in D_ZDRGK_GKDJ"
              :key="item"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="管控状态"  prop="gkzt">
          <el-select v-model="dialogForm.gkzt" placeholder="请选择管控状态">
            <el-option
              v-for="item in D_ZDRGK_GKZT"
              :key="item"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
         <el-form-item style="width: 100%" label="所属责任区" prop="xfqid"  @click.stop="modelValue = true" >
          <el-input v-model="dialogForm.xfqid"  placeholder="请选择所属责任区" style="width: 100%" clearable readonly  suffix-icon="ArrowDown" v-if="dialogForm.xfqList.length <= 0" />
          <template v-else>
            <el-tag @close.stop="handleClose(tag, 'zrq')" v-for="tag in dialogForm.xfqList" :key="tag.id" class="mx-1" closable :type="tag.type">
              {{ tag.xfqMc }}
            </el-tag>
          </template>
        </el-form-item>
        <el-form-item label="管控原因" style="width: 100%">
          <el-input placeholder="请填写管控原因" type="textarea" show-word-limit v-model="dialogForm.gkyy" />
        </el-form-item>
        <el-form-item label="处置方式" style="width: 100%">
          <el-radio-group v-model="dialogForm.czfs">
            <el-radio label="留置盘问"></el-radio>
            <el-radio label="核实后放行"></el-radio>
            <el-radio label="不处理"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <MOSTY.Upload v-model="dialogForm.fjdz" :limit="1"></MOSTY.Upload>
        </el-form-item>
      </el-form>
    </div>

    <!-- 请选择责任区 -->
    <ZrxLoad v-model="modelValue" v-if="modelValue" :roleIds="dialogForm.xfqid" @choosedUsers="hanlderChooseZrq" />
    <!-- 轨迹 -->
    <Route ref="dialogRout" />
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
import { useStore } from "vuex";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import ZrxLoad from "./zrxLoad.vue";
import Route from "./route.vue";
const store = useStore();
const modelValue = ref(false)
const { proxy } = getCurrentInstance();
const { D_BZ_XB, D_ZDRGK_GKZT, D_ZDRGK_GKBQ, D_ZDRGK_GKDJ, D_ZDRGK_GKLX ,D_BZ_MZ} = proxy.$dict( "D_BZ_XB", "D_ZDRGK_GKZT", "D_ZDRGK_GKBQ", "D_ZDRGK_GKDJ", "D_ZDRGK_GKLX","D_BZ_MZ");
const zdryDetail = ref({});
const dialogRout = ref();
const keyCount = ref(0); //tabel组件刷新值
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
//查询参数
const total = ref(0);
const listQuery = ref({
  pageSize: 20,
  pageCurrent: 1,
});
const buttonLoading = ref(false);
const dialogFormDefault = ref({});
const dialogForm = ref({
  xfqid: [],
  xfqList: [],
});
// 数据相关
const tableData = ref([]);
const dialogFormVisible = ref(false);
const zrqList = ref([]); //责任区数据
const isUpdate = ref(false);
const rules = reactive({
  xm:[{ required: true, message: '请填写姓名' ,trigger:'blur'}],
  xbdm:[{ required: true, message: '请选择性别',trigger:'change' }],
  mz:[{ required: true, message: '请选择民族' ,trigger:'blur'}],
  jzdz:[{ required: true, message: '请填写详细居住地' ,trigger:'blur'}],
  lxfs:[{ required: true, message: '请填写联系方式' ,trigger:'blur'}],
  jjlxr:[{ required: true, message: '请填写责任社区民警' ,trigger:'blur'}],
  jjlxrLxfs:[{ required: true, message: '责任社区民警电话' ,trigger:'change'}],
  gkdj:[{ required: true, message: '请选择等级' ,trigger:'change'}],
  gkzt:[{ required: true, message: '请选择管控状态' ,trigger:'change'}],
  xfqid:[{ required: true, message: '请选择所属责任区' ,trigger:'change'}],
})
onMounted(() => {
  dialogFormDefault.value = JSON.parse(JSON.stringify(dialogForm.value));
  tabHeightFn();
  _getXfqData();
  getListData();
});

//编辑
const update = (item) => {
  item.fjdz = [item.fjdz];
  dialogForm.value = item;
  dialogForm.value.xfqid = dialogForm.value.xfqList.map(v=>{return v.xfqId})
  dialogFormVisible.value = true;
  isUpdate.value = true;
};

// 查看轨迹

const lookGj = (row) => {
  dialogRout.value.innit(row)
}

// 获取数据的方法
const getListData = async () => {
  // listQuery.value.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode;
  qcckGet(listQuery.value, "/mosty-jmxf/tbJcglZdrgk/queryList").then((res) => {
    if (!res) return false;
    for (let i = 0; i < res.records.length; i++) {
      res.records[i].gkbq = res.records[i].gkbq.split(",");
    }
    tableData.value = res.records;
    total.value = res.total;
  });
};
//获取巡防区并绘制
const _getXfqData = () => {
  let data = {
    pageCurrent: 1,
    pageSize: 20,
    ssbmdm: JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
  };
  qcckGet(data, "/mosty-jmxf/tbJcglXfqy/queryList").then((res) => {
    zrqList.value = res.records || [];
  });
};

// 处理删除tag
function handleClose(tag, type) {
  dialogForm.value.xfqList.splice(dialogForm.value.xfqList.indexOf(tag), 1);
  dialogForm.value.xfqid.splice(dialogForm.value.xfqid.indexOf(tag.id), 1);
}
const reset = () => {
  tableData.value = [];
  dialogForm.value = {};
  listQuery.value = { pageSize: 20, pageCurrent: 1, gkbq: "", gkzt: "" };
  getListData();
};
const handleFilter = () => {
  listQuery.value.gkjssj = listQuery.value.gkkssj;
  listQuery.value.pageCurrent = 1;
  getListData();
};

//选择
function hanlderChooseZrq(arr) {
  dialogForm.value.xfqid = arr.map((v) => { return v.id; });
  dialogForm.value.xfqList = arr.map(item=>{return {xfqId:item.id ,xfqMc:item.xfqMc}})
}

// 分页相关
/**
 * size 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};

const onSave = () => {
  editRef.value.validate((valid) => {
    if (!valid) return ElMessage.error("请填写完必填项!");
    buttonLoading.value = true;
    dialogForm.value.gkbq = dialogForm.value.gkbq.join(",");
    if (dialogForm.value.fjdz instanceof Array) dialogForm.value.fjdz = dialogForm.value.fjdz.join(",");
    qcckPost(dialogForm.value, "/mosty-jmxf/tbJcglZdrgk/updateZdr").then((res) => {
      ElMessage.success("修改成功");
      dialogFormVisible.value = false;
      buttonLoading.value = false;
      isUpdate.value = false;
      closeDialog();
      handleFilter();
    }).catch(() => {
      buttonLoading.value = false;
    });

  });
};
const editRef = ref(null);
//新增
const onAdd = () => {
  editRef.value.validate((valid) => {
    if (!valid) return ElMessage.error("请填写完必填项!");
    buttonLoading.value = true;
    let params = { ...dialogForm.value  }
    params.xfqid = params.xfqid ? params.xfqid.join(',') :'';
    params.gkbq = params.gkbq ? params.gkbq.join(",") : ''
    params.fjdz = params.fjdz ? params.fjdz.join(",") : ''
    params.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
    qcckPost(params, "/mosty-jmxf/tbJcglZdrgk/saveZdr").then((res) => {
      ElMessage.success("新增成功");
      buttonLoading.value = false;
      dialogFormVisible.value = false;
      closeDialog();
      handleFilter();
    }).catch(() => {
      buttonLoading.value = false;
    });
  });
};

const delDictItem = (row) => {
  qcckPost([row.id], "/mosty-jmxf/tbJcglZdrgk/deleteBatch").then((res) => {
    ElMessage.success("删除成功");
    reset();
  });
};

const closeDialog = () => {
  dialogFormVisible.value = false;
  isUpdate.value = false;
  dialogForm.value = JSON.parse(JSON.stringify(dialogFormDefault.value));
};


// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight  - searchBox.value.offsetHeight - 240;
   window.onresize = function () {
    tabHeightFn();
  };
};

onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
</script>
<style >
.el-input-group__prepend {
  background-color: #062a48;
  border: 1px solid #114260;
  color: #fff;
}
</style>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
.user-manage-container {
  .table-header-wrap {
    margin-bottom: 22px;
  }

  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  .pagination {
    margin-top: 20px;
  }

  .twoLine {
    display: flex;
    align-items: flex-start;
    flex-flow: wrap;

    .el-form-item {
      width: 380px;
    }
  }
}
.zdy_tag {
  color: #999;
  border: 1px solid #999;
  display: inline-block;
  padding: 0px 10px;
  border-radius: 3px;
  line-height: 22px;
  margin-left: 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.active_tag {
  color: #fff;
  border: 1px solid #409eff;
  background: #409eff;
}
.rybq_box {
  display: flex;
}
</style>
