<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}</span>
      <div>
        <el-button size="small" type="primary" @click="close">暂存</el-button>
        <el-button size="small" type="primary" @click="close">确认</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <div class="left">
        <div class="top" ref="topBox">
          <div class="title">图像信息</div>
          <MyTable
            :tableData="pageData.tableData"
            :tableColumn="pageData.tableColumn"
            :tableHeight="250"
            :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 class="mt20">
          <div class="title">人员信息</div>
          <MyTable
            :tableData="pageData.tableDataPeople"
            :tableColumn="pageData.tableColumnPeople"
            :tableHeight="pageData.tableHeight"
            :key="pageData.keyCount"
            :tableConfiger="pageData.tableConfiger"
            :controlsWidth="pageData.controlsWidth"
            @chooseData="chooseData"
          >
            <template #controls="{ row }">
              <el-link size="small" type="primary" @click="addEdit('edit', row)">关联重点人</el-link>
              <el-link size="small" type="primary">查看</el-link>
              <el-link size="small" type="primary" @click="deleteRow(row)">修改</el-link>
            </template>
          </MyTable>
          <Pages
            class="mt10"
            @changeNo="changeNo"
            @changeSize="changeSize"
            :tableHeight="pageData.tableHeight"
            :pageConfiger="{
              ...pageData.pageConfiger,
              total: pageData.total
            }"
          ></Pages>
        </div>
      </div>
      <el-divider direction="vertical" style="height: 100%" />
      <div class="right noScollLine">
        <div class="title">轨迹信息</div>

        <div>
          <div class="step" v-for="(item, index) in stepList" :key="`${index}stepList`">
            <div class="icon">
              <div class="circle"></div>
              <div class="line"></div>
            </div>

            <div>
              <div>{{ item.time }}</div>
              <div class="desc">
                <div class="ellipsis mb5">是由：{{ item.sy }}</div>
                <div class="ellipsis mb5">数据来源：{{ item.sjly }}</div>
                <div class="ellipsis">所在地址：{{ item.szdz }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, nextTick } from "vue";
  import MyTable from "@/components/aboutTable/MyTable.vue";
  import Pages from "@/components/aboutTable/Pages.vue";
  const dialogForm = ref(false);
  const activeName = ref("basic");
  const title = ref("深度研判");
  const listQuery = ref({});
  const topBox = ref();
  const areaOptions = ref([]); // 区域选项数据

  // 初始化数据
  const init = (type, row) => {
    dialogForm.value = true;
    tabHeightFn();
    // 根据type和row初始化表单数据
  };

  const close = () => {
    dialogForm.value = false;
  };
  const pageData = reactive({
    tableData: [
      {
        tpzy: "GBJD01",
        dwmc: "工布江达重点人",
        zylyxz: "涉稳",
        cjhx: "系统新增",
        ytp: "低级",
        rxxsd: "2025/05/05"
      },
      {
        tpzy: "GBJD01",
        dwmc: "工布江达重点人",
        zylyxz: "涉稳",
        cjhx: "系统新增",
        ytp: "低级",
        rxxsd: "2025/05/05"
      },
      {
        tpzy: "GBJD01",
        dwmc: "工布江达重点人",
        zylyxz: "涉稳",
        cjhx: "系统新增",
        ytp: "低级",
        rxxsd: "2025/05/05"
      },
      {
        tpzy: "GBJD01",
        dwmc: "工布江达重点人",
        zylyxz: "涉稳",
        cjhx: "系统新增",
        ytp: "低级",
        rxxsd: "2025/05/05"
      },
      {
        tpzy: "GBJD01",
        dwmc: "工布江达重点人",
        zylyxz: "涉稳",
        cjhx: "系统新增",
        ytp: "低级",
        rxxsd: "2025/05/05"
      }
    ],
    tableDataPeople: [
      { xm: "111", xb: "111", sfzh: "111", hjd: "111", xjd: "111", sjh: "111", cph: "111", gkzt: "111" },
      { xm: "111", xb: "111", sfzh: "111", hjd: "111", xjd: "111", sjh: "111", cph: "111", gkzt: "111" },
      { xm: "111", xb: "111", sfzh: "111", hjd: "111", xjd: "111", sjh: "111", cph: "111", gkzt: "111" },
      { xm: "111", xb: "111", sfzh: "111", hjd: "111", xjd: "111", sjh: "111", cph: "111", gkzt: "111" },
      { xm: "111", xb: "111", sfzh: "111", hjd: "111", xjd: "111", sjh: "111", cph: "111", gkzt: "111" },
      { xm: "111", xb: "111", sfzh: "111", hjd: "111", xjd: "111", sjh: "111", cph: "111", gkzt: "111" }
    ],
    keyCount: 0,
    tableConfiger: {
      rowHieght: 61,
      showSelectType: "checkBox",
      loading: 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: "xm" },
      { label: "性别", prop: "xb" },
      { label: "身份证号", prop: "sfzh" },
      { label: "户籍地", prop: "hjd" },
      { label: "现居地", prop: "xjd" },
      { label: "手机号", prop: "sjh" },
      { label: "车牌号", prop: "cph" },
      { label: "管控状态", prop: "gkzt" }
    ]
  });
  const stepList = ref([
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    },
    {
      time: "2025-4-25 16:40",
      sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
      szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
    }
  ]);
  // 表格高度计算
  const tabHeightFn = () => {
    nextTick(() => {
      console.log("topBox.value", topBox.value.offsetHeight);
      pageData.tableHeight = window.innerHeight - 410 - 250;
      console.log("pageData.tableHeight", pageData.tableHeight);
    });
    console.log("pageData.tableHeight", pageData.tableHeight);
    window.onresize = function () {
      tabHeightFn();
    };
  };

  defineExpose({ init });
</script>

<style lang="scss" scoped>
  .dialog {
    padding: 20px;

    :deep(.el-form-item__label) {
      background-color: #f7fafb;
      padding: 0px 8px;
      color: #000;
      font-weight: 500;
      border: 1px solid #e3e7ed;
    }

    .head_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .cntinfo {
      height: calc(100% - 70px);
      overflow: hidden;
      overflow-y: auto;
      display: flex;
      .title {
        font-size: 20px;

        font-weight: 700;
        margin-bottom: 20px;
      }
      .left {
        width: calc(100% - 400px);
      }
      .right {
        width: 400px;
        padding: 10px 0;
        overflow: auto;
        .step {
          //   position: relative;
          display: flex;
          gap: 5px;
          box-sizing: border-box;
          .desc {
            margin: 5px;
            color: #929090;
            width: 350px;
          }
          .icon {
            // position: absolute;
            // top: 0;
            // left: 0;
            text-align: center;
            .circle {
              height: 14px;
              width: 14px;
              border-radius: 50%;
              background-color: rgb(3, 134, 251);
            }
            .line {
              margin: 0 auto;
              width: 0;
              height: calc(100% - 14px);
              border: 1px dashed rgb(3, 134, 251);
            }
          }
        }
      }
    }

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