<template>
  <div class="statistical-analysis">
    <!-- 左侧树形菜单 -->
    <div class="left-menu">
      <leftList />
    </div>
    <!-- 右侧内容区 -->
    <div class="right-content" v-if="showDetails">
      <div class="btnsBox">
        <div class="headerTitle">{{ title }}类语义分析</div>
      </div>
      <div>
        <SearchTool :dict="{ D_GSXT_FXLB }" :title="title" />
      </div>
      <TableType :dict="{ JQLB, JQLX, JQXL, JQZL, D_GS_XS_LX }" :title="title" />
    </div>
    <div class="right-content details" v-else>
      <ShowDetails :listData="listData" :title="title" />
    </div>
  </div>
  <!-- 详情 -->

</template>

<script setup>
import leftList from './components/leftList.vue';
import SearchTool from './components/searchTool.vue'
import TableType from './components/tableType.vue'
import { getCurrentInstance, onMounted, ref } from 'vue'
import ShowDetails from './components/showDetails.vue';
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const { D_GSXT_FXLB, JQLB, JQLX, JQXL, JQZL, D_GS_XS_LX } = proxy.$dict("D_GSXT_FXLB", "JQLB", "JQLX", "JQXL", "JQZL", "D_GS_XS_LX")
const showDetails = ref(true)
const title = ref('警情')
const listData = ref()
onMounted(() => {
  emitter.on('showDetails', (res) => {
    showDetails.value = res
  })
  emitter.on('showDetailsTitle', (res) => {
    title.value = res
  })
  emitter.on('getlistData', (res) => {
    listData.value = res
  })
})


</script>

<style lang="scss" scoped>
.statistical-analysis {
  width: 100%;
  height: 100%;

  .left-menu {
    float: left;
    width: 280px;
    height: calc(100% - 10px);
    padding: 20px 4px;
    margin-top: 20px;
    border-radius: 4px;
    background-color: #fff;
    border-right: 1px solid #e8e8e8;
    color: #333;
    line-height: 32px;

    ::v-deep .checkBox {
      flex-direction: column;

      .checkall {
        margin: 0;
      }
    }

    ::v-deep .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    ::v-deep .is-checked {
      background: rgb(242, 249, 255);
      margin-bottom: 4px;
    }

    ::v-deep .el-checkbox {
      padding-left: 8px;
      margin-right: 4px;
    }

    .all {
      width: calc(100% - 4px);
    }
  }

  .right-content {
    float: left;
    width: calc(100% - 290px);
    height: 100%;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 4px;
    box-sizing: border-box;

    .btnsBox {
      background: #fff;
      padding: 10px 5px;
      border-radius: 4px;
      margin-bottom: 10px;
    }

    .cntlsit {
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      gap: 22px;
      overflow: hidden;
      overflow-y: auto;
      background: #fff;
      padding: 4px;
      box-sizing: border-box;

      .cntItem {
        width: 300px;
        border: 1px solid #ccc;
        color: #787878;
        border-radius: 4px;
        overflow: hidden;

        .foot {
          text-align: right;
          margin-top: 4px;
          border-top: 1px solid #ccc;
          padding: 4px;
          box-sizing: border-box;
        }
      }

    }
  }

  .details {
    background-color: #fff;
    height: 99%;
  }
}

.headerTitle {
  font-size: 24px;
  padding: 10px;
  font-family: 'verdana';
  color: #000;
  padding-left: 8px;
  position: relative;
}

.headerTitle::after {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  left: 0px;
  width: 4px;
  border-radius: 5px;
  height: 31px;
  background-color: #0386fb
}
</style>
