<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{ $t("holidays.country") }}：</span>
        <el-select v-model="countryCode" placeholder="请选择国家" @change="countryChn">
          <el-option
            v-for="(item) in countryCodeList"
            :key="item.id"
            :label="item.chineseDescription"
            :value="item.countryCode">
          </el-option>
        </el-select>
      </div>
      <!-- <div class="container_item" style="margin-left: 22px;">
        <span class="item_text item_text1">{{ $t("holidays.date") }}：</span>
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="shareDate "
          style="width: 100%;"
        ></el-date-picker>
      </div> -->
      <!-- <el-button
        v-waves
        style="margin-left: 20px;margin-right: 0;"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        {{ $t("table.search") }}
      </el-button>
      <el-button
        v-waves
        style="margin-left: 20px;margin-right: 0;"
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        {{ $t("table.add") }}
      </el-button> -->
    </div>
    <div class="flex-body">

      <div class="flex-calendar">
        <div class="flex-calendar-header">
          <div class="header-lf">
            <img class="years" src="@/assets/images/years_pre.png" alt="" @click="skip('preYear')">
            <img class="month" src="@/assets/images/month_pre.png" alt="" @click="skip('preMonth')">
            <span>{{ currentYearMonth }}</span>
            <img class="month" src="@/assets/images/month_next.png" alt="" @click="skip('nextMonth')">
            <img class="years" src="@/assets/images/years_next.png" alt="" @click="skip('nextYear')">
          </div>
          <div class="header-rt">
            <el-button size="mini" class="today-btn" @click="skip('today')">今天</el-button>
          </div>
        </div>
        <el-calendar v-model="timeVal" ref="refCalendar">
          <template slot="dateCell" slot-scope="{ data }">
            <template v-if="new Date(data.day).getDay() === 6 || new Date(data.day).getDay() === 0">
              <template v-if="tableData.map((v) => { return v.shareDate }).includes(data.day) && tableData.find((v) => v.shareDate === data.day).isWork === 1">
                <div :class="{'is-selected': data.isSelected}" class="calendar-default"  @click="calendarHandle(data.day)">
                  <p>{{ data.day.split("-").slice(1).join("-") }}</p>
                  <p >{{ tableData.find((v) => v.shareDate === data.day).shareName }}</p>
                </div>
              </template>
              <template v-else>
                <div :class="{'is-selected': data.isSelected}" class="calendar-default isWeek"  @click="calendarHandle(data.day)">
                  <p>{{ data.day.split("-").slice(1).join("-") }}</p>
                  <p>周末</p>
                </div>
              </template>
            </template>

            <template v-if="new Date(data.day).getDay() !== 6 && new Date(data.day).getDay() !== 0">
              <template v-if="tableData.map((v) => { return v.shareDate }).includes(data.day) && tableData.find((v) => v.shareDate === data.day).isWork === 0">
                <div :class="{'is-selected': data.isSelected}" class="calendar-default isWeek"  @click="calendarHandle(data.day)">
                  <p>{{ data.day.split("-").slice(1).join("-") }}</p>
                  <p>{{ tableData.find((v) => v.shareDate === data.day).shareName }}</p>
                </div>
              </template>
              <template v-else>
                <div :class="{'is-selected': data.isSelected}" class="calendar-default"  @click="calendarHandle(data.day)">
                  <p>{{ data.day.split("-").slice(1).join("-") }}</p>
                </div>
              </template>
            </template>
          </template>
        </el-calendar>
      </div>
      <div class="flex-set">
        <p class="set-curdate">{{ shareDate }}</p>
        <template v-if="new Date(shareDate).getDay() === 6 || new Date(shareDate).getDay() === 0">
          <template v-if="tableData.map((v) => { return v.shareDate }).includes(shareDate) && tableData.find((v) => v.shareDate === shareDate).isWork === 1">
            <p class="curdate-dec">{{ tableData.find((v) => v.shareDate === shareDate).shareName }}</p>
          </template>
          <template v-else >
            <p class="curdate-dec isRest">{{ shareName }}</p>
          </template>
        </template>
        <template v-if="new Date(shareDate).getDay() !== 6 && new Date(shareDate).getDay() !== 0">
          <template v-if="tableData.map((v) => { return v.shareDate }).includes(shareDate) && tableData.find((v) => v.shareDate === shareDate).isWork === 0">
            <p class="curdate-dec isRest">{{ tableData.find((v) => v.shareDate === shareDate).shareName }}</p>
          </template>
          <template v-else>
            <p class="curdate-dec">{{ shareName }}</p>
          </template>
        </template>
        <template v-if="permission.includes('holidays_set')">
          <template v-if="new Date(shareDate).getDay() === 6 || new Date(shareDate).getDay() === 0">
            <template v-if="tableData.map((v) => { return v.shareDate }).includes(shareDate) && tableData.find((v) => v.shareDate === shareDate).isWork === 1">
              <el-button class="set-btn" size="small" @click="handleSet(3)"><span>恢复节假日</span></el-button>
            </template>
            <template v-else>
              <el-input class="set-text-dec" size="mini" v-model="shareNameDec" placeholder="请输入"></el-input>
              <el-button class="set-btn" size="small" @click="handleSet(1)"><span>设为工作日</span></el-button>
            </template>
          </template>
          <template v-if="new Date(shareDate).getDay() !== 6 && new Date(shareDate).getDay() !== 0">
            <template v-if="tableData.map((v) => { return v.shareDate }).includes(shareDate) && tableData.find((v) => v.shareDate === shareDate).isWork === 0">
              <el-button class="set-btn" size="small" @click="handleSet(2)"><span>恢复工作日</span></el-button>
            </template>
            <template v-else>
              <el-input class="set-text-dec" size="mini" v-model="shareNameDec" placeholder="请输入"></el-input>
              <el-button class="set-btn" size="small" @click="handleSet(0)"><span>设为节假日</span></el-button>
            </template>
          </template>
        </template>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getData"
    />
    <el-dialog
      :title="handleType == 1 ? '新增' : '编辑'"
      :visible.sync="dialogFormVisible"
      v-el-drag-dialog
      :close-on-click-modal="false"
      width="960px"
    >
      <div class="addflex">
        <div>
          <el-form
            ref="dataForm"
            :model="temp"
            label-position="right"
            label-width="100px"
          >
            <el-form-item :label="$t('currencytype.currencyCode') + ':'">
              <el-input
                v-model="temp.currencyCode"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
            <el-form-item :label="$t('currencytype.chineseName') + ':'">
              <el-input
                v-model="temp.chineseName"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
            <el-form-item :label="$t('currencytype.countryCode') + ':'">
              <el-input
                v-model="temp.countryCode"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
            <el-form-item :label="$t('currencytype.abbrCode') + ':'">
              <el-input
                v-model="temp.abbrCode"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
            <el-form-item :label="$t('currencytype.countryExplain') + ':'">
              <el-input
                v-model="temp.countryExplain"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form
            ref="dataForm"
            :model="temp"
            label-position="right"
            label-width="100px"
          >
            <el-form-item :label="$t('currencytype.rateDps') + ':'">
              <el-input
                v-model="temp.rateDps"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
            <el-form-item :label="$t('currencytype.sortLevel') + ':'">
              <el-input
                v-model="temp.sortLevel"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
            <el-form-item :label="$t('currencytype.maintenanceuser') + ':'">
              <el-input
                v-model="temp.maintenanceuser"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
            <el-form-item :label="$t('currencytype.maintenancetime') + ':'">
              <el-input
                v-model="temp.maintenancetime"
                class="filter-item input_item"
                style="width: 319px"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="padding-right: 26px">
        <el-button
          v-waves
          class="filter-item flex_align"
          type="primary"
          icon="el-icon-my-tijiao"
          @click="sbumitData"
        >
          {{ $t("table.sbumit") }}
        </el-button>
        <el-button
          v-waves
          class="filter-item flex_align"
          type="primary"
          icon="el-icon-my-quxiao"
          @click="dialogFormVisible = false"
        >
          {{ $t("table.cancel") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
import http from "@/api/http";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "",
  components: { Pagination },
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      query: {},
      listRole: [],
      tableData: [],
      pageSize: 20,
      pageNum: 1,
      orgList: [],
      form: {},
      temp: {},
      dialogFormVisible: false,
      dialogStatus: "",
      handleType: "1",
      tableHeight: 0,
      chpwdVisible: false,
      pwdChangeData: {},
      multipleSelection: [],
      timeVal: new Date(),

      loading: false,
      currentYearMonth: undefined,
      countryCodeList: [], //
      countryCode: undefined, //
      isWork: undefined, // 1工作日0节假日
      shareDate: undefined, // 格式：yyyy-MM-dd,插入时必输日期
      shareName: undefined, // 节假日/工作日名称
      shareNameDec: undefined

    };
  },
  created() {
    // this.getPreOrNextMonth("2022-02-10")
    this.loadData()
  },
  mounted() {
    this.$nextTick(() => {
      this.shareDate = this.getCurrentDate();
      this.currentYearMonth = new Date().getFullYear()+"年"+(new Date().getMonth()+1)+'月'
      // this.shareName = new Date(this.shareDate).getDay() === 6 || new Date(this.shareDate).getDay() === 0 ? '周末' : '工作日'
      this.tableHeight = window.innerHeight - 240;
      this.calendarHandle(this.shareDate);
      this.$el.querySelector('div.el-calendar__header').remove()
    });
  },
  methods: {
    async loadData() {
      await this.getInitData();
      await this.getData();
    },

    countryChn(val) {
      this.getData();
    },
    async getData() {
      // console.log('this.countryCode222222', this.countryCode);
      let params = {
        cpage: this.pageNum,
        pageSize: 99,
        countryCode: this.countryCode,
      }
      params = Object.assign(params, this.getPreOrNextMonth(this.shareDate))
      console.log('params', params);
      await http.post(`/share/holiday/queyList`, params).then((res) => {
        for(let item of res.data){
          item.shareDate = item.shareDate.split(' ')[0]
        }
        this.tableData = res.data;
        // console.log(this.tableData);
      }).catch(() => { });
    },
    // 获取上个月第一天
    getPreOrNextMonth(time) {
      var arr = time.split('-');
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var now = new Date(year, month, 0);
      var fd = new Date(now.getFullYear(), now.getMonth()-1 ,1).toLocaleDateString();
      // var ed = new Date(now.getFullYear(), now.getMonth(), 0).toLocaleDateString();
      // var fd2 = new Date(now.getFullYear(), now.getMonth()+1 ,1).toLocaleDateString();
      var ed2 = new Date(now.getFullYear(), now.getMonth()+2, 0).toLocaleDateString();
      let dt = fd.split("/");
      let dt2 = ed2.split("/");
      let m = parseInt(dt[1])<10 ? "0"+dt[1] : dt[1]
      let d = parseInt(dt[2])<10 ? "0"+dt[2] : dt[2]
      let m2 = parseInt(dt2[1])<10 ? "0"+dt2[1] : dt2[1]
      let d2 = parseInt(dt2[2])<10 ? "0"+dt2[2] : dt2[2]
      console.log(dt[0]+"-"+m+"-"+d);
      console.log(dt2[0]+"-"+m2+"-"+d2);
      return {
        shareDateBegin: dt[0]+"-"+m+"-"+d,
        shareDateEnd: dt2[0]+"-"+m2+"-"+d2
      }
    },
    handleSet(type) {
      // 创建节假日信息
      let params = {
        countryCode: this.countryCode,
        // isWork: isWork, // 1工作日0节假日
        shareDate: this.shareDate, // 格式：yyyy-MM-dd,插入时必输日期
        // shareName: this.shareNameDec, // 节假日/工作日名称
      }
      switch(type) {
        case 0 :{ // 设为节假日
          if (!this.shareNameDec) {
            this.$message.error('节假日名称不能为空')
            return
          }
          params = Object.assign(params, { isWork: 0, shareName: this.shareNameDec })
          break;
        }
        case 1 :{ // 设为工作日
          if (!this.shareNameDec) {
            this.$message.error('节假日名称不能为空')
            return
          }
          params = Object.assign(params, { isWork: 1, shareName: this.shareNameDec })
          break;
        }
        case 2 :{ // 恢复工作日
          this.shareNameDec = ''
          this.shareName = '工作日'
          params = Object.assign(params, { isWork: 1, shareName: this.shareName })
          break;
        }
        case 3 :{ // 恢复节假日
          this.shareNameDec = ''
          this.shareName = '周末'
          params = Object.assign(params, { isWork: 0, shareName: this.shareName })
          break;
        }
        default:
          break;
      }

      if (!this.countryCode) {
        this.$message.error('请选择国家')
        return
      }
      http.post('/share/holiday/create', params).then(() => {
        this.$message.success('设置成功')
        this.getData()
      })
    },
    getCurrentDate() {
      let d = new Date();
      let y = d.getFullYear(); //获取当前日期的年份
      let m = parseInt(d.getMonth())+1; //获取当前日期的月份
      let day = d.getDate(); //获取当前日期的日
      // console.log(y, m, day);
      if (m<10) {
        m = "0" + m
      }
      if (day<10) {
        day = "0" + day
      }
      return y+"-"+m+"-"+day
    },

    skip(val) {
      // console.log(this.timeVal.getFullYear(), this.timeVal.getMonth()+1);
      console.log(this.timeVal);
      switch(val) {
        case 'today': {
          this.shareDate = this.getCurrentDate();
          break;
        }
        case 'preMonth': {
          // this.timeVal = new Date(this.timeVal.setMonth(this.timeVal.getMonth()-1))
          this.shareDate = this.getPreMonth(this.shareDate)
          break;
        }
        case 'nextMonth': {
          // this.timeVal = new Date(this.timeVal.setMonth(this.timeVal.getMonth()+1))
          this.shareDate = this.getNextMonth(this.shareDate)
          break;
        }
        case 'preYear': {
          this.shareDate = this.getPreYear(this.shareDate)
          break;
        }
        case 'nextYear': {
          this.shareDate = this.getNextYear(this.shareDate)
          break;
        }
        default:
          break;
      }
      this.timeVal = this.shareDate;
      this.currentYearMonth = this.timeVal.split('-')[0]+"年"+this.timeVal.split('-')[1]+"月"

      this.getData(this.shareDate)
      this.calendarHandle(this.shareDate)
    },

    getPreYear(date) {
      return (parseInt(date.split('-')[0])-1) + '-' + date.split('-')[1] + '-' + date.split('-')[2]
    },

    getNextYear(date) {
      return (parseInt(date.split('-')[0])+1) + '-' + date.split('-')[1] + '-' + date.split('-')[2]
    },

    getPreMonth(date) {
      var arr = date.split('-');
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - 1;
      if (month2 == 0) {
          year2 = parseInt(year2) - 1;
          month2 = 12;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
          day2 = days2;
      }
      if (month2 < 10) {
          month2 = '0' + month2;
      }
      var t2 = year2 + '-' + month2 + '-' + day2;
      return t2;
    },

    /**
     * 获取下一个月
     *
     * @date 格式为yyyy-mm-dd的日期，如：2014-01-25
     */
    getNextMonth(date) {
      var arr = date.split('-');
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中的月的天数
      var year2 = year;
      var month2 = parseInt(month) + 1;
      if (month2 == 13) {
          year2 = parseInt(year2) + 1;
          month2 = 1;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
          day2 = days2;
      }
      if (month2 < 10) {
          month2 = '0' + month2;
      }
      var t2 = year2 + '-' + month2 + '-' + day2;
      return t2;
    },

    // 创建节假日信息
    updateByday() {
      let params = {
        countryCode: this.countryCode,
        shareDate: this.shareDate,
        shareName: this.shareName,
        isWork: this.isWork
      }
      http.post('/share/holiday/create', params).then((res) => {

      }).catch((err) => {})
    },

    // 更新节假日信息
    updateByday() {
      let params = {
        countryCode: this.countryCode,
        shareDate: this.shareDate,
        shareName: this.shareName,
        isWork: this.isWork
      }
      http.post('/share/holiday/updateByday', params).then((res) => {

      }).catch((err) => {})
    },


    // 查询风险国别信息列表
    async getInitData() {
      await http.post(`/share/CountryCode/queryList`, { cpage: 1, pageSize: 100 }).then((res)=>{
        // console.log(res);
        let { list } = res.data
        this.countryCodeList = list
        this.countryCode = list[0].countryCode
        // console.log('this.countryCode1111111', this.countryCode);
      }).catch(err=>{});
    },

    // 日期选中
    calendarHandle(curDay) {
      this.shareDate = curDay
      // this.timeVal = curDay
      this.currentYearMonth = this.shareDate.split('-')[0]+"年"+this.shareDate.split('-')[1]+"月"
      if (new Date(curDay).getDay() === 6 || new Date(curDay).getDay() === 0) { // 周末
        this.shareName = '周末'
      } else {
        if (this.tableData.map((v) => { return v.shareDate }).includes(curDay)) {
          this.shareName = this.tableData.find((v) => v.shareDate === curDay).shareName
        } else {
          this.shareName = '工作日'
        }
      }
    },

    // 通过国别和日期查询节假日
    findByDate() {
      http.post('/share/holiday/findByDate', { countryCode: this.countryCode,shareDate: this.shareDate }).then((res) => {

      }).catch((err) => {})
    },
    handleSearch() {
      // this.pageNum = 1;
      this.findByDate();
    },

    handleChangePwd(row) {
      this.form = {};
      this.pwdChangeData = row;
      this.chpwdVisible = true;
    },

    handleCreate() {
      this.temp = {};
      this.handleType = 1;
      this.dialogFormVisible = true;
    },
    sbumitData() {
      if (this.handleType == 1) {
        this.temp.status = 1;
        http
          .post(`/share/currency/create`, this.temp)
          .then((res) => {
            this.$message.success("提交成功！");
            this.getData();
            this.dialogFormVisible = false;
          })
          .catch((err) => {});
      } else {
        this.temp.password = "";
        http
          .post(`/share/currency/update`, this.temp)
          .then((res) => {
            this.$message.success("提交成功！");
            this.getData();
            this.dialogFormVisible = false;
          })
          .catch((err) => {});
      }
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      // this.temp.orgItem = {
      //   id: row.orgId,
      //   orgCode: row.orgTreeCode
      // }
      this.handleType = 2;
      this.dialogFormVisible = true;
    },

    headerStyle() {
      return "tableStyle";
    },
    authorization() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style scope lang="scss">
.el-table__header-wrapper {
  border-radius: 10px 10px 0 0;
}
.userinfo {
  margin: 20px 50px;
  width: 464px;
  // height: 313px;
  background: rgba(212, 235, 254, 0.1);
  border: 1px solid rgba(61, 85, 150, 0.1);
  p {
    margin-left: 20px;
    font-size: 14px;
    font-family: "SourceHanSansCN";
    font-weight: 500;
    color: #212121;
    border-left: 3px solid #3d5596;
    padding-left: 8px;
  }
  .input_item {
    width: 319px !important;
  }
  .tab {
    margin: 0 30px 20px;
  }
}
.el-input__inner {
  color: #212121;
}
.container_item {
  .item_text {
    // width: 40px;
    padding-right: 0!important;
  }
  .item_text1 {
    width: 67px;
  }
  .el-input {
    flex: 1;
  }
}



.userinfo ::v-deep .el-form-item__label {
  color: #212121 !important;
}
.addflex {
  display: flex;
  padding: 30px 30px 0px 30px;
  justify-content: center;
}
.flex-body {
  display: flex;
  .flex-calendar {
    width: calc(100% - 220px);
    .flex-calendar-header {
      padding: 12px 20px;
      display: flex;
      background: #FFFFFF;
      border: 1px solid #BABABA;
      border-radius: 4px 0px 0px 0px;
      border-bottom: none;
      .header-lf {
        width: calc(100% - 100px);
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          cursor: pointer;
        }
        span {
          font-size: 18px;
          color: #227CC8;
          margin: 0 30px;
        }
        .years {
          width: 17px;
          height: 15px;
          margin: 0 30px;
        }
        .month {
          width: 9px;
          height: 15px;
          margin: 0 30px;
        }
      }
      .header-rt {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .today-btn {
          padding: 6px 26px;
        }
      }
    }
    .el-calendar {
      border: 1px solid #BABABA;
    }
    .el-calendar__body {
      padding: 0;
      .el-calendar-table td.is-selected {
        .el-calendar-day {
          >.calendar-default {
            border: 1px solid #1890ff;
            color: #1890ff;
            transition: all .3s;
          }
          >.isWeek {
            background: linear-gradient(0deg, #FFFFFF, #F9EEEE);
            color: #ED4D3C;
            border: 1px solid #ED4D3C!important;
            &:hover {
              border: 1px solid #ED4D3C!important;
            }
          }
        }
      }
      .el-calendar-table:not(.is-range) td.prev, .el-calendar-table:not(.is-range) td.next {
        color: #212121;
      }

      .el-calendar-table td.is-today {
        .el-calendar-day {
          >.calendar-default {
            // background: linear-gradient(0deg, #FFFFFF, #1688C1);
            color: #212121;
            // border: 1px solid #f7f321;
          }
          >.is-selected {
            border: 1px solid #1890ff;
            color: #1890ff;
            transition: all .3s;
          }
          >.isWeek {
            background: linear-gradient(0deg, #FFFFFF, #F9EEEE);
            color: #ED4D3C;
            &:hover {
              border: 1px solid #ED4D3C!important;
            }
          }
        }
      }
      .el-calendar-table .el-calendar-day {
        height: 66px;
        padding: 2px;
        >.calendar-default {
          height: 100%;
          background: linear-gradient(0deg,#FFFFFF, #E6EEF4,);
          box-sizing: content-box;
          p:nth-child(1) {
            text-align: center;
            padding: 0;
            margin: 0;
            font-size: 14px;
            padding: 12px 0 12px 0;
          }
          p:nth-child(2) {
            text-align: center;
            padding: 0;
            margin: 0;
            font-size: 13px;
          }
          &:hover {
            border: 1px solid #1890ff!important;
            animation: bottomBubbles 0.75s;
          }
        }
        >.isWeek {
          background: linear-gradient(0deg, #FFFFFF, #F9EEEE);
          color: #ED4D3C;
          &:hover {
            border: 1px solid #ED4D3C!important;
          }
        }
      }
    }
  }
  .flex-set {
    flex: 1;
    background: url('~@/assets/images/holiday_bg.png') no-repeat;
    background-size: 100% 100%;
    border: 1px solid #008DFF;
    // text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .set-btn {
      width: 107px;
      height: 36px;
      background: url('~@/assets/images/btn4x.png') no-repeat;
      background-size: 100% 100%;
      font-size: 13px;
      font-weight: 400;
      text-shadow: 0px 1px 1px #001D40;
      color: #FFFFFF;
      border: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-top: -3px;
      }
    }
    .set-text-dec {
      width: 142px;
      margin-bottom: 20px;
      border: 1px solid #267CD5;
      box-sizing: content-box;
      border-radius: 2px;
      box-shadow: 0px 2px 0px 0px #96AABA, 1px 5px 7px 0px rgba(12, 19, 36, 0.21), 1px 1px 0px 0px #FFFFFF;
      .el-input__inner {
        background: linear-gradient(180deg, #FFFFFF, #EAF8FF);
      }
    }
    .set-curdate {
      color: #212121;
      font-size: 24px;
      padding: 0;
      margin: 0;
    }
    .curdate-dec {
      font-size: 20px;
      padding: 0;
      margin: 36px 0 40px 0;
      color: #227CC8;
    }
    .isRest {
      color: #ED4D3C;
    }
    .isWork {
      color: #227CC8;
    }

  }
}
@keyframes bottomBubbles {
  0%{
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>
