<template>
  <div class="release">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/all_aedia/overview' }"
        >全媒体平台</el-breadcrumb-item
      >
      <el-breadcrumb-item>发稿量排行</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      size="small"
      :inline="true"
      :model="search"
      class="demo-form-inline"
    >
      <el-form-item label="日期">
        <el-date-picker
          v-model="search.date"
          type="daterange"
          @change="dateChange"
          range-separator="-"
          value-format="YYYYMMDD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
    </el-form>
    <el-row>
      <el-col style="padding: 0 0.5em" :span="8">
        <el-table
          border
          :data="tableData.center"
          highlight-current-row
          stripe
          :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
          style="width: 100%"
          @row-click="row => rowClick(row, 1)"
        >
          <el-table-column
            align="center"
            header-align="center"
            prop="name"
            label="中心"
          />
          <el-table-column
            align="center"
            header-align="center"
            prop="cnt"
            label="发稿量"
          >
            <template #default="scope">
              <countTo
                :startVal="0"
                :endVal="scope.row.cnt || 0"
                :duration="1000"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="padding: 0 0.5em" :span="8">
        <el-table
          border
          :data="tableData.depart"
          highlight-current-row
          :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
          stripe
          style="width: 100%"
          @row-click="row => rowClick(row, 2)"
        >
          <el-table-column
            align="center"
            header-align="center"
            prop="name"
            label="部门"
          />
          <el-table-column
            align="center"
            header-align="center"
            prop="cnt"
            label="发稿量"
          >
            <template #default="scope">
              <countTo
                :startVal="0"
                :endVal="scope.row.cnt || 0"
                :duration="1000"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="padding: 0 0.5em" :span="8">
        <el-table :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }" highlight-current-row border :data="tableData.user" stripe style="width: 100%">
          <el-table-column
            align="center"
            header-align="center"
            prop="name"
            label="人员"
          />
          <el-table-column
            align="center"
            header-align="center"
            prop="cnt"
            label="发稿量"
          >
            <template #default="scope">
              <countTo
                :startVal="0"
                :endVal="scope.row.cnt || 0"
                :duration="1000"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 发稿量排行
import { getArticleCnt } from '@/api/newMdeiaApi';
import countTo from '@/components/counto/vue-countTo.vue';
import dayjs from 'dayjs';
const nT = dayjs(Date.now() - 86400000);
export default {
  name: 'release',
  data() {
    return {
      search: {
        date: [nT.format('YYYY-MM-DD'), nT.format('YYYY-MM-DD')],
        parent_id: {
          center: '',
          depart: '',
          user: '',
        },
      },
      tableData: {
        center: [],
        depart: [],
        user: [],
      },
      type_key: ['center', 'depart', 'user'],
    };
  },
  mounted() {
    this.submit(0);
  },
  methods: {
    dateChange() {
      this.submit(0);
    },
    async submit(type) {
      const st = [
        this.search.date[0].replace(/-/g, ''),
        this.search.date[1].replace(/-/g, ''),
      ].join('-');
      for (let i = type; i < this.type_key.length; i++) {
        const t = this.type_key[i];
        console.log(t);
        const data = new FormData();
        data.append('type', t);
        data.append('date_range', st);
        this.search.parent_id[t] &&
          data.append('parent_id', this.search.parent_id[t]);
        const res = await getArticleCnt(data);
        this.tableData[t] = res || [];
        if (i < this.type_key.length - 1) {
          this.search.parent_id[this.type_key[i + 1]] = res[0].id;
        }
      }
    },
    rowClick(row, type) {
      this.search.parent_id[this.type_key[type]] = row.id;
      this.submit(type);
    },
  },
  components: {
    countTo,
  },
};
</script>
<style lang="scss">
.release {
  width: 100%;
  height: 100vh;
  padding: 1em;
}
</style>
