<template>
  <div class="module-content">
    <h4>内容</h4>
    <ul class="data-list">
      <li>
        <p>今日老师发布内容数</p>
        <h5>{{ currentData.advisorGroupContent }}</h5>
      </li>
      <li>
        <p>今日助教发布内容数</p>
        <h5>{{ currentData.assistantGroupContent }}</h5>
      </li>
      <li>
        <p>今日用户互动内容数</p>
        <h5>{{ currentData.customerGroupContent }}</h5>
      </li>
      <li>
        <p>今日老师私聊内容数</p>
        <h5>{{ currentData.advisorPrivateContent }}</h5>
      </li>
      <li>
        <p>今日助教私聊内容数</p>
        <h5>{{ currentData.assistantPrivateContent }}</h5>
      </li>
      <li>
        <p>今日用户私聊内容数</p>
        <h5>{{ currentData.customerPrivateContent }}</h5>
      </li>
    </ul>
    <div class="chart-header">
      <h5>内容趋势</h5>
      <el-form :inline="true" size="mini" :model="formInline" class="my-form">
        <el-form-item label="" prop="timeType">
          <el-select
            v-model="timeType"
            class="filter-item"
            style="width: 100px"
          >
            <el-option
              v-for="item in [
                { label: '总数据', id: 1 },
                { label: '年', id: 2 },
                { label: '月', id: 3 },
                { label: '周', id: 4 },
                { label: '日', id: 5 }
              ]"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="username">
          <el-date-picker
            v-if="timeType === 2"
            v-model="time"
            type="year"
            placeholder="选择年"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100px"
          />
          <el-date-picker
            v-else-if="timeType === 3"
            v-model="time"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100px"
          />
          <el-date-picker
            v-else-if="timeType === 4"
            v-model="time"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择周"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100px"
            :picker-options="{ firstDayOfWeek: 1 }"
          />
          <el-date-picker
            v-else-if="timeType === 5"
            v-model="time"
            type="date"
            placeholder="选择日期"
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="toExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <LineChart ref="lineChartRef" :option="echartOption" />
  </div>
</template>
<script>
import LineChart from "./LineChart";
import { getCircleStatistics } from "@/api/circle";
import dayjs from "dayjs";
export default {
  components: { LineChart },
  props: {
    currentData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formInline: {
        groupId: this.$route.query.id,
        startDate: "",
        endDate: ""
      },
      timeType: 1,
      time: "",
      dataList: [],
      echartOption: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [
            "老师发布内容数",
            "助教发布内容数",
            "用户互动内容数",
            "老师私聊内容数",
            "助教私聊内容数",
            "用户私聊内容数"
          ]
        },
        grid: {
          top: "40px",
          left: "20px",
          right: "20px",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: []
      }
    };
  },
  watch: {
    timeType(value) {
      this.time = this.formInline.startDate = this.formInline.endDate = "";
    },
    time(value) {
      this.formInline.startDate = value;
      if (value === null || value === "") {
        return (this.formInline.endDate = null);
      }
      if (this.formInline.startDate !== null) {
        this.formInline.startDate = dayjs(this.formInline.startDate).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      if (this.timeType == 2) {
        this.formInline.endDate = dayjs(value)
          .add(1, "year")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.timeType == 3) {
        this.formInline.endDate = dayjs(value)
          .add(1, "month")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.timeType == 4) {
        this.formInline.startDate = dayjs(value)
          .subtract(1, "day")
          .format("YYYY-MM-DD HH:mm:ss");
        this.formInline.endDate = dayjs(value)
          .add(6, "day")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.timeType == 5) {
        this.formInline.endDate = dayjs(value)
          .add(1, "day")
          .format("YYYY-MM-DD HH:mm:ss");
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const ret = await getCircleStatistics(this.formInline);
      if (ret && ret.data) {
        this.dataList = ret.data;
        const xAxisData = [];
        const seriesData = {
          advisorGroupContent: {
            name: "老师发布内容数",
            type: "line",
            stack: "Total",
            data: []
          },
          assistantGroupContent: {
            name: "助教发布内容数",
            type: "line",
            stack: "Total",
            data: []
          },
          customerGroupContent: {
            name: "用户互动内容数",
            type: "line",
            stack: "Total",
            data: []
          },
          advisorPrivateContent: {
            name: "老师私聊内容数",
            type: "line",
            stack: "Total",
            data: []
          },
          assistantPrivateContent: {
            name: "助教私聊内容数",
            type: "line",
            stack: "Total",
            data: []
          },
          customerPrivateContent: {
            name: "用户私聊内容数",
            type: "line",
            stack: "Total",
            data: []
          }
        };
        this.dataList.forEach(item => {
          for (const key in seriesData) {
            seriesData[key].data.push(item[key]);
          }
          xAxisData.push(item.date);
        });
        this.echartOption.xAxis.data = [];
        this.echartOption.xAxis.data = xAxisData;
        this.echartOption.series = [];
        for (const key in seriesData) {
          this.echartOption.series.push(seriesData[key]);
        }
        this.$nextTick(() => {
          this.$refs.lineChartRef.drawChart();
        });
      }
    },
    onSubmit() {
      this.getData();
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j];
        })
      );
    },
    async toExport() {
      this.downloadLoading = true;
      const { data, code, message } = await getCircleStatistics(
        this.formInline
      );
      if (code === 0) {
        import("@/utils/export2Excel").then(excel => {
          const tHeader = [
            "日期",
            "老师发布内容数",
            "助教发布内容数",
            "用户互动内容数",
            "老师私聊内容数",
            "助教私聊内容数",
            "用户私聊内容数"
          ];
          const filterVal = [
            "date",
            "advisorGroupContent",
            "assistantGroupContent",
            "customerGroupContent",
            "advisorPrivateContent",
            "assistantPrivateContent",
            "customerPrivateContent"
          ];
          const excelData = this.formatJson(filterVal, data);
          excel.export_json_to_excel({
            header: tHeader,
            data: excelData,
            filename: "圈子内容统计"
          });
          console.log("list=>", data);
        });
      } else {
        this.$message.error(message);
      }
      this.downloadLoading = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.my-form {
  ::v-deep .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
.module-content {
  margin-bottom: 20px;
  h4 {
    margin: 0;
    font-size: 18px;
  }
}
.data-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 20px;
  li {
    width: 250px;
    margin-right: 20px;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px;
    p {
      margin: 0;
      font-size: 16px;
      line-height: 30px;
    }
    h5 {
      margin: 0;
      padding: 0;
      font-size: 24px;
      line-height: 40px;
    }
  }
}
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  h5 {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}
</style>
