<template>
  <div>
    <div class="titleBox">
      <PageTitle title="情报评一评" />
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch" />
    </div>
    <!-- 表格 -->
     <div class="tabBox tabListBox" >
      <div class="temperatureBox" ref="temperatureBox">
          <div class="flex just-between temperature">
            <div :class="{'active':pitchOn==1}" @click="handleAdd(1)">按热度</div>
            <div>|</div>
            <div :class="{'active':pitchOn==2}" @click="handleAdd(2)">按时间</div>
          </div>
        </div>
      <div class="just-between boxData" :style="{height:tabHeight+'px'}">
        <ItemXs :dict="{D_GS_XS_LX}" :item="item" v-for="(item, index) in pageData.tableData" :key="index" style="margin-bottom: 10px;" @click="handleView(item)"/>
      </div>

    </div>
  </div>
  <AddForm ref="addForm" :dict="{D_GS_XS_LX}"/>
</template>

<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Search from "@/components/aboutTable/Search.vue";
import AddForm from './components/a/addForm.vue'
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import ItemXs from './components/itemXs/itemXs.vue'
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const { D_GS_XS_LX } = proxy.$dict("D_GS_XS_LX"); //获取字典数据
const searchConfiger = reactive([
  {
    label: "情报名称",
    showType: "input",
    prop: "xsMc",
    placeholder: "请输入情报名称",
  },
  {
    showType: "select",
    prop: "xlLx",
    options: D_GS_XS_LX,
    placeholder: "请选择情报类型",
    label: "情报类型"
  },
])


onMounted(() => {
  tabHeightFn()
  selectPagePbql()
})
const tabHeight = ref(0)
const temperatureBox=ref()
// 表格高度计算
const tabHeightFn = () => {
  tabHeight.value = window.innerHeight - 370 - temperatureBox.value.offsetHeight;
  window.onresize = function () {
    tabHeightFn();
  };
};
const pageData = reactive({
  parameter: {
    pageCurrent: 1,
    pageSize: 10,
    sort:"fbsj"
  },
  total: 0,
  loading: false,
  tableData: []
})
const onSearch = (val) => {
  pageData.parameter={...val, ...pageData.parameter}
  pageData.pageCurrent = 1;
  selectPagePbql()
}

const selectPagePbql = () => {
  qcckGet(pageData.parameter, "/mosty-gsxt/qbcj/selectPagePbql").then((res) => {
    pageData.tableData =pageData.parameter.pageCurrent==1? res.records:pageData.tableData.concat(res.records || []);
    pageData.total = res.total;
    pageData.loading = false;
  }).catch((err) => {
    console.log(err);
   }).finally(()=>{
    pageData.loading = false;
  })
}
const pitchOn = ref(1)
//查看新闻
const addForm = ref()
const handleView = (row) => {
  addForm.value.init(row.id)
}
const handleAdd = (val) => {
  pageData.parameter.sort = val == 1 ? "fbsj" : "rd"
  pageData.parameter.pageCurrent = 1;
  pitchOn.value = val
  selectPagePbql()
}
</script>

<style lang="scss" scoped>
.boxData{
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}

.active{
  color: #12a0ff;
}
.tabListBox{
  padding: 10px 15px;
}
.temperatureBox{
  margin: 10px 0;
  width: 100%;
   border-bottom: 1px solid #eee;
  .temperature{
    cursor: pointer;
    padding: 10px;color: #000;width: 140px;
  }
}
</style>

