<template>
  <div>
    <Search :searchArr="searchConfiger" @submit="onSearch" />
  </div>
  <div class="Count-Cnt flex">
    <div class="left">
      <MyTable :tableData="pageData.tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger">
      </MyTable>
    </div>
    <div class="right">
      <BarHatEcharts echartsId="counrtEchars" :data='obj'></BarHatEcharts>
    </div>
  </div>
</template>

<script setup>
import { qcckGet} from "@/api/qcckApi.js"; 
import MyTable from "@/components/aboutTable/MyTable.vue";
import BarHatEcharts from "@/components/echarts/barHatEcharts.vue";
import Search from "@/components/aboutTable/Search.vue";
import { ref, onMounted, reactive } from "vue";
const searchConfiger = ref([
  { label: "时间段", prop: "time", showType: "daterange" },
]);
const obj = ref({
  xDate: [],
  list: []
})
const paramsObj = ref({})
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableHeight: 620,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
    haveControls: false,
    showIndex: false,
    rowKey: 'ssbmdm',
    lazy: false
  },
  controlsWidth: 100, // No controls needed based on prototype
  tableColumn: [
    { label: "", prop: "mc" },
    { label: "跟踪侦察", prop: "xlzsl" },
    { label: "人员线索", prop: "xlrs" },
  ]
});

onMounted(() => {
  getData()
});
const getData = () => {
  qcckGet(paramsObj.value, "/mosty-jbld/rw/getRwtj").then(res => {
    if (res && res.length > 0) {
      pageData.tableColumn = res[0].list.map((el) => {
        return { label: el.zdmc, prop: el.py }
      })
      pageData.tableColumn.unshift({ label: "", prop: "mc" })
      pageData.tableData = res.map((item) => {
        let big = {};
        big.mc = item.ssbm;
        big.ssbmdm = item.ssbmdm;
        item.list.forEach((el) => {
          big[el.py] = el.count
        })
        return big
      })
      obj.value.list = res[0]?.list.map((el) => {
        return { name: el.zdmc, value: [], hatColor: '#087df9', color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'] }
      })
      obj.value.list?.forEach((w) => {
        res.forEach((el) => {
          el.list.forEach((item) => {
            if (w.name == item.zdmc) {
              w.value.push(item.count)
            }
          })
        })
      })
      obj.value.xDate = res.map((el) => el.ssbm)
    }
  })
}
const onSearch = (params) => {
  if (params.time.length > 0) {
    paramsObj.value.kssj = params.time[0]
    paramsObj.value.jssj = params.time[1]
  }
  getData()
};

// 获取统计数据
const getCount = () =>{
  qcckGet({},'/mosty-jbld/rw/getRwtj').then(res=>{
    console.log(res,'============00');
    let arr = res || [];
  })
}


</script>

<style lang="scss" scoped>
.Count-Cnt {
  width: 100%;
  height: calc(100vh - 267px);
  /* Adjust height as needed */
  background: #fff;
  padding: 10px;
  box-sizing: border-box;

  .left {
    width: 500px;
    height: 100%;
  }

  .right {
    flex: 1 0 0;
    margin-left: 10px;
    height: 100%;
    border: 1px solid #e9e9e9;
  }
}
</style>