<template>
  <div class="analysis">
    <div class="head">
      <div class="title">爆料中心</div>
      <div class="searchRow">
        <div class="searchCol searchTitle">时间:</div>
        <div class="searchCol">
          <el-date-picker
            v-model="date"
            @change="change"
            type="daterange"
            :clearable="false"
            value-format="YYYY-MM-DD"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>
      <div class="searchRow">
        <div class="searchCol searchTitle">搜索:</div>
        <div class="searchCol">
          <el-input v-model="searchText" placeholder="搜索文章">
            <template #suffix>
              <el-icon @click="search"><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="body">
      <analysisList ref="analysisListEle" @setTotal="setTotal" />
      <el-pagination
        @current-change="changePage"
        background
        layout="total, prev, pager, next"
        :total="totalPage"
      />
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, onMounted } from 'vue';

import analysisList from './components/reporting_list.vue';

const analysisListEle = ref();
const searchText = ref('');
const date = ref([dayjs(Date.now() - 7*86400000).format('YYYY-MM-DD') + ' 00:00:00', dayjs().format('YYYY-MM-DD') + ' 23:59:59']);

const pageSize = 10;
let page = 1;
let totalPage = ref(0);

onMounted(() => {
  getList();
});

const getList = () => {
  if (page != 1 && page > Math.ceil(totalPage.value / pageSize)) return;
  const search = {
    title: searchText.value,
    page: page++,
    size: pageSize,
  };
  // 时间区间
  if (date.value[0])
    search.start = dayjs(date.value[0]).format('YYYY-MM-DD') + ' 00:00:00';
  if (date.value[1])
    search.end = dayjs(date.value[1]).format('YYYY-MM-DD') + ' 23:59:59';
  analysisListEle.value.getlist(search);
};

const change = () => {
  date.value = [date.value[0] + ' 00:00:00', date.value[1] + ' 23:59:59'];
  page = 1;
  getList();
};

const search = () => {
  page = 1;
  getList();
};

const changePage = p => {
  page = p;
  getList();
};

const setTotal = total => {
  totalPage.value = total;
};

</script>

<style scoped>
.analysis {
  height: 100%;
  /* min-width: 1305px; */
  position: relative;
}
.analysis .head,
.analysis .body {
  margin: 0 1em;
  min-width: 855px;
}

.analysis .body {
  border: 1px solid #f3f3f3;
  margin: 1em;
}

.title {
  font-size: 16px;
  font-weight: 600;
  height: 49px;
  line-height: 49px;
  padding-left: 8px;
  border-bottom: 1px solid #f5f5f5;
}

.searchRow {
  margin: 0.5em 0;
}

.searchCol {
  display: inline-block;
  margin: 0 0.5em;
  padding: 0 0.5em;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
.searchCol:hover {
  color: rgb(64, 158, 255);
}

.searchActive {
  font-weight: 600;
  color: rgb(64, 158, 255);
  border-radius: 5px;
  background-color: rgba(64, 158, 255, 0.1);
  border-bottom: none;
}

.searchRow .searchTitle {
  color: #b9c0d3;
}

.body .el-checkbox {
  margin-right: 15px;
}

.source {
  color: #22ac38;
}

.upload {
  position: absolute;
  right: 25px;
  bottom: 25px;
  background-color: #e9e9e990;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
}
</style>
