<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <div style="margin-bottom:10px">
        <el-button type="primary" @click="dialogVisible = true">通用规则设置</el-button>
        <el-button type="primary" @click="enterTo">{{enterTitle}}</el-button>
      </div>

      <el-dialog title="通用规则设置" :visible.sync="dialogVisible">
        <p style="padding-bottom:10px;border-bottom:1px solid #d9d9d9">节假日</p>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="现金支付" prop="name">
                <el-input v-model="ruleForm.name" style="width:200px" placeholder="倍/天"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用免费天数" prop="name">
                <el-input v-model="ruleForm.name" style="width:200px" placeholder="倍/天"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <el-button type="primary">确定</el-button>
          </div>
        </el-form>
      </el-dialog>

      <div class="month">
        <ul>
          <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
          <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
          <li class="year-month" @click="pickYear(currentYear,currentMonth)">
            <span class="choose-year">{{ currentYear }}</span>
            <span class="choose-month">{{ currentMonth }}月</span>
          </li>
          <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
        </ul>
      </div>
      <!-- 星期 -->
      <ul class="weekdays">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li style="color:red">六</li>
        <li style="color:red">日</li>
      </ul>
      <!-- 日期 -->
      <ul class="days">
        <!-- v-for循环 每一次循环用<li>标签创建一天 -->
        <li
          v-for="(dayobject,index) in days"
          :key="index"
          :class="{setHeight:setHeight,weekend:new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7,setBorder:isSetBorder}"
        >
          <!--本月-->
          <!--如果不是本月  改变类名加灰色-->

          <span
            v-if="dayobject.day.getMonth()+1 != currentMonth"
            class="other-month"
          >{{ dayobject.day.getDate() }}</span>

          <!--如果是本月  还需要判断是不是这一天-->
          <span v-else>
            <span
              v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
              class="active"
            >{{ dayobject.day.getDate() }}</span>
            <span v-else>{{ dayobject.day.getDate() }}</span>
          </span>
          <p
            v-if="new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7"
            style="color:red"
          >两倍</p>
          <!--显示剩余多少数量-->
          <!-- <p v-if="leftobj[dayobject.index]">
            剩余：
            <span style="color: red">{{leftobj[dayobject.index].count}}</span>
          </p>-->
          <!---->
          <!-- <button @click="order(dayobject)" v-if="leftobj[dayobject.index]">预定</button> -->
        </li>
      </ul>

      <div
        style="background:#fff;padding:20px 0;border-top:1px solid red"
        v-show="isSetBorder == true"
      >
        <el-form
          :model="setForm"
          :rules="setrules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="价格类型" prop="radio1">
            <el-radio-group v-model="setForm.radio1">
              <el-radio-button label="倍数"></el-radio-button>
              <el-radio-button label="绝对值"></el-radio-button>
              <el-radio-button label="会员价"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="应用范围" prop="radio1">
            <el-radio-group v-model="setForm.radio1">
              <el-radio-button label="全局设置"></el-radio-button>
              <el-radio-button label="不同车型不同倍数"></el-radio-button>
            </el-radio-group>
            <el-input v-model="setForm.input" placeholder="请输入倍数" style="width:100px;"></el-input>
          </el-form-item>
          <el-button style="margin-left:30px" type="primary">确定</el-button>
        </el-form>
      </div>

      <el-dialog title="倍数详情" :visible.sync="multiplePop">

      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multiplePop: false,
      setForm: {},
      setrules: {},
      enterTitle: "进入编辑",
      ruleForm: {},
      rules: {},
      dialogVisible: false,
      isSetBorder: false,
      setHeight: true,
      isWeekend: false,
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      days: [],
      leftobj: [
        //存放剩余数量
        { count: 1 },
        { count: 2 },
        { count: 3 },
        { count: 4 },
        { count: 5 }
      ]
    };
  },
  created: function() {
    //在vue初始化时调用
    this.initData(null);
  },
  methods: {
    //进入编辑
    enterTo() {
      if (this.enterTitle == "进入编辑") {
        this.isSetBorder = true;
        this.enterTitle = "取消编辑";
      } else {
        this.isSetBorder = false;
        this.enterTitle = "进入编辑";
      }
    },
    order: function(day) {
      //预定函数
      if (this.leftobj[day.index].count >= 1) this.leftobj[day.index].count--;
      else alert("已经没有位置了");
    },
    initData: function(cur) {
      var leftcount = 0; //存放剩余数量
      var date;
      var index = 0; //控制显示预定的天数 ，比如下面设置只能预定三天的
      //this.initleftcount(); 每次初始化更新数量
      //有两种方案  一种是每次翻页 ajax获取数据初始化   http请求过多会导致资源浪费
      // 一种是每次请求 ajax获取数据初始化    数据更新过慢会导致缺少实时性
      //还可以setTimeout 定时请求更新数据  实现数据刷新（可能会更好）

      if (cur) {
        date = new Date(cur);
      } else {
        var now = new Date();
        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
        d.setDate(35);
        date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      }
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;

      this.currentWeek = date.getDay(); // 1...6,0
      if (this.currentWeek == 0) {
        this.currentWeek = 7;
      }
      var str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      );
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
        var d = new Date(str);
        d.setDate(d.getDate() - i);

        var dayobject = {};
        dayobject.day = d;
        var now = new Date();
        if (
          d.getDate() === now.getDate() &&
          d.getMonth() === now.getMonth() &&
          d.getFullYear() === now.getFullYear()
        ) {
          dayobject.index = index++; //从今天开始显示供预定的数量
        } else if (index != 0 && index < 3) dayobject.index = index++; //从今天开始3天内显示供预定的数量

        this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      for (var i = 1; i <= 35 - this.currentWeek; i++) {
        var d = new Date(str);
        d.setDate(d.getDate() + i);
        var dayobject = {};
        dayobject.day = d;
        var now = new Date();
        if (
          d.getDate() === now.getDate() &&
          d.getMonth() === now.getMonth() &&
          d.getFullYear() === now.getFullYear()
        ) {
          dayobject.index = index++;
        } else if (index != 0 && index < 3) dayobject.index = index++;
        this.days.push(dayobject);
      }
    },
    pickPre: function(year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickNext: function(year, month) {
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(35);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickYear: function(year, month) {
      alert(year + "," + month);
    },

    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year, month, day) {
      var y = year;
      var m = month;
      if (m < 10) m = "0" + m;
      var d = day;
      if (d < 10) d = "0" + d;
      return y + "-" + m + "-" + d;
    }
  }
};
</script>
   <style>
.setBorder {
  border-left: 1px solid red;
  border-top: 1px solid red;
}

.setHeight {
  height: 120px;
}
.weekend {
  color: red !important;
}
* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

body {
  font-family: Verdana, sans-serif;
  background: #e8f0f3;
}

#calendar {
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.month {
  width: 100%;
  background: #20a0ff;
}

.month ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.year-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.year-month:hover {
  background: rgba(150, 2, 12, 0.1);
}

.choose-year {
  padding-left: 20px;
  padding-right: 20px;
}

.choose-month {
  text-align: center;
  font-size: 1.5rem;
}

.arrow {
  padding: 30px;
}

.arrow:hover {
  background: rgba(100, 2, 12, 0.1);
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #20a0ff;
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  justify-content: space-around;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
}

.days {
  padding: 0;
  background: #ffffff;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 15px;
  padding-top: 15px;
  font-size: 1rem;
  color: #000;
}

.days li .active {
  padding: 6px 10px;
  border-radius: 50%;
  background: #20a0ff;
  color: #fff;
}

.days li .other-month {
  padding: 5px;
  color: gainsboro;
}

.days li:hover {
  background: #c0c4cc;
}
</style>