<template>
  <div class="app-container">
    <div class="hello">
      <h4>{{$store.getters.nickName}},欢迎您</h4>
    </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">
                  <el-row class="font-medium">
                    <el-col :span="6" class="overview-item-title"
                      ><span @click="goMatchPF">需匹配教授</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title"
                      ><span @click="goEditPlan">需编撰大纲</span></el-col
                    >
                    <el-col :span="6" class="overview-item-title">
                      <span @click="goNeedScoreStu">需打分学员</span>
                    </el-col>
                    <!-- <el-col :span="6" class="overview-item-title">
                      <span @click="goUnChatStu">待沟通学员</span>
                    </el-col> -->
                  </el-row>
                  <el-row>
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value overview-item-title"
                      >{{ todayTask.matchNum  }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value overview-item-title"
                      >{{ todayTask.outlineNum}}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value overview-item-title"
                      >{{ todayTask.gpaNum }}</el-col
                    >
                    <!-- <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ todayTasks.unChatUserNum }}</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"
                      >{{ PFStatics.matchNum }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ PFStatics.outlineNum }}</el-col
                    >
                    <el-col
                      :span="6"
                      class="color-danger overview-item-value"
                      >{{ PFStatics.gpaNum }}</el-col
                    >
                  </el-row>
                  <el-row class="font-medium">
                    <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, getProfessors, getPFSta } from "@/api/cso2";
import { formatDate } from "@/utils/date";
import { getCookie } from "@/utils/support";
import moment from "moment";

export default {
  name: "jiaowuHome",
  data() {
    return {
      listQuery: {
        starTime: "",
        endTime: ""
      },
      todayTask: "",
      PFStatics: "",
      nickName:"",
      notice: {
        pageNum: 1,
        pageSize: 10
      },
      kpiList: [{}],
      paymentTime: [],
      // lop: "",
      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.getProfess();
    this.getPFStatics();
  },
  methods: {
    // handleSizeChange(val) {
    //   this.notice.pageNum = 1;
    //   this.notice.pageSize = val;
    //   this.getNotice();
    // },

    getProfess() {
      getProfessors().then(res => {
        this.todayTask = res.data;
      });
    },
    getPFStatics() {
      getPFSta(this.listQuery).then(res => {
        this.PFStatics = res.data;
       // console.log(res,'PFStatics');
        this.$forceUpdate();
      });
    },
  
    
    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();
    },
    goMatchPF() {
      this.$router.push({
        path: "/dailyTask/matchPF",
        // product-add
        query: {}
      });
    },
    goEditPlan() {
      this.$router.push({
        path: "/dailyTask/editPlan",
        // product-add
        query: {}
      });
    },
    goNeedScoreStu() {
      this.$router.push({
        path: "/dailyTask/needScoreStu",
        // product-add
        query: {}
      });
    },
    goUnConfirmBase() {
      this.$router.push({
        path: "/dailyTask/unConfirmBase",
        // 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.todayTask= res.data;
    //     console.log(this.todayTasks, "this.todayTask");
    //   });
    // }
  },
  mounted() {
    // this.username = getCookie("username")
    // console.log(getCookie("username"),'username');
    this.nickName = this.$store.state.user.nickName;
    console.log( this.nickName,'nickName');
    let now = new Date(); // 当前日期
    let nowYear = now.getFullYear(); //当前年
    let nowMonth = now.getMonth(); //当前月 （值为0~11）
   
    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 if(!this.paymentTime){
         alert('请选择查询时间段！')
      }
      else {
        this.listQuery.starTime = undefined;
        this.listQuery.endTime = undefined;
      }
      //   this.getLop();
      this.getPFStatics();
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
  .hello{
    margin-top: -40px;
    margin-bottom: 10px;
    h4{
      float: right;
    }
  }
}
.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>
