<template>
  <div class="statistical-analysis">
    <div class="left">
      <div style="background: #fff" class="pl10 pr10 pb10 pt10">
        <div class="title">图像信息</div>
        <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseData">
          <template #cjhx>
            <img width="60" height="60" :src="pro" alt="" />
          </template>
          <template #ytp>
            <img width="60" height="60" :src="pro" alt="" />
          </template>
          <template #controls="{ row }">
            <el-link size="small" type="success" @click="addEdit('edit', row)">研判确认</el-link>
            <el-link size="small" type="primary">查看</el-link>
            <el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
          </template>
        </MyTable>
      </div>
      <div style="background: #fff" class="mt10 pl10 pr10 pb10 pt10">
        <div class="flex align-center">
          <div class="title mr20">人员信息</div>
          <div class="mb13">
            <el-button size="small" v-for="it in btnsList" :key="it" @click="chooseType(it)">
              {{ it }}
            </el-button>
          </div>
        </div>
        <MyTable :tableData="pageData.tableDataPeople" :tableColumn="pageData.tableColumnPeople"
          :tableHeight="pageData.tableHeight1" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger1"
          :controlsWidth="pageData.controlsWidth" @chooseData="chooseDataBottom">
          <template #ryXm="{ row }">
            <div class="one_text_detail">姓名：{{ row.ryXm }} &nbsp;；</div>
            <div class="one_text_detail">电话：{{ row.rySjhm }} &nbsp;；</div>
            <div class="one_text_detail">身份证：{{ row.rySfzh }}</div>
          </template>
          <template #fxDj="{ row }">
            <DictTag :tag="false" :value="row.fxDj" :options="D_GS_RQFJ_FXDJ" />
          </template>
          <template #fxLb="{ row }">
            <DictTag :tag="false" :value="row.fxLb" :options="D_GS_RQFJ_FXLB" />
          </template>
          <template #bqList="{ row }">
            <div v-if="row.bqList">
              <el-tag v-for="(it, idx) in row.bqList" :key="idx">{{ it.bqMc }}、</el-tag>
            </div>
          </template>
          <template #czfs="{ row }">
            <div>
              关注：
              <DictTag :tag="false" style="display: inline" :value="row.sfGz" :options="D_BZ_SF" />&nbsp;；
            </div>
            <div>
              布控人员：
              <DictTag :tag="false" style="display: inline" :value="row.sfZbkry" :options="D_BZ_SF" />&nbsp;；
            </div>
            <div>
              重点人员：
              <DictTag :tag="false" style="display: inline" :value="row.sfZzdry" :options="D_BZ_SF" />；
            </div>
          </template>
        </MyTable>
        <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight1"
          :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }" />
      </div>
    </div>
    <div class="right">
      <div class="title">轨迹信息</div>
      <ul class="cntBox" v-loading="modelLoading">
        <li class="step" v-for="(item, index) in stepList" :key="index">
          <div style="color: #000">{{ item.yjFssj }}</div>
          <div class="desc">
            <div class="one_text_detail mb5">事由：{{ item.yjNr }}</div>
            <div class="one_text_detail mb5">数据来源：{{ item.yjGzymc }}</div>
            <div class="one_text_detail">所在地址：{{ item.yjDz }}</div>
          </div>
        </li>
        <MOSTY.Empty :show="!modelLoading && stepList.length <= 0"></MOSTY.Empty>
      </ul>
    </div>
  </div>
  <!-- 弹窗 -->
  <Model v-model="isShow" :type="chooselx" :chooseList="chooseList" :ids="ids" @change="getList"
    :dic="{ D_BZ_SF, D_GS_ZDRFJ_SPZT }"></Model>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import Model from "./model.vue";
import { qcckGet } from "@/api/qcckApi.js";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import { qcckPost } from "@/api/qcckApi.js";
const { proxy } = getCurrentInstance();
const { D_GS_ZDRFJ_SPZT, D_BZ_SF, D_GS_RQFJ_FXDJ, D_GS_RQFJ_FXLB } =
  proxy.$dict("D_GS_ZDRFJ_SPZT", "D_BZ_SF", "D_GS_RQFJ_FXDJ", "D_GS_RQFJ_FXLB"); //获取字典数据
const btnsList = reactive(["是否重点人", "布控", "是否关注", "移交管控"]);
const chooselx = ref("");
const isShow = ref(false);
const ids = ref([]);
const chooseList = ref([]);
const pageData = reactive({
  tableData: [
    {
      tpzy: "GBJD01",
      dwmc: "工布江达重点人",
      zylyxz: "涉稳",
      cjhx: "系统新增",
      ytp: "低级",
      rxxsd: "2025/05/05"
    }
  ],
  tableDataPeople: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false
  },
  tableConfiger1: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
    haveControls: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
  controlsWidth: 220,
  tableColumn: [
    { label: "图片资源", prop: "tpzy" },
    { label: "单位名称", prop: "dwmc" },
    { label: "资源来源详址", prop: "zylyxz" },
    { label: "采集画像", prop: "cjhx", showSolt: true },
    { label: "原图片", prop: "ytp", showSolt: true },
    { label: "人像相似度", prop: "rxxsd" }
  ],
  tableColumnPeople: [
    { label: "姓名", prop: "ryXm", showOverflowTooltip: true, showSolt: true },
    { label: "户籍地址", prop: "ryHjdz", showOverflowTooltip: true },
    { label: "护照号码", prop: "ryHzhm", showOverflowTooltip: true },
    { label: "现住地址", prop: "ryXzdz", showOverflowTooltip: true },
    { label: "附件照片", prop: "ryFjZp", showOverflowTooltip: true },
    { label: "管辖单位", prop: "gxDwDm", showOverflowTooltip: true },
    { label: "责任部门", prop: "ssbm", showOverflowTooltip: true },
    {
      label: "标签",
      prop: "bqList",
      showOverflowTooltip: true,
      showSolt: true
    },
    { label: "风险积分", prop: "fxjf", showOverflowTooltip: true },
    {
      label: "风险等级",
      prop: "fxDj",
      showOverflowTooltip: true,
      showSolt: true
    },
    {
      label: "风险类别",
      prop: "fxLb",
      showOverflowTooltip: true,
      showSolt: true
    },
    {
      label: "处置方式",
      prop: "czfs",
      showOverflowTooltip: true,
      showSolt: true
    }
  ]
});
const modelLoading = ref(false);
const stepList = ref([]);

const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getList();
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList();
};

//获取模型识别列表
const getList = () => {
  let data = { ...pageData.pageConfiger };
  qcckGet(data, "/mosty-gsxt/tbGsxtRqfjRy/selectPage").then((res) => {
    pageData.tableDataPeople = res.records || [];
    pageData.total = res.total;
    if (pageData.tableDataPeople.length > 0)
      chooseDataBottom(pageData.tableDataPeople[0]);
  });
};

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight = (window.innerHeight - 280) / 2;
  pageData.tableHeight1 = (window.innerHeight - 280) / 2 - 50;
  window.onresize = function () {
    tabHeightFn();
  };
};

// 选择数据
const chooseDataBottom = (val) => {
  if (Array.isArray(val)) {
    ids.value = val.map((item) => item.id);
    chooseList.value = val.filter((v) => {
      if (v.sfZzdry == 1) return v;
    });
  } else {
    if (!val.rySfzh) {
      ElMessage.warning("该人员没有轨迹");
    } else {
      stepList.value = [];
      modelLoading.value = true;
      let params = { pageSize: 1000, pageNum: 1, yjRysfzh: val.rySfzh };
      qcckPost(params, "/mosty-jmxf/tbYjxx/getPageList").then((res) => {
          stepList.value = res.records || [];
          modelLoading.value = false;
        })
        .catch(() => {
          modelLoading.value = false;
        });
    }
  }
};

const chooseType = (val) => {
  chooselx.value = val;
  if (ids.value.length == 0) return ElMessage.warning("请选择对应的数据");
  switch (val) {
    case "布控":
      proxy.$confirm("确定要布控", "警告", { type: "warning" }).then(() => {
          let params = { ids: ids.value, sfbk: "1" };
          qcckPost(params, "/mosty-gsxt/tbGsxtRqfjRy/updateBySfbkpz").then((res) => {
              ElMessage.success("布控成功");
              getList();
            }
          );
        })
        .catch(() => { });
      break;
    case "是否重点人":
      if (chooseList.value.length == 0) return ElMessage.warning("选择的数据中都是重点人");
      isShow.value = true;
      break;
    case "是否关注":
    case "移交管控":
      isShow.value = true;
      break;
  }
};

onMounted(() => {
  tabHeightFn();
  getList();
});
</script>

<style lang="scss" scoped>
.statistical-analysis {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  overflow: hidden;

  .title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    color: #333;

    &::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 78px;
      height: 4px;
      background: linear-gradient(90deg,
          #3597f9c4 0%,
          rgba(53, 150, 249, 0) 100%);
      border-radius: 4px 4px 4px 4px;
    }
  }

  .left {
    width: calc(100% - 410px);
    height: 100%;
    float: left;
  }

  .right {
    width: 400px;
    height: 100%;
    padding: 10px 10px 0 10px;
    margin-left: 10px;
    float: right;
    box-sizing: border-box;
    background: #fff;

    .cntBox {
      height: calc(100% - 60px);
      overflow: hidden;
      overflow-y: auto;

      .step {
        padding-left: 20px;
        box-sizing: border-box;
        position: relative;
        border-left: 3px dashed #0072ff;
        margin-left: 10px;

        &::before {
          position: absolute;
          content: "";
          width: 20px;
          height: 20px;
          background: #0072ff;
          border-radius: 50%;
          left: -12px;
          top: 0;
        }

        .desc {
          margin: 5px;
          color: #929090;
        }
      }
    }
  }

  .form-row {
    display: flex;

    .el-form-item {
      flex: 1;
    }
  }

  .upload-group {
    display: flex;
    // gap: 20px;

    .el-form-item {
      flex: 1;
    }
  }

  .unit {
    margin-left: 5px;
  }

  ::v-deep .el-input__inner {
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 0;
    color: #777575;
  }
}

.el-form-item--default {
  margin-bottom: 0px;
}
</style>
