<template>
  <div class="calendar">
    <!-- <el-calendar v-model="value">
    </el-calendar>-->
    <div class="calendarHeader">
      <el-row class="f16 calendarYM">
        <el-col :xs="4" :sm="4" :md="3" :lg="3" :offset="1">
          <span>{{currentYear}}年</span>
          <span>{{currentMonth}}月</span>
        </el-col>
        <el-col :xs="10" :sm="12" :md="14" :lg="16" class="noneHeight"></el-col>
        <el-col :xs="8" :sm="7" :md="5" :lg="4" class="TextHeight">
          <span @click="changeMonth('a')">上个月</span>
          <span @click="changeMonth(null);">今天</span>
          <span @click="changeMonth('b')">下个月</span>
        </el-col>
      </el-row>
    </div>
    <div class="monthDay">
      <div class="calendarWeeks">
        <table class="calendarWeeksTable">
          <thead>
            <th v-for="(weekDay,index) in weeks" :key="index">{{weekDay}}</th>
          </thead>
          <tbody>
            <tr v-for="(items,indexO) in days" :key="indexO">
              <td v-for="(item,indexJ) in items" :key="indexJ" width="80">
                <div
                  :class="[item.YMD==OriginalS2.getFullYear()+'-'+(OriginalS2.getMonth()+1)+'-'+OriginalS2.getDate()?'tableBgColor':'']"
                >
                  <span
                    :class="['conversionBl',item.day==today?'tableColor':'',item.status===0?'notTableColor':'']"
                  >{{item.day}}</span>
                  <span class="conversionBl" v-for="(itemVal,indexD) in item.list" :key="indexD">
                    <span
                      :class="['conversionBl twoEndLayout',itemVal.key===1?'ibacPrimary':itemVal.key===2?'ibacYellowBold':itemVal.key===3?'ibacSuccess':itemVal.key===4?'ibacRed':itemVal.key===5?'ibacYellow':itemVal.key===6?'waxGourd':itemVal.key===7?'moonlight':itemVal.key===8?'flowers':itemVal.key===9?'blueViolet':'cqred']"
                      @click="OpenEleStatus(itemVal,item)"
                    >
                      <span>{{itemVal.key===1?"待维保":itemVal.key===2?"维保中":itemVal.key===3?"维保已完成":itemVal.key===4?"召修待完成":itemVal.key===5?"急修中":itemVal.key===6?"急修已完成":itemVal.key===7?"计划年检":itemVal.key===8?"年检中":itemVal.key===9?"年检已完成":"超期"}}</span>
                      <span>{{itemVal.value}}</span>
                    </span>
                  </span>
                  <!-- <span
                    :class="['conversionBl',item.day==today?'tableColor':'',item.status===0?'notTableColor':'']" @click="OpenEleStatus(item)"
                  >{{item.day}}</span>
                  <span class="ibacPrimary conversionBl" v-if="item.Done>0" @click="OpenEleStatus(item,item.Done,'待保养')">待保养{{item.Done}}台</span>
                  <span class="ibacSuccess conversionBl" v-if="item.Er>0" @click="OpenEleStatus(item,item.Er,'已保养')">已保养{{item.Er}}台</span>
                  <span class="ibacYellow conversionBl" v-if="item.InEr>0" @click="OpenEleStatus(item,item.InEr,'已急修')">已急修{{item.InEr}}台</span>
                  <span class="ibacRed conversionBl" v-if="item.InMt>0" @click="OpenEleStatus(item,item.InMt,'急修中')">急修中{{item.InMt}}台</span>
                  <span class="ibacYellowBold conversionBl" v-if="item.Plan>0" @click="OpenEleStatus(item,item.Plan,'保养中')">保养中{{item.Plan}}台</span>-->
                </div>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- <el-row class="conversionInBl">
          <el-col :sm="3" :lg="3" v-for="(weekDay,index) in weeks" :key="index">{{weekDay}}</el-col>
        </el-row>
        <el-row class="conversionInBl" v-for="(items,indexO) in days" :key="indexO">
          <el-col :sm="3" :lg="3" v-for="(item,indexJ) in items" :key="indexJ">
            <span  class="calendarDay">{{item.day}}</span>
          </el-col>
        </el-row>-->
      </div>
      <!-- dialog -->
      <el-dialog :visible.sync="OpenStatus" :title="OpenStatusText" width="800px">
        <el-table
          :data="eleTableList.slice((priseList.pageNum-1)*priseList.pageSize,priseList.pageNum*priseList.pageSize)"
          style="width: 100%"
          :header-cell-style="{'background-color': '#fafafa','font-weight':'800'}"
        >
          <el-table-column
            prop="projectName"
            label="项目名称"
            min-width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="registrationCode"
            label="电梯注册编码
"
            min-width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="liftCode"
            label="电梯编号"
            min-width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="workerName" label="电梯维保工" min-width="100"></el-table-column>
        </el-table>
        <div class="pagenation">
          <span>
            <el-pagination
              background
              layout="prev, pager, next, sizes, total, jumper"
              :total="eleTableList.length"
              @current-change="NumChange"
              :page-sizes="[5]"
              :page-size="priseList.pageSize"
            ></el-pagination>
          </span>
        </div>
      </el-dialog>
      <!--  -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      OriginalS: new Date(),
      OriginalS2: new Date(),
      currentDay: 1,
      currentMonth: 1,
      currentweek: 1,
      currentYear: 1970,
      days: [],
      weeks: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      ],
      today: new Date().getDate(),
      dayNum: {},
      OpenStatus: false,
      OpenStatusText: "",
      eleTableList: [],
      priseList: {
        pageSize:5,
        pageNum: 1
      }
    };
  },

  created() {
    let newDate = new Date();
    let bMonth = newDate.getMonth() + 1;
    let aMonth = bMonth < 10 ? "0" + bMonth : bMonth;
    let a = newDate.getFullYear() + "-" + aMonth;
    this.changeMonth(null);
  },
  methods: {
    initData(_istrue, yearMonth) {
      var _this = this;
      var istrue = _istrue;
      var promise = new Promise((resolve, reject) => {
        var url = "system/home/enterprise/calendar/taskNum";
        var param = {
          mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
          requestDateStr: yearMonth
        };
        _this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            resolve(res.data);
          } else {
            resolve([]);
          }
        });
      });
      promise.then(function(listData) {
        // 初始化
        _this.days = [];
        // 存储变量数据
        var leftcount = 0;
        // 声明日期
        var date;
        // 判断是加载，还是调用
        if (istrue) {
          date = new Date(istrue);
          // _this.currentMonth = date.getMonth();
        } else {
          date = new Date();
          // _this.currentMonth = date.getMonth() + 1;
        }
        // 获取年 月  日
        // _this.currentDay = date.getDate();
        // _this.currentYear = date.getFullYear();
        // 获取当月的所有天数
        var newdays = new Date(_this.currentYear, _this.currentMonth, 0);
        var newPrevDays = new Date(
          _this.currentYear,
          _this.currentMonth - 1,
          0
        ).getDate();
        var dayValue = newdays.getDate();
        // 存储所有的日期到数组，添加日期状态
        var arrDay = [];
        var dayNUM = _this.dayNum;
        for (var i = 1; i <= dayValue; i++) {
          let obj = {};
          listData.forEach(val => {
            if (i === val.key) {
              obj.list = val.value;
            }
          });
          obj.day = i;
          obj.YMD = _this.currentYear + "-" + _this.currentMonth + "-" + i;
          obj.status = 1;
          arrDay.push(obj);
          // if(i===29){
          //   console.log(obj);
          // }
        }
        // 判断当月1号是星期几
        var myDate =
          new Date(
            _this.currentYear + "-" + _this.currentMonth + "-" + "1"
          ).getDay() === 0
            ? 7
            : new Date(
                _this.currentYear + "-" + _this.currentMonth + "-" + "1"
              ).getDay();

        // 判断本月最后一天是星期几
        var lastDate = new Date(
          _this.currentYear + "-" + _this.currentMonth + "-" + dayValue
        ).getDay();

        // 调用函数补全上月和下月的日历
        var lastDays = NoDays(1, lastDate);
        var preDays = NoDays(newPrevDays, myDate).reverse();

        function NoDays(a, b) {
          var cDays = [];
          if (a == 1) {
            for (var j = a; j <= 7 - b; j++) {
              let obj = {};
              obj.day = j;
              obj.status = 0;
              cDays.push(obj);
            }
          } else {
            for (var i = a; i > a - b + 1; i--) {
              let obj = {};
              obj.day = i;
              obj.status = 0;
              cDays.push(obj);
            }
          }
          return cDays;
        }
        var allDays = arrDay;
        if (preDays[0] != null) {
          allDays = preDays.concat(arrDay);
        }
        if (lastDays[0] != null) {
          allDays = allDays.concat(lastDays);
        }
        // 切割数组

        for (
          var k = 0, allDaysLength = allDays.length;
          k < allDaysLength;
          k = k + 7
        ) {
          _this.days.push(allDays.slice(k, k + 7));
        }
      });
    },
    changeMonth(isAB) {
      // 判断月份是增还是减
      if (isAB === "a") {
        // 记录减的月份；
        let year = this.OriginalS.getFullYear();
        let month = parseInt(this.currentMonth)-1
        let day = this.OriginalS.getDate();
        if (month == 0) {
          year = year - 1;
          month = 12;
        }
        let amonth = month < 10 ? "0" + month : month;
        this.currentYear = year;
        this.currentMonth = amonth;
        this.OriginalS = new Date(year + "-" + month + "-" + day);
        // 判断月份是否是一月份
        this.initData(year + "-" + month + "-" + day, year + "-" + amonth);
      } else if (isAB === "b") {
        this.dayNum = {};
        // 记录减的月份；
        let year = this.OriginalS.getFullYear();
        let month = parseInt(this.currentMonth)+1;
        let day = this.OriginalS.getDate();
        if (month > 12) {
          year = year + 1;
          month = 1;
        }
        let amonth = month < 10 ? "0" + month : month;
        this.currentYear = year;
        this.currentMonth = amonth;
        this.OriginalS = new Date(year + "-" + month + "-" + day);
        // 判断月份是否是一月份
        this.initData(year + "-" + month + "-" + day, year + "-" + amonth);
      } else {
        this.OriginalS = new Date();
        let year = this.OriginalS.getFullYear();
        let bMonth = this.OriginalS.getMonth() + 1;
        let aMonth = bMonth < 10 ? "0" + bMonth : bMonth;
        this.currentDay=this.OriginalS.getDate();
        this.currentYear = this.OriginalS.getFullYear();
        this.currentMonth = aMonth;
        let a = this.OriginalS.getFullYear() + "-" + aMonth;
        this.initData(null, a);
      }
    },
    OpenEleStatus(item, val) {
      this.OpenStatus = true;
      this.priseList.pageNum=1;
      this.eleTableList=[];
      switch (item.key) {
        case 1:
          this.OpenStatusText = "待维保电梯";
          break;
        case 2:
          this.OpenStatusText = "维保中电梯";
          break;
        case 3:
          this.OpenStatusText = "维保完成电梯";
          break;
        case 4:
          this.OpenStatusText = "召修待完成电梯";
          break;
        case 5:
          this.OpenStatusText = "急修中电梯";
          break;
        case 6:
          this.OpenStatusText = "急修完成电梯";
          break;
        case 7:
          this.OpenStatusText = "计划年检电梯";
          break;
        case 8:
          this.OpenStatusText = "年检中电梯";
          break;
        case 9:
          this.OpenStatusText = "年检完成电梯";
          break;
        default:
          this.OpenStatusText = "超期电梯";
      }
      var ymd = val.YMD.split("-");
      ymd[1] = parseInt(ymd[1]) < 10 ? `0${parseInt(ymd[1])}` : ymd[1];
      ymd[2] = parseInt(ymd[2]) < 10 ? `0${parseInt(ymd[2])}` : ymd[2];
      val.YMD = ymd.join("-");
      var url = "system/home/enterprise/calendar/taskLiftNum";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        requestDateDayStr: val.YMD,
        calendarLiftStatus: item.key
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.eleTableList = res.data;
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    NumChange(val){
     this.priseList.pageNum=val;
    }
  }
};
</script>

<style lang="stylus" scope>
$f16 = 1.6rem;

.f16 {
  font-size: $f16;
}

.calendar {
  .calendarHeader {
    font-size: $f16;

    >.calendarYM {
      width: 94%;
      padding: 1rem 0;

      span {
        font-size: 1.8rem;
        font-weight: 400;
      }

      .noneHeight {
        padding: 0.5rem;
      }

      .TextHeight {
        span {
          padding: 5px;
          font-size: 13px;
          border: 1px solid #dfdfdf;
          cursor: pointer;
        }

        span:hover {
          background-color: #ecf5ff;
          color: #3a8ee6;
          border-color: #c6e2ff;
        }

        span:active {
          color: #3a8ee6;
          border-color: #3a8ee6;
          outline: none;
        }
      }
    }
  }

  .monthDay {
    font-size: 1.6rem;
    width: 100%;

    .calendarWeeks {
      padding: 1rem;
      border-top: 1px solid #dfdfdf;

      .calendarWeeksTable {
        width: 90%;
        transform: translate(5%);
        -ms-transform: translate(5%);
        -moz-transform: translate(5%);
        -webkit-transform: translate(5%);
        -o-transform: translate(5%);
        border-collapse: collapse;

        table, tbody, td {
          border: 1px solid #dfdfdf;
          height: 8rem;
        }

        thead th {
          padding: 1rem 0;
        }

        div {
          text-align: left;
          padding: 0.5rem;
          height: 100%;

          span {
            border-radius: 10px;
            padding: 0 5px;
            margin-bottom: 3px;
            font-size: 13px;
          }

          .twoEndLayout {
            display: flex;
            justify-content: space-between;

            span {
              padding: 0;
              margin: 0;
            }
          }
        }

        div:hover {
          cursor: pointer;
          background-color: #f2f8fe;
        }

        .tableColor {
          color: #1989fa;
        }

        .tableBgColor {
          background-color: #f2f8fe;
        }

        .notTableColor {
          color: #c0c4cc;
        }

        thead {
          font-size: 1.8rem;
        }
      }
    }
  }
}
</style>
