<template>
  <div>
    <el-row style="margin-bottom: 20px">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix el-card__header"
          style="display: flex"
        >
          <label style="text-align: start; margin-right: 10px; padding-top: 8px"
            >时间<span style="font-size: 11px; margin-left: 2px">:</span></label
          >
          <el-row>
            <!-- <el-button size="mini" type="primary" plain @click="dayClick"
              >日</el-button
            > -->
            <el-button size="mini" type="primary" plain @click="sevenDaysClick"
              >周</el-button
            >
            <el-button size="mini" type="primary" plain @click="thirtyDaysClick"
              >月</el-button
            >
            <el-button
              size="mini"
              type="primary"
              plain
              @click="selfDefinedClick"
              >自定义</el-button
            >
            <span style="margin: 0 20px">
              <el-date-picker
                :disabled="selfDefined"
                v-model="startDate"
                type="date"
                placeholder="起始时间"
              >
              </el-date-picker>
              <span>至</span>
              <el-date-picker
                :disabled="selfDefined"
                v-model="endDate"
                type="date"
                placeholder="结束时间"
              >
              </el-date-picker>
            </span>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchByDate"
              :disabled="selfDefined"
              >查询</el-button
            >
            <el-button type="primary" icon="el-icon-info" @click="jump()"
              >舆情监控平台</el-button
            >
          </el-row>
        </div>
        <el-row style="height: 400px; margin-bottom: 20px">
          <el-col :span="12" style="height: 100%">
            <fw-card title="舆情统计" class="card_title">
              <el-row style="height: 320px">
                <el-col :span="24">
                  <FwPieChart
                    :chartConfig="sentimentTotalConfig"
                    height="320px"
                  >
                  </FwPieChart>
                </el-col>
              </el-row>
            </fw-card>
          </el-col>
          <el-col :span="12" style="height: 100%; padding-left: 20px">
            <fw-card title="来源类型" class="card_title">
              <el-row style="height: 320px">
                <FwPieChart
                  :chartConfig="sentimentDistributionConfig"
                  height="320px"
                >
                </FwPieChart>
              </el-row>
            </fw-card>
          </el-col>
        </el-row>
        <el-row style="height: 500px; margin-bottom: 70px">
          <el-col :span="24" style="height: 100%">
            <fw-card title="专题发展趋势" class="card_title">
              <el-row style="height: 450px">
                <FwLineChart
                  :chartConfig="tendency"
                  height="450px"
                ></FwLineChart>
              </el-row>
            </fw-card>
          </el-col>
        </el-row>
        <el-row style="height: 500px; margin-bottom: 20px">
          <el-col :span="24" style="height: 100%">
            <fw-card title="热门网站来源" class="card_title">
              <el-row>
                <FwBarChart
                  :chartConfig="sentimentDistributionBarConfig"
                  height="450px"
                ></FwBarChart>
              </el-row>
            </fw-card>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { SENTIMENT_DISTRIBUTION } from "./config/sentimentDistribution";

import { SENTIMENT_TOTAL } from "./config/sentimentTotal";

import { SENTIMENT_DISTRIBUTION_BAR } from "./config/sentimentDistributionBar";

import { TENDENCY } from "./config/tendency";

import { getDataByDate } from "../../api/pubsentiment/sentimentTotal";
import { getEveryData } from "../../api/pubsentiment/sentimentTotal";

import { getDistributionByDate } from "../../api/pubsentiment/sentimentDistribution";

import { getSentimentWebsiteByDate } from "../../api/pubsentiment/sentimentWebsite";

import { gtoYuqing } from "../../api/pubsentiment/toYuqing"

export default {
  name: "sentiment",
  components: {},
  data() {
    return {
      startDate: "",
      endDate: "",
      oneDay: 1,
      sevenDays: 7,
      thirtyDays: 30,
      selfDefined: true,
      sentimentDistributionConfig: SENTIMENT_DISTRIBUTION,
      sentimentDistributionBarConfig: SENTIMENT_DISTRIBUTION_BAR,
      sentimentTotalConfig: SENTIMENT_TOTAL,
      tendency: TENDENCY,
      params: {
        startDate: "",
        endDate: "",
      },
    };
  },
  mounted() {
    this.sevenDaysClick();
  },
  computed: {
    defaultDate() {
      this.params = {
        startDate: this.formatTime(new Date()),
        endDate: this.formatTime(new Date()),
      };
    },
  },
  methods: {
    //格式化日期
    formatTime(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    //计算当前日期前n天
    DateUtil(date) {
      var num = date;
      let n = num;
      let d = new Date();
      let year = d.getFullYear();
      let mon = d.getMonth() + 1;
      let day = d.getDate();
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() - n);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      let s =
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day);
      return s;
    },
    // //点击日
    // dayClick() {
    //   this.selfDefined = true;
    //   this.params = {
    //     startDate: this.formatTime(new Date()),
    //     endDate: this.formatTime(new Date()),
    //   };
    //   console.log(this.params);
    //   this.querySentimentTotal();
    //   this.querySentimentDistribution()
    //   this.querySentimentWebsite()
    // },
    //点击周
    sevenDaysClick() {
      this.selfDefined = true;
      this.params = {
        startDate: this.DateUtil(6),
        endDate: this.formatTime(new Date()),
      };
      console.log(this.params);
      this.querySentimentTotal();
      this.querySentimentDistribution();
      this.querySentimentWebsite();
      this.querySentimentTendency();
    },
    //点击月
    thirtyDaysClick() {
      this.selfDefined = true;
      this.params = {
        startDate: this.DateUtil(30),
        endDate: this.formatTime(new Date()),
      };
      console.log(this.params);
      this.querySentimentTotal();
      this.querySentimentDistribution();
      this.querySentimentWebsite();
      this.querySentimentTendency();
    },
    //点击自定义
    selfDefinedClick() {
      if (!this.selfDefined) {
        this.selfDefined = true;
      } else {
        this.selfDefined = false;
      }
    },
    //自定义查询
    searchByDate() {
      if (this.startDate !== "" && this.endDate !== "") {
        if (this.endDate < this.startDate) {
          this.endDate = this.startDate;
          this.params = {
            startDate: this.formatTime(this.startDate),
            endDate: this.formatTime(this.endDate),
          };
        } else {
          this.params = {
            startDate: this.formatTime(this.startDate),
            endDate: this.formatTime(this.endDate),
          };
        }
      }
      console.log(this.params);
      this.querySentimentTotal();
      this.querySentimentDistribution();
      this.querySentimentWebsite();
      this.querySentimentTendency();
    },
    querySentimentTotal() {
      //舆情统计
      this.sentimentTotalConfig.legend.data = [];
      this.sentimentTotalConfig.series[0].data = [];
      getDataByDate(this.params).then((res) => {
        console.log(res);
        if (res != null && res.length) {
          for (let i = 0; i < res.length; i++) {
            this.sentimentTotalConfig.legend.data.push(res[i].name);
            this.sentimentTotalConfig.series[0].data.push({
              value: res[i].value ? res[i].value : 0,
              name: res[i].name,
            });
          }
        }
      });
    },
    querySentimentTendency() {
      this.tendency.xAxis[0].data = [];
      this.tendency.series[0].data = [];
      this.tendency.series[1].data = [];
      this.tendency.series[2].data = [];
      getEveryData(this.params).then((res) => {
        console.log(res);
        if (res != null && res.length) {
          for (let i = 0; i < res.length; i++) {
            this.tendency.xAxis[0].data.push(res[i].pubDate);
            this.tendency.series[0].data.push(res[i].positiveCount);
            this.tendency.series[1].data.push(res[i].negativeCount);
            this.tendency.series[2].data.push(res[i].neutralCount);
          }
        }
      });
    },
    querySentimentDistribution() {
      //来源类型统计
      this.sentimentDistributionConfig.legend.data = [];
      this.sentimentDistributionConfig.series[0].data = [];

      getDistributionByDate(this.params).then((res) => {
        console.log(res);
        if (res != null && res.length) {
          for (let i = 0; i < res.length; i++) {
            //饼图
            this.sentimentDistributionConfig.legend.data.push(res[i].name);
            this.sentimentDistributionConfig.series[0].data.push({
              value: res[i].value ? res[i].value : 0,
              name: res[i].name,
            });
          }
        }
      });
    },
    //查询热门网站
    querySentimentWebsite() {
      this.sentimentDistributionBarConfig.xAxis[0].data = [];
      this.sentimentDistributionBarConfig.series[0].data = [];
      getSentimentWebsiteByDate(this.params)
        .then((result) => {
          console.log(result);
          if (result != null && result.length) {
            for (let i = 0; i < result.length; i++) {
              this.sentimentDistributionBarConfig.xAxis[0].data.push(
                result[i].name
              );
              this.sentimentDistributionBarConfig.series[0].data.push(
                result[i].value
              );
            }
          }
        })
        .catch((err) => {});
    },
    jump() {
      
        gtoYuqing().then(res=>{
          if (res!=null) {
            window.open(res)
          }
        })

    },
  },
};
</script>
<style scoped="scoped">
.el-card__header {
  padding: 20px 20px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f3f3fb;
}
.card_title {
  text-align: left;
}
</style>
