<template>
  <div>
    <!--     查看预定信息对话框相关html元素  -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogForm4BookInfoVisible">
      <el-form :model="form4BookInfo" ref="form4BookInfo" label-width="120px">
        <el-form-item label="目标月份" prop="selectedMonth4BookInfo">
          <el-date-picker
            v-model="selectedMonth4BookInfo"
            type="month"
            :editable="true"
            format="yyyy-MM"
            placeholder="请选择目标月份"
            @change="changeDate4BookInfo"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <table cellpadding="0" cellspacing="0" style=" width: 100%; border: 2px solid rgba(131, 145, 165, 0.43) ">
        <tbody class="el-date-table" style="">
        <tr style="font-size: 30px">
          <th style="font-size: 30px">日</th>
          <th style="font-size: 30px">一</th>
          <th style="font-size: 30px">二</th>
          <th style="font-size: 30px">三</th>
          <th style="font-size: 30px">四</th>
          <th style="font-size: 30px">五</th>
          <th style="font-size: 30px">六</th>
        </tr>
        <tr v-for=" row in getEevryDayThisMonth " class="el-date-table__row">
          <td v-for=" col in row " :class="col.class" :style="col.style">
            {{col.day}}
            <span v-if=" col.isBooked === true "
                  :style="{position: 'relative', fontSize: 10+'px', color: 'rgba(15, 159, 214, 0.6)', float: 'right'}">订</span>
          </td>
        </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel4BookInfo('form4BookInfo')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getBookedInfo
  } from 'api/vehicle/vehicleInfo/';


  import {
    formatDate
  } from 'utils/dateFormattor';

  import {
    toEast8Date,
    deepCopyDate,
    newEast8Date
  } from 'utils/dateUtils';

  export default {
    name: 'bookInfoViewer',
    data() {
      return {
        form4BookInfo: {
          selectedMonth: undefined,
          vehicle: undefined
        },
        pickerOptions4Apply: {
          disabledDate: this.checkBookDate
        },
        dialogForm4BookInfoVisible: false,
        curBookedInfo: undefined,
        dialogStatus: '',
        textMap: {
          bookInfo: '预定信息'
        }
      }
    },
    created() {
    },
    computed: {
      getEevryDayThisMonth: function () {
        let curDate = newEast8Date();
        let allDays = [];
        for (curDate.setDate(0); curDate.getDay() !== 6; curDate.setDate(curDate.getDate() - 1)) {//第一天不是星期天，往上月补充
          allDays = [...allDays, {
            class: 'prev-month',
            isBooked: false,
            day: curDate.getDate(),
            style: {fontSize: 25 + 'px'}
          }];
        }
        curDate = newEast8Date();
        curDate.setDate(1);
        let curMonth = curDate.getMonth();
        let maxDay = undefined;
        for (; curDate.getMonth() <= curMonth; curDate.setDate(curDate.getDate() + 1)) {
          maxDay = curDate.getDate();
          let style = {fontSize: 25 + 'px'};
          let isBooked = false;
          if (!this.$utils.isEmpty(this.curBookedInfo) && this.$utils.isInteger(this.curBookedInfo.bookedDate)) {
            if ((this.curBookedInfo.bookedDate & (1 << (maxDay - 1))) !== 0) {
              style.color = 'rgba(15, 159, 214, 0.6)';
              style.border = '2px solid rgba(15, 159, 214, 0.6)';
              isBooked = true;
            }
          }
          allDays = [...allDays, {class: 'available', isBooked: isBooked, day: maxDay, style: style}];
        }

        for (; curDate.getDay() !== 0; curDate.setDate(curDate.getDate() + 1)) { //最后一天不是星期六，往下月补充
          allDays = [...allDays, {
            class: 'next-month',
            isBooked: false,
            day: curDate.getDay(),
            style: {fontSize: 25 + 'px'}
          }];
        }
        let rs = {};
        for (let index in allDays) {
          let rowNo = Math.floor(index / 7);
          if (this.$utils.isEmpty(rs[rowNo])) {
            rs[rowNo] = [];
          }
          rs[rowNo] = [...rs[rowNo], allDays[index]]
        }
        return rs;
      },
      selectedMonth4BookInfo: {
        get: function () {
          if (this.$utils.isString(this.form4BookInfo.selectedMonth) && this.form4BookInfo.selectedMonth !== '') {
            return toEast8Date(this.form4BookInfo.selectedMonth);
          }
          return undefined;
        },
        set: function (date) {
          if (this.$utils.isDate(date)) {
            this.form4BookInfo.selectedMonth = formatDate(date, 'yyyy-MM');
          } else {
            this.form4BookInfo.selectedMonth = undefined;
          }
        }
      }
    },
    methods: {
      changeDate4BookInfo: function (date) {
        getBookedInfo(this.form4BookInfo.vehicle, date).then(response => {
          this.curBookedInfo = response.data;
        });
      },
      checkBookDate: function (time) {
        let nowDate = newEast8Date();
        if (this.$utils.toDateString(time, 'yyyy-MM-dd') < this.$utils.toDateString(nowDate, 'yyyy-MM-dd')) {
          return true;
        }
        if (nowDate.setMonth(nowDate.getMonth() + 2) < time) {//预定范围两个月内
          return true;
        }
        let curYearMonth = formatDate(time, 'yyyy-MM');
        if (!this.$utils.isEmpty(this.getCurBookedInfo) && this.$utils.isInteger(this.getCurBookedInfo[curYearMonth])) {
          let int4BitMap = this.getCurBookedInfo[curYearMonth];
          let dayOfMonth = time.getDate();
          return (int4BitMap & (1 << (dayOfMonth - 1))) != 0;
        }
        return false;
      },
      handleBookInfo(vehicleId) {
        this.resetTemp4BookInfo();
        this.form4BookInfo.vehicle = vehicleId;
        getBookedInfo(vehicleId, formatDate(newEast8Date(), 'yyyy-MM'))
          .then(response => {
            this.curBookedInfo = response.data;
            this.dialogStatus = 'bookInfo';
            this.dialogForm4BookInfoVisible = true;
          });
      },
      cancel4BookInfo(formName) {
        this.dialogForm4BookInfoVisible = false;
        this.$refs[formName].resetFields();
      },
      resetTemp4BookInfo() {
        this.form4BookInfo = {
          selectedMonth: this.$utils.toDateString(newEast8Date(), 'yyyy-MM'),
          vehicle: undefined
        };
      }
    }
  }
</script>
