<template>
  <div class="intelligence-management">
    <!-- 左边 -->
    <div class="left-panel">
      <div class="pl80">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="线索库" name="one"></el-tab-pane>
          <el-tab-pane label="人员库" name="two"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="search-box">
        <el-input
          v-model="searchQuery"
          placeholder="请输入线索标题"
          suffix-icon="Search"
        />
      </div>
      <div class="flex mt10 just-center">
        <el-button size="small" type="primary">上报线索</el-button>
        <el-button size="small" type="primary" @click="addEdit('add',null)">新增线索</el-button>
        <el-button size="small" type="primary">查询</el-button>
        <el-button size="small">重置</el-button>
      </div>
      <div class="flex flex-warp">
        <span
          style="color: #0386fb"
          class="f12 ml10 mt4"
          v-for="(it, idex) in list.leftCoutn"
          :key="idex"
          >{{ it.label }}({{ it.value }})</span
        >
      </div>
      <div class="person-list">
        <div v-for="(item, index) in personList" :key="index" class="clue-item">
          <div class="clue-tag" v-if="item.tag">{{ item.tag }}</div>
          <span class="clue-status">处置</span>
          <div class="clue-content flex align-center">
            <img class="mr10" src="@/assets/images/icon100.png" alt="">
            <div class="clue-info">
              <div class="clue-header">*****线索</div>
              <div>编号：{{ item.number }}</div>
              <div>来源：{{ item.source }}</div>
              <div>涉及人员数量：{{ item.personCount }}</div>
              <div>指向地点：{{ item.location }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right-panel">
      <div class="flex just-between align-center">
        <h2 class="title" style="color: #333">xxxx线索详情</h2>
        <el-button type="primary" size="small">收藏</el-button>
      </div>
      <div style="width: 100%">
        <el-descriptions :column="2" border>
          <el-descriptions-item :width="260" label="线索标题"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="线索编号"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="线索类型"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="线索来源"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="开始时间"
            >2020.04.12</el-descriptions-item
          >
          <el-descriptions-item label="截止时间"
            >2020.04.19</el-descriptions-item
          >
          <el-descriptions-item label="上报单位"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="指向地点"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="上报时间"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="处置状态"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="群体状态"
            >2020.04.12</el-descriptions-item
          >
          <el-descriptions-item label="群体名称"
            >2020.04.19</el-descriptions-item
          >
          <el-descriptions-item label="线索标签大类"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="线索标签细类"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="所属专题"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="市内外"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="是否涉及外地"
            >2020.04.12</el-descriptions-item
          >
          <el-descriptions-item label="具体部位"
            >2020.04.19</el-descriptions-item
          >
          <el-descriptions-item label="指向时间类型"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="指向时间备注"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="表现形式"
            >*****线索</el-descriptions-item
          >
          <el-descriptions-item label="涉事类型"
            >123213113212131312</el-descriptions-item
          >
          <el-descriptions-item label="获取手段"
            >2020.04.12</el-descriptions-item
          >
          <el-descriptions-item label="线索备注"
            >2020.04.19</el-descriptions-item
          >
          <el-descriptions-item label="线索内容" :span="2"
            >张三，身份证号:123，2025年，在林某...，涉</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions :column="5" border>
          <el-descriptions-item :width="260" label="附件"
            >3.xls</el-descriptions-item
          >
          <el-descriptions-item label="涉及地">林芝</el-descriptions-item>
          <el-descriptions-item label="申请人">林芝</el-descriptions-item>
          <el-descriptions-item label="审核人">林芝</el-descriptions-item>
          <el-descriptions-item label="审批人">林芝</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="flex mt10 just-center">
        <el-button size="large" type="primary">核查单</el-button>
        <el-button size="large" type="primary">验收</el-button>
      </div>
      <div class="flex align-center">
        <h2 class="title" style="color: #333">******线索关联人员信息</h2>
        <span
          style="color: #0386fb"
          class="f12 ml10"
          v-for="(it, idex) in list.countList"
          :key="idex"
          >{{ it.label }}({{ it.value }})、</span
        >
      </div>
      <div style="width: 100%">
        <Search
          :searchArr="searchConfiger"
          @submit="onSearch"
          :key="pageData.keyCount"
        >
          <el-button type="primary">指派</el-button>
          <el-button type="primary">导出</el-button>
        </Search>
        <MyTable
          :tableData="pageData.tableData"
          :tableColumn="pageData.tableColumn"
          :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger"
          :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseData"
        >
          <!-- 操作 -->
          <template #controls="{ row }">
            <el-button size="small">查看档案</el-button>
            <el-button size="small">编辑</el-button>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </MyTable>
      </div>
      <div class="flex mt10 just-center">
        <el-button size="large" type="primary">保存</el-button>
        <el-button size="large" type="primary">采纳</el-button>
        <el-button size="large" type="primary">处置</el-button>
        <el-button size="large">取消</el-button>
      </div>
    </div>
  </div>
  <!-- 新增 -->
  <AddForm ref="detailDiloag" ></AddForm>
</template>

<script setup>
import AddForm from "./components/addForm.vue";
import Search from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref, reactive } from "vue";
const detailDiloag = ref();
const list = reactive({
  leftCoutn: [
    { label: "总数", value: 100 },
    { label: "下发总数", value: 100 },
    { label: "已处置数", value: 10 },
    { label: "收藏", value: 100 },
    { label: "已反馈数量", value: 100 },
    { label: "未反馈数量", value: 100 },
    { label: "未处置数量", value: 100 }
  ],
  countList: [
    { label: "全部", value: 100 },
    { label: "已稳控", value: 100 },
    { label: "处置中", value: 10 },
    { label: "非本地人", value: 100 },
    { label: "未开始", value: 100 },
    { label: "其他人", value: 100 }
  ]
});

const searchQuery = ref(""); // 搜索关键词
const searchConfiger = ref([
  {
    label: "姓名",
    prop: "name",
    placeholder: "请输入姓名",
    showType: "input"
  },
  {
    label: "身份证号",
    prop: "sfzh",
    placeholder: "请输入身份证号",
    showType: "input"
  }
]);

const pageData = reactive({
  tableData: [
    {
      name: "张三",
      xb: "男",
      sfzh: "510154545454544454",
      sjh: "12345678900",
      jcbm: "xx公安局",
      zt: "已稳控"
    },
    {
      name: "张三",
      xb: "男",
      sfzh: "510154545454544454",
      sjh: "12345678900",
      jcbm: "xx公安局",
      zt: "已稳控"
    },
    {
      name: "张三",
      xb: "男",
      sfzh: "510154545454544454",
      sjh: "12345678900",
      jcbm: "xx公安局",
      zt: "已稳控"
    },
    {
      name: "张三",
      xb: "男",
      sfzh: "510154545454544454",
      sjh: "12345678900",
      jcbm: "xx公安局",
      zt: "已稳控"
    },
    {
      name: "张三",
      xb: "男",
      sfzh: "510154545454544454",
      sjh: "12345678900",
      jcbm: "xx公安局",
      zt: "已稳控"
    }
  ], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false
  },
  tableHeight: 300,
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 250, //操作栏宽度
  tableColumn: [
    { label: "姓名", prop: "name" },
    { label: "性别", prop: "xb" },
    { label: "身份证号", prop: "sfzh" },
    { label: "手机号", prop: "sjh" },
    { label: "检查部门", prop: "jcbm" },
    { label: "状态", prop: "zt" }
  ]
});

// 选中的人员
const selectedPerson = ref(null);

// 搜所
const onSearch = (data) => {
  console.log(data);
};
// 模拟人员列表数据
const personList = ref([
  {
    number: "12345854",
    title: "*****线索",
    source: "*****",
    personCount: "涉及人员数量",
    location: "指向地点",
    tag: "待签收",
    status: "处置"
  },
  {
    number: "12345854",
    title: "*****线索",
    source: "*****",
    personCount: "涉及人员数量",
    location: "指向地点",
    status: "处置",
    tag: "待签收",
  }
  // 更多人员数据...
]);

// 模拟相关人员数据
const relatedPersons = ref([
  {
    name: "李四",
    relation: "朋友",
    phone: "13900139000",
    status: "正常"
  }
  // 更多相关人员数据...
]);

// 详情
const addEdit = (type, row) => {
  detailDiloag.value.init(type, row);
};

// 选择人员
const selectPerson = (person) => {
  selectedPerson.value = person;
};
</script>

<style lang="scss" scoped>
.intelligence-management {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  .left-panel {
    width: 300px;
    border-right: 1px solid #dcdfe6;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    float: left;

    .search-box {
      padding: 16px;
      border-bottom: 1px solid #dcdfe6;
    }

    .person-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      .clue-item {
        background: #f5f7fa;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 10px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .clue-status {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          color: #fff;
          background: #409eff;
          padding: 2px 8px;
          border-radius: 2px;
          font-size: 12px;
        }
        .clue-tag {
          position: absolute;
          top: 1px;
          left: -27px;
          background: #f56c6c;
          color: #fff;
          padding: 10px 30px;
          border-radius: 2px;
          font-size: 12px;
          transform: rotate(-38deg);
        }

        .clue-header {
          color: #333;
          font-size: 14px;
        }

        .clue-info {
          font-size: 12px;
          color: #666;
          line-height: 1.8;
        }
        

        &:hover {
          background: #e6f1fc;
        }
      }
    }
  }

  .right-panel {
    width: calc(100% - 310px);
    height: 100%;
    float: left;
    margin-left: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    overflow-y: auto;
    .title {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 78px;
        height: 4px;
        background: linear-gradient(
          90deg,
          #3596f9 0%,
          rgba(53, 150, 249, 0) 100%
        );
        border-radius: 4px 4px 4px 4px;
      }
    }
  }

  ::v-deep .el-tabs__nav-wrap::after {
    background: #e9e9e9;
    width: 58%;
  }
}
</style>