<template>
  <div class="app-container">
    <classe @classelist="classelist" style="width: 500px; display: inline;" ref="classe"></classe>
    <parent @parentlist="parentlist" style="width: 500px; display: inline;" ref="resets"></parent>
    <el-form size="small" :inline="true" v-show="showSearch">
      <el-form-item label="日期" prop="orderStatus" label-width="60px">
        <el-date-picker
          v-model="valuetime"
          type="daterange"
          align="right"
          @change="monthStartEndTimechange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getlist">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="家长姓名" align="center" prop="parentName" />
      <el-table-column label="打卡天数" align="center" prop="loginCount" />
      <el-table-column label="查看打卡日历" align="center" prop>
        <template slot-scope="scope">
          <el-button type="text" @click="look(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getlist"
    />
    <el-dialog width="1600px" title="打卡统计" :visible.sync="loginCountshow" append-to-body>
      <div class="picker">
        年度：
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="选择年"
          format="yyyy"
          value-format="yyyy"
        ></el-date-picker>
      </div>
      <div class="dio" @click="false">
        <el-calendar v-model="yearmonths[0]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[1]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[2]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[3]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[4]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[5]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[6]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[7]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[8]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[9]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[10]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
        <el-calendar v-model="yearmonths[11]" style="width:380px">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }" style="font-size:14px">
              <div class="solar" style="font-size:14px">{{ data.day.split('-')[2] }}</div>
              <div
                class="lunar"
                style="font-size:2px"
                :class="{ festival : isFestival(date, data) }"
              >{{ solarToLunar(date, data) }}</div>
            </div>
          </template>
        </el-calendar>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { clockStatistics } from "@/api/system/StatisticsParent";
import classe from "../../assembly/classe.vue";
import parent from "../../assembly/parent.vue";
import calendar from "../../calendar.js";
export default {
  name: "StatisticsParent",
  components: { classe, parent },
  data() {
    return {
      loginCountshow: false,
      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]);
            }
          }
        ]
      },
      valuetime: "",
      loading: false,
      showSearch: true, // 显示搜索条件
      list: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        parentInfoId: "",
        classId: "",
        startDate: "",
        endDate: ""
      },
      selectedDates: ["2023-03-12", "2023-04-12", "2023-04-15", "2023-04-24"],
      date: new Date(),
      yearmonths: [],
      year: "2023"
    };
  },
  created() {
    this.newtime();
    this.getlist();
  },
  mounted() {},
  watch: {
    year() {
      this.yearmonths = [
        this.year + "-01",
        this.year + "-02",
        this.year + "-03",
        this.year + "-04",
        this.year + "-05",
        this.year + "-06",
        this.year + "-07",
        this.year + "-08",
        this.year + "-09",
        this.year + "-10",
        this.year + "-11",
        this.year + "-12"
      ];
    }
  },
  methods: {
    // 是否选中日期
    isSelected: function(slotDate, slotData) {
      return this.selectedDates.includes(slotData.day);
    },
    // 是否节假日
    isFestival(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );
      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(
        lunarDay.festival == null ? "" : " " + lunarDay.festival
      );
      festAndTerm.push(
        lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
      );
      festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
      festAndTerm = festAndTerm.join("");
      return festAndTerm != "";
    },
    // 公历转农历
    solarToLunar(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );
      // 农历日期
      let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;
      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(
        lunarDay.festival == null ? "" : " " + lunarDay.festival
      );
      festAndTerm.push(
        lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
      );
      festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
      festAndTerm = festAndTerm.join("");

      return festAndTerm == "" ? lunarMD : festAndTerm;
    },
    //获取list
    getlist() {
      clockStatistics(
        this.query.pageNum,
        this.query.pageSize,
        this.query.parentInfoId,
        this.query.classId,
        this.query.startDate,
        this.query.endDate
      ).then(res => {
        this.list = res.rows;
        this.total = res.total;
      });
    },
    //今天的时间
    newtime() {
      let nowDate = new Date();
      let dates = {
        year: nowDate.getFullYear(), // 获取当前年份
        month: nowDate.getMonth() + 1, //获取当前月份
        date: nowDate.getDate() //获取当前日期
      };
      this.yearmonths = [
        dates.year + "-01",
        dates.year + "-02",
        dates.year + "-03",
        dates.year + "-04",
        dates.year + "-05",
        dates.year + "-06",
        dates.year + "-07",
        dates.year + "-08",
        dates.year + "-09",
        dates.year + "-10",
        dates.year + "-11",
        dates.year + "-12"
      ];
      console.log(this.year);
      // //拼接
      // if (dates.month < 10) {
      //   this.query.startDate = dates.year + "-0" + dates.month;
      //   this.query.endDate = dates.year + "-0" + dates.month;
      // } else {
      //   this.query.startDate = dates.year + "." + dates.month;
      //   this.query.endDate = dates.year + "-" + dates.month;
      // }
      // if (dates.date < 10) {
      //   this.query.startDate = this.startDate + "-0" + dates.date;
      //   this.query.endDate = this.endDate + "-0" + dates.date;
      // } else {
      //   this.query.startDate = this.startDate + "-" + dates.date;
      //   this.query.endDate = this.endDate + "-" + dates.date;
      // }
    },
    look() {
      this.loginCountshow = true;
    },
    //家长
    parentlist(e) {
      this.query.parentInfoId = e;
    },
    //班级
    classelist(e) {
      this.query.classId = e;
    },
    //重置
    resetQuery() {
      this.newtime();
      this.valuetime = "";
      this.getlist();
    },
    //选择时期区间
    monthStartEndTimechange(e) {
      this.query.startDate = this.formatDate(new Date(e[0]).getTime());
      this.query.endDate = this.formatDate(new Date(e[1]).getTime());
    },
    formatDate(time, timetype) {
      let date = new Date(time); //13位时间戳
      //let date = new Date(parseInt(time) * 1000); //10位时间戳
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    }
  }
};
</script>
<style lang='scss' scoped>
::v-deep .el-calendar__button-group .el-button-group {
  width: 0;
  height: 0;
  overflow: hidden;
  .el-button {
    overflow: hidden;
    width: 0 !important;
    height: 0 !important;
  }
}
::v-deep .el-calendar-table .el-calendar-day {
  padding: 0;
}
::v-deep .el-calendar-table .el-calendar-day {
  height: 65px;
}
.app-container {
  padding: 20px 0 20px 10px;
}
::v-deep .el-card__header {
  border: none;
}
::v-deep .el-form {
  display: inline;
}

/**隐藏上一月、本月、下一月*/
.el-calendar__button-group {
  display: none;
}
/**月份居中*/
.el-calendar__title {
  width: 100%;
  text-align: center;
}
/**日期div的样式*/
.el-calendar-table tr td:first-child {
  border-left: 0px;
}
.el-calendar-table td {
  min-height: 110px;
  min-width: 110px;
  border-right: 0px;
}
.el-calendar-table td.is-selected {
  background-color: white;
}
.el-calendar-table .el-calendar-day {
  height: 100%;
  padding: 0px;
  text-align: center;
}
.el-calendar-table .el-calendar-day > div {
  height: 65px;
  text-align: center;
}
/**日期div的样式-公历*/
.el-calendar-table .el-calendar-day > div .solar {
  text-align: center;
  padding-top: 5px;
}
/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day > div .lunar {
  padding-top: 5px;
  width: 100%;
  text-align: center;
}
/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day > div.selected {
  background-color: #fef2f2;
  border: 3px solid #fb0;
  border-radius: 10px;
  text-align: center;
}

/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n + 2) .solar {
  color: red;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
  color: #606266;
  width: 100%;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
  color: red;
}
/**禁用点击效果*/
/*.el-calendar-table td {*/
/*pointer-events: none;*/
/*}*/
.dio {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 0;
}
.picker {
  display: inline-block;
  position: absolute;
  right: 80px;
  top: 20px;
  padding-right: 80px;
  font-size: 18px;
  font-weight: 600;
}
::v-deep .el-input--medium .el-input__inner {
  font-size: 16px;
}
</style>

