<template>
  <div class="app-container">
    <!-- <h1>xuefuMasterHome</h1> -->
    <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.newAllocateNum }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ todayTasks.baseInfoUnConfirmNUm }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ todayTasks.chooseCourseUnConfirmNUm }}</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="goNewAllocate">新分配学员</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title"
                      ><span @click="goUnConfirmBase"
                        >基本信息待确认</span
                      ></el-col
                    >
                    <el-col :span="6" class="overview-item-title">
                      <span @click="goSelectCourseUnConfirm"
                        >审课待确认学员</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>
                <div style="padding: 40px">
                  <el-row>
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ lop }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ matchNum }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ outlineNum }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ gpaNum }}</el-col
                    >
                  </el-row>
                  <el-row class="font-medium">
                    <el-col :span="6" class="overview-item-title"
                      ><span>LOP审核通过人数</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title"
                      ><span>匹配教授</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title"
                      ><span>编撰大纲</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title"
                      ><span>成绩录入完成</span></el-col
                    >
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNotice, KPI, todayTask, lop, statistics } from "@/api/cso";
import { formatDate } from "@/utils/date";
import moment from "moment";

export default {
  name: "xfm",
  data() {
    return {
      listQuery: {
        starTime: "",
        endTime: ""
      },
      todayTasks: "",
      notice: {
        pageNum: 1,
        pageSize: 10
      },
      kpiList: [{}],
      paymentTime: [],
      lop: "",
      gpaNum: "",
      matchNum: "",
      outlineNum: "",
      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]);
            }
          }
        ]
      }
    };
  },
  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请求了一次，这里就不请求了

    this.xfTodayTask();
    this.getStatistics();
  },
  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');
      });
    },

    getLop() {
      lop(this.listQuery).then(res => {
        this.lop = res.data;
        // console.log(this.lop, "this.lop");
        this.$forceUpdate();
      });
    },

    handleCurrentChange(val) {
      this.notice.pageNum = val;
      // console.log(this.notice.pageNum);
      this.getAdminNotice();
    },
    goNewAllocate() {
      this.$router.push({
        path: "/dailyTask/newAllocate",
        // product-add
        query: {}
      });
    },
    goUnConfirmBase() {
      this.$router.push({
        path: "/dailyTask/unConfirmBase",
        // product-add
        query: {}
      });
    },
    goSelectCourseUnConfirm() {
      this.$router.push({
        path: "/dailyTask/selectCourseUnConfirm",
        // product-add
        query: {}
      });
    },
    goNewStu() {
      this.$router.push({
        path: "/pms/newStu",
        // product-add
        query: {}
      });
    },
    goChatStu() {
      this.$router.push({
        path: "/pms/chatStu",
        // product-add
        query: {}
      });
    },
    goUnChatStu() {
      this.$router.push({
        path: "/pms/unchatStu",
        // product-add
        query: {}
      });
    },
    xfTodayTask() {
      todayTask().then(res => {
        this.todayTasks = res.data;
        console.log(this.todayTasks, "this.todayTasks");
      });
    },
    getStatistics() {
      statistics(this.listQuery).then(res => {
        this.gpaNum = res.data.gpaNum;
        this.matchNum = res.data.matchNum;
        this.outlineNum = res.data.outlineNum;

        // console.log(res, "getStatistics");
        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];
  },
  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.getLop();
    }
  }
};
</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;
  }
}
</style>
