<template>
  <div class="app-container">
    <div class="part">
      <div class="content">
        <div class="overview-layout">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="out-border">
                <div class="layout-title">今日任务</div>
                <div style="padding: 40px">
                  <el-row>
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ todayTasks.newAddClew }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ todayTasks.addUserNum }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ todayTasks.chatUserNum }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ todayTasks.unChatUserNum }}</el-col
                    >
                  </el-row>
                  <el-row class="font-medium">
                    <el-col :span="6" class="overview-item-title"
                      ><span @click="goNewClew">待沟通线索</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title"
                      ><span @click="goNewStu">新增学员</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title">
                      <span @click="goChatStu">已沟通学员</span>
                    </el-col>
                    <el-col :span="6" class="overview-item-title">
                      <span @click="goUnChatStu">待沟通学员</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="part">
      <div class="content">
        <div class="overview-layout">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="out-border">
                <div class="layout-title">系统公告</div>
                <div style="padding: 40px">
                  <div class="table-container notice">
                    <el-table
                      ref="adminTable"
                      :data="notice.list"
                      style="width: 100%"
                    >
                      <el-table-column
                        label="公告时间"
                        width="160"
                        align="center"
                      >
                        <template slot-scope="scope">{{
                          scope.row.noticeTime | formatDateTime
                        }}</template>
                      </el-table-column>
                      <el-table-column label="公告内容" align="center">
                        <template slot-scope="scope">{{
                          scope.row.noticeContent
                        }}</template>
                      </el-table-column>
                      <!-- <el-table-column
                        label="操作人员"
                        width="100"
                        align="center"
                      >
                        <template slot-scope="scope">{{
                          scope.row.operator
                        }}</template>
                      </el-table-column> -->
                    </el-table>

                    <div class="pagination-container">
                      <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="total,prev, pager, next,jumper"
                        :current-page.sync="notice.pageNum"
                        :page-size="notice.pageSize"
                        :total="notice.total"
                      >
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="part">
      <!-- <div class="title">业绩简报</div> -->
      <div class="content">
        <div class="overview-layout">
          <div class="out-border">
            <div class="layout-title">业绩简报</div>
            <div style="padding: 40px">
              <div class="table-container notice">
                <!-- {{ paymentTime }} -->
                <el-date-picker
                  v-model="paymentTime"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>

                <el-table ref="123213" :data="kpiList" style="width: 100%">
                  <el-table-column label="报名人数" width="160" align="center">
                    <!-- <template slot-scope="scope">{{
                      scope.row.noticeTime | formatDateTime
                    }}</template> -->
                    <template slot-scope="scope">{{ scope.row.num }}</template>
                  </el-table-column>
                  <el-table-column label="成交金额" align="center">
                    <template slot-scope="scope">{{
                      scope.row.money
                    }}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="part">
      <!-- <div class="title">销售渠道占比</div> -->
      <div class="content">
        <div class="overview-layout">
          <div class="out-border">
            <div class="layout-title">销售渠道占比</div>
            <div style="padding: 40px">
              <div class="table-container notice">
                <!-- {{ channeltTime }} -->
                <el-date-picker
                  v-model="channeltTime"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </div>

            <!-- <ve-pie :data="chartDataPie" ref="chartpie"></ve-pie> -->
            <!-- <ve-pie :data="chartData"></ve-pie> -->
            <div id="main"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTodayTasks, getNotice, KPI, channel } from "@/api/cso";
import { formatDate } from "@/utils/date";
import moment from "moment";
import * as echarts from "echarts";

export default {
  name: "kfh",
  data() {
    return {
      listQuery: {
        starTime: "",
        endTime: ""
      },
      listQuery2: {
        starTime: "",
        endTime: ""
      },
      todayTasks: "",
      notice: {
        pageNum: 1,
        pageSize: 10
      },
      kpiList: [{}],
      paymentTime: [],
      channeltTime: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      chartData: {
        columns: ["channel", "num"],
        rows: [
          { channel: "转介", num: 200 },
          { channel: "活动", num: 200 },
          { channel: "谷歌", num: 200 }
        ]
      },
      option: {
        //   title: {
        //     text: "Referer of a Website",
        //     subtext: "Fake Data",
        //     left: "center"
        //   },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" }
              //   { value: 735, name: "Direct" },
              //   { value: 580, name: "Email" },
              //   { value: 484, name: "Union Ads" },
              //   { value: 300, name: "Video Ads" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  created() {
    getTodayTasks().then(res => {
      // console.log(res);
      this.todayTasks = res.data;
      console.log(this.todayTasks, "this.todayTasks");
    });

    this.getAdminNotice();
    // this.getKPI();watch请求了一次，这里就不请求了
  },
  methods: {
    // handleSizeChange(val) {
    //   this.notice.pageNum = 1;
    //   this.notice.pageSize = val;
    //   this.getNotice();
    // },
    getAdminNotice() {
      getNotice({
        pageNum: this.notice.pageNum,
        pageSize: this.notice.pageSize
      }).then(res => {
        this.notice = res.data;
        // console.log(this.notice,'this.notice');
      });
    },
    getKPI() {
      KPI(this.listQuery).then(res => {
        console.log(res, "getKPI");
        this.kpiList = [];
        this.kpiList.push(res.data);
        // 用错ui组件了，懒得改
        this.$forceUpdate();
      });
    },

    handleCurrentChange(val) {
      this.notice.pageNum = val;
      // console.log(this.notice.pageNum);
      this.getAdminNotice();
    },
    goNewClew() {
      // console.log("goNewClew");
      this.$router.push({
        path: "/dailyTask/newClew",
        // product-add
        query: {}
      });
    },
    goNewStu() {
      // console.log("goNewClew");
      this.$router.push({
        path: "/dailyTask/newStu",
        // product-add
        query: {}
      });
    },
    goChatStu() {
      // console.log("goNewClew");
      this.$router.push({
        path: "/dailyTask/chatStu",
        // product-add
        query: {}
      });
    },
    goUnChatStu() {
      // console.log("goNewClew");
      this.$router.push({
        path: "/dailyTask/unchatStu",
        // product-add
        query: {}
      });
    },
    getChannel() {
      channel(this.listQuery2).then(res => {
        let arr = [];
        res.data.forEach(item => {
          if (item.channel == "1") {
            item.channel = "主动推荐引流";
          } else if (item.channel == "2") {
            item.channel = "客服自主添加";
          } else if (item.channel == "3") {
            item.channel = "搜索引擎引流";
          } else if (item.channel == "4") {
            item.channel = "外部资源推荐";
          } else if (item.channel == "5") {
            item.channel = "自媒体引流";
          } else if (item.channel == "6") {
            item.channel = "地推活动";
          } else {
            item.channel = "未定义渠道";
          }
          let obj = {};
          obj.name = item.channel;
          obj.value = item.num;
          arr.push(obj);
        });

        // console.log(arr, "getChannel");
        // this.chartData.rows = res.data;
        this.option.series[0].data = arr;
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        this.option && myChart.setOption(this.option);
        // console.log(this.option.series[0].data, "this.option.series[0].data");
        this.$forceUpdate();
      });
    }
  },
  mounted() {
    let now = new Date(); // 当前日期
    let nowYear = now.getFullYear(); //当前年
    let nowMonth = now.getMonth(); //当前月 （值为0~11）
    // console.log(new Date(nowYear, nowMonth), "66666");

    // console.log(firstDay, "123");
    // console.log(
    //   moment(new Date(nowYear, nowMonth)).format("YYYY-MM-DD HH:mm:ss"),
    //   "第一天"
    // );
    // console.log(moment().format("YYYY-MM-DD HH:mm:ss"), "现在时间");
    let firstDay = moment(new Date(nowYear, nowMonth)).format(
      "YYYY-MM-DD HH:mm:ss"
    );
    let nowTime = moment().format("YYYY-MM-DD HH:mm:ss");
    // console.log(firstDay, nowTime);

    this.paymentTime = [firstDay, nowTime];
    this.channeltTime = [firstDay, nowTime];
  },
  watch: {
    paymentTime(newValue, oldValue) {
      if (this.paymentTime) {
        [this.listQuery.starTime, this.listQuery.endTime] = this.paymentTime;
      } else {
        this.listQuery.starTime = undefined;
        this.listQuery.endTime = undefined;
      }
      this.getKPI();
    },
    channeltTime(newValue, oldValue) {
      if (this.channeltTime) {
        [this.listQuery2.starTime, this.listQuery2.endTime] = this.channeltTime;
      } else {
        this.listQuery2.starTime = undefined;
        this.listQuery2.endTime = undefined;
      }
      this.getChannel();
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}
.line {
  display: flex;
}
.out-border {
  border: 1px solid #dcdfe6;
}
.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #f2f6fc;
  font-weight: bold;
}
.overview-item-value {
  font-size: 24px;
  text-align: center;
}
.overview-item-title {
  margin-top: 10px;
  text-align: center;
}
.part {
  margin-bottom: 20px;
}
.notice {
  padding-bottom: 30px;
  // padding: 40px;
}
.font-medium {
  span {
    cursor: pointer;
  }
}
#main {
  width: 100%;
  height: 300px;
}
</style>
