<template>
  <div class="outer-layer">
    <div class="schedule-left">
      <div class="commons-title" style="margin-bottom: 0">我的日程</div>
      <div style="margin-top: 16px">
        <el-input v-model="sourceList.pagination.keyword" placeholder="请输入关键词" class="input-with-select" clearable>
          <template #append>
            <el-button :icon="Search" @click="getList" />
          </template>
        </el-input>
      </div>
      <div style="margin-top: 16px">
        <el-menu :default-active="menuDefault" class="el-menu-vertical-demo" @select="handleSelectMenu">
          <el-menu-item :index="1">
            <span>我的创建</span>
          </el-menu-item>
          <el-menu-item :index="2">
            <span>全员日程</span>
          </el-menu-item>
          <el-menu-item :index="3">
            <span>我的待办</span>
          </el-menu-item>
          <el-menu-item :index="4" disabled>
            <span>客户明细</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="margin-top: 16px; font-size: 20px; font-weight: 700">
        <span>{{ moment(today).format("yyyy年MM月DD日") }}</span>
        <span style="margin-left: 16px">{{ calculationWeek(moment(today).format("yyyy年MM月DD日"), "yyyy年MM月DD日") }}</span>
      </div>
      <div v-for="(item, index) in selectData" :key="index" style="display: flex; margin-top: 16px">
        <div style="width: 30px">
          <div :style="'width: 14px; height: 14px; border-radius: 50px; margin-top: 4px; background-color: ' + item.color"></div>
        </div>
        <div style="width: calc(100% -0px)">
          <div>
            <span>{{ moment(item.startDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
            <span> - </span>
            <span>{{ moment(item.endDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
          </div>
          <div style="margin: 16px 0">
            <div>{{ item.title }}</div>
          </div>
          <div style="margin: 16px 0" v-html="getStyle(item.remark)" v-if="item.remark"></div>
        </div>
      </div>
    </div>
    <div class="schedule-right">
      <div class="schedule-top">
        <el-row>
          <el-col :span="10" style="text-align: left">
            <el-select v-model="status" style="width: 110px">
              <el-option v-for="item in tableStatus" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="info" style="margin-left: 8px" @click="clickToday()" plain>今日</el-button>
          </el-col>
          <el-col :span="4" style="text-align: center; height: 32px; line-height: 32px">
            <div style="display: flex; justify-content: space-between">
              <el-button :icon="ArrowLeftBold" @click="prevMonth()" />
              <span style="font-weight: 700">{{ month }}</span>
              <el-button :icon="ArrowRightBold" @click="nextMonth()" />
            </div>
          </el-col>
          <el-col :span="10" style="text-align: right">
            <el-button type="primary" @click="newSchedule()">新建日程</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="schedule-bottom">
        <el-calendar v-model="today" ref="calendar">
          <template #date-cell="{ data }">
            <div>
              <div :class="'title ' + (data.isSelected ? 'is-selected' : '')" :style="data.isSelected ? '  background-color: #eeeeee;' : ''">
                <span :class="data.isSelected ? 'select-title' : ''">{{ data.day.substr(8, 10) }}</span>
                <span style="position: absolute; right: 4px; top: 4px; font-size: 14px; color: black" v-if="judgeDay(data.day)">
                  {{ dateList[data.day].length }}条
                </span>
              </div>
              <div v-if="judgeDay(data.day)">
                <div v-for="(item, index) in dateList[data.day]" :key="index">
                  <el-popover placement="right" :width="400" trigger="hover">
                    <template #reference>
                      <div class="line-class" :style="getColor(item)">
                        <span style="font-size: 12px; margin-left: 8px; color: black">{{ item.title }}</span>
                      </div>
                    </template>
                    <div>
                      <el-form :model="item" label-width="80px" style="margin-top: 18px">
                        <el-form-item label="主题:">
                          <span>{{ item.title }}</span>
                        </el-form-item>
                        <el-form-item label="时间:">
                          <div>
                            <span v-if="item.startDate">{{ moment(item.startDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
                            <span> - </span>
                            <span v-if="item.endDate">{{ moment(item.endDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
                          </div>
                        </el-form-item>
                        <el-form-item label="颜色:">
                          <div :style="' width: 24px; height: 24px; border-radius: 50px; margin-top: 2px; background-color: ' + item.color">
                            <el-icon style="color: #fff; font-size: 20px; margin: 2px 0 0 2px"><Check /></el-icon>
                          </div>
                        </el-form-item>
                        <el-form-item label="提醒:">
                          <span>{{ getLabel(item.noticeType, noticeType) }}</span>
                        </el-form-item>
                      </el-form>
                      <div style="border-top: 1px solid #ccc; text-align: center; padding-top: 16px">
                        <el-button type="primary" @click="clickDetail(item)" text>查看详情</el-button>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </div>

    <el-dialog title="新建日程" v-if="openSchedule" v-model="openSchedule" width="640" v-loading="loadingDialog" :close-on-click-modal="false">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="schedule">
        <template #time>
          <div style="width: 100%">
            <!-- <el-row :gutter="10" style="margin-bottom: 18px"> -->
            <el-row :gutter="10">
              <el-col :span="11">
                <el-form-item prop="startDate">
                  <el-date-picker
                    v-model="formData.data.startDate"
                    type="datetime"
                    placeholder="请选择开始时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align: center"> 至 </el-col>
              <el-col :span="11">
                <el-form-item prop="endDate">
                  <el-date-picker
                    v-model="formData.data.endDate"
                    type="datetime"
                    placeholder="请选择结束时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="10" style="margin-bottom: 18px">
              <el-col :span="11">
                <el-form-item prop="repeatType">
                  <el-select v-model="formData.data.repeatType" placeholder="请选择重复类型" style="width: 100%">
                    <el-option v-for="item in repeatType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-checkbox v-model="formData.data.isAllDay" label="全天任务" :true-label="1" :false-label="0" border />
              </el-col>
            </el-row> -->
          </div>
        </template>
        <template #color>
          <div style="width: 100%; display: flex">
            <el-radio-group v-model="formData.data.color" class="radio-color">
              <el-radio v-for="(item, index) in predefineColors" :key="index" :label="item">
                <div :style="'background-color: ' + item">
                  <el-icon style="color: #fff; font-size: 20px; margin: 2px 0 0 2px" v-if="item === formData.data.color"><Check /></el-icon>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
        </template>
        <template #participantList>
          <div style="width: 100%">
            <el-select v-model="formData.data.participantList" multiple placeholder="请选择参与人" style="width: 100%">
              <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div style="color: #ccc; font-size: 12px">
              <span v-if="formData.data.participantList && formData.data.participantList.length > 0">共{{ formData.data.participantList.length }}人参与</span>
              <span v-else>共0人参与</span>
            </div>
          </div>
        </template>
        <template #noticeType>
          <div style="width: 100%">
            <el-select v-model="formData.data.noticeType" placeholder="请选择通知" style="width: 100%">
              <el-option v-for="item in noticeType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </template>
        <!-- <template #taskPermissions>
          <div style="width: 100%">
            <el-form-item prop="taskPermissions">
              <el-radio-group v-model="formData.data.taskPermissions">
                <el-radio v-for="item in taskPermissions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </template> -->
      </byForm>
      <template #footer>
        <el-button @click="openSchedule = false" size="large">取 消</el-button>
        <el-button type="primary" @click="clickSubmit()" size="large">确 定</el-button>
      </template>
    </el-dialog>

    <el-drawer v-model="drawer" :title="getDrawerTitle()" :direction="direction">
      <div style="padding-top: 18px; border-top: 1px solid #ccc">
        <el-form :model="item" label-width="80px" style="margin: 20px">
          <el-form-item label="主题:">
            <span>{{ scheduleDetails.title }}</span>
          </el-form-item>
          <el-form-item label="时间:">
            <div>
              <span v-if="scheduleDetails.startDate">{{ moment(scheduleDetails.startDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
              <span> - </span>
              <span v-if="scheduleDetails.endDate">{{ moment(scheduleDetails.endDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
            </div>
          </el-form-item>
          <el-form-item label="颜色:">
            <div :style="' width: 24px; height: 24px; border-radius: 50px; margin-top: 2px; background-color: ' + scheduleDetails.color">
              <el-icon style="color: #fff; font-size: 20px; margin: 2px 0 0 2px"><Check /></el-icon>
            </div>
          </el-form-item>
          <el-form-item label="参与人:">
            <div style="display: flex; flex-wrap: wrap" v-if="scheduleDetails.participantList && scheduleDetails.participantList.length > 0">
              <span v-for="(item, index) in scheduleDetails.participantList" :key="index" style="margin-right: 16px; margin-bottom: 8px">
                {{ getLabel(item.participantId, userList) }}
              </span>
            </div>
          </el-form-item>
          <el-form-item label="提醒:">
            <span>{{ getLabel(scheduleDetails.noticeType, noticeType) }}</span>
          </el-form-item>
          <el-form-item label="具体描述:">
            <div v-html="getStyle(scheduleDetails.remark)" v-if="scheduleDetails.remark"></div>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Search, ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
import moment from "moment";
import byForm from "@/components/byForm/index";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";
import * as date from "@/utils/date.js";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    createUser: "",
    participantId: "",
    startDate: "",
    endDate: "",
  },
});
const menuDefault = ref(2);
// const day = ref(moment().format("yyyy年MM月DD日"));
const month = ref(moment().format("yyyy年MM月"));
const status = ref("0");
const dateList = ref({});
const selectData = ref([]);
const tableStatus = ref([
  {
    label: "月",
    value: "0",
  },
  {
    label: "周",
    value: "1",
  },
]);
const today = ref(moment().format("yyyy-MM-DD"));
const calendar = ref();
watch(
  () => today.value,
  (newValue) => {
    if (month.value !== moment(newValue).format("yyyy年MM月")) {
      month.value = moment(newValue).format("yyyy年MM月");
      console.log("date-change");
      getList();
    }
    getSelectDayList();
  }
);
const selectDate = (val) => {
  calendar.value.selectDate(val);
};
const handleSelectMenu = (index) => {
  console.log("handleSelectMenu", index);
  if (index === 1) {
    sourceList.value.pagination.createUser = useUserStore().user.userId;
    sourceList.value.pagination.participantId = "";
  } else if (index === 2) {
    sourceList.value.pagination.createUser = useUserStore().user.userId;
    sourceList.value.pagination.participantId = useUserStore().user.userId;
  } else if (index === 3) {
    sourceList.value.pagination.createUser = "";
    sourceList.value.pagination.participantId = useUserStore().user.userId;
  }
  getList();
};
const getList = async () => {
  sourceList.value.pagination.startDate = moment(month.value, "yyyy年MM月").format("yyyy-MM-DD");
  sourceList.value.pagination.endDate = moment(moment(month.value, "yyyy年MM月").add(+1, "month").add(-1, "days").calendar()).format("yyyy-MM-DD");
  console.log("getList", sourceList.value.pagination);
  dateList.value = {};
  proxy.post("/scheduleInfo/page", sourceList.value.pagination).then((res) => {
    let list = date.getMonthBetween(sourceList.value.pagination.startDate, sourceList.value.pagination.endDate);
    if (list && list.length > 0) {
      list.map((item) => {
        dateList.value[item] = [];
      });
    }
    let dataArr = [];
    if (res.rows && res.rows.length > 0) {
      for (let i = 0; i < res.rows.length; i++) {
        let rowDate = date.getMonthBetween(res.rows[i].startDate.substr(0, 10), res.rows[i].endDate.substr(0, 10));
        dataArr.push({
          list: [],
        });
        for (let j = 0; j < rowDate.length; j++) {
          dataArr[i].list.push({
            ...res.rows[i],
            date: rowDate[j],
          });
        }
      }
      var alreadyExisted = [];
      for (var i = 0; i < dataArr.length; i++) {
        if (dataArr[i].list.length > 0) {
          var status = true;
          for (var j = 0; j < 9; j++) {
            var status2 = true;
            for (var k = 0; k < dataArr[i].list.length; k++) {
              if (alreadyExisted.indexOf(dataArr[i].list[k].date + "-" + j) !== -1) {
                status2 = false;
                break;
              }
            }
            if (status2) {
              for (var l = 0; l < dataArr[i].list.length; l++) {
                alreadyExisted.push(dataArr[i].list[l].date + "-" + j);
                for (var n = 0; n < j + 1; n++) {
                  if (n !== j) {
                    if (!dateList.value[dataArr[i].list[l].date]) {
                      dateList.value[dataArr[i].list[l].date] = [];
                    }
                    if (!dateList.value[dataArr[i].list[l].date][n]) {
                      dateList.value[dataArr[i].list[l].date].push({});
                    }
                  } else {
                    if (!dateList.value[dataArr[i].list[l].date]) {
                      dateList.value[dataArr[i].list[l].date] = [];
                    }
                    dateList.value[dataArr[i].list[l].date][j] = dataArr[i].list[l];
                  }
                }
              }
              status = false;
              break;
            }
          }
          if (status) {
            for (var m = 0; m < dataArr[i].list.length; m++) {
              if (!dateList.value[dataArr[i].list[m].date]) {
                dateList.value[dataArr[i].list[m].date] = [];
              }
              if (!dateList.value[dataArr[i].list[m].date][0]) {
                dateList.value[dataArr[i].list[m].date][0] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][1]) {
                dateList.value[dataArr[i].list[m].date][1] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][2]) {
                dateList.value[dataArr[i].list[m].date][2] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][3]) {
                dateList.value[dataArr[i].list[m].date][3] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][4]) {
                dateList.value[dataArr[i].list[m].date][4] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][5]) {
                dateList.value[dataArr[i].list[m].date][5] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][6]) {
                dateList.value[dataArr[i].list[m].date][6] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][7]) {
                dateList.value[dataArr[i].list[m].date][7] = {};
              }
              if (!dateList.value[dataArr[i].list[m].date][8]) {
                dateList.value[dataArr[i].list[m].date][8] = {};
              }
              dateList.value[dataArr[i].list[m].date].push(dataArr[i].list[m]);
            }
          }
        }
      }
    }
  });
};
const getStyle = (text) => {
  if (text) {
    return text.replace(/\n|\r\n/g, "<br>");
  } else {
    return "";
  }
};
const getSelectDayList = () => {
  let queryParam = proxy.deepClone(sourceList.value.pagination);
  queryParam.startDate = moment(today.value).format("yyyy-MM-DD");
  queryParam.endDate = moment(today.value).format("yyyy-MM-DD");
  if (menuDefault.value === 1) {
    queryParam.createUser = useUserStore().user.userId;
    queryParam.participantId = "";
  } else if (menuDefault.value === 2) {
    queryParam.createUser = useUserStore().user.userId;
    queryParam.participantId = useUserStore().user.userId;
  } else if (menuDefault.value === 3) {
    queryParam.createUser = "";
    queryParam.participantId = useUserStore().user.userId;
  }
  console.log("getSelectDayList", queryParam);
  proxy.post("/scheduleInfo/page", queryParam).then((res) => {
    selectData.value = res.rows;
  });
};
getSelectDayList();
const clickToday = () => {
  console.log("clickToday", sourceList.value.pagination);
};
const prevMonth = () => {
  month.value = moment(moment(month.value, "yyyy年MM月").add(-1, "month").calendar()).format("yyyy年MM月");
  console.log("prevMonth", month.value);
  selectDate("prev-month");
  getList();
};
const nextMonth = () => {
  month.value = moment(moment(month.value, "yyyy年MM月").add(+1, "month").calendar()).format("yyyy年MM月");
  console.log("nextMonth", month.value);
  selectDate("next-month");
  getList();
};
const userList = ref([]);
const getDict = () => {
  proxy.get("/tenantUser/list", { pageNum: 1, pageSize: 10000, tenantId: useUserStore().user.tenantId }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      userList.value = res.rows.map((item) => {
        return {
          label: item.nickName,
          value: item.userId,
        };
      });
    }
  });
};
getDict();
handleSelectMenu(2);
const openSchedule = ref(false);
const loadingDialog = ref(false);
const schedule = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formData = reactive({
  data: {
    isAllDay: 0,
    participantList: [],
  },
});
// const repeatType = ref([
//   {
//     label: "不重复",
//     value: 0,
//   },
//   {
//     label: "每天重复",
//     value: 1,
//   },
//   {
//     label: "每周重复",
//     value: 2,
//   },
//   {
//     label: "每月重复",
//     value: 3,
//   },
// ]);
const noticeType = ref([
  {
    label: "提前15分钟",
    value: 15,
  },
  {
    label: "提前30分钟",
    value: 30,
  },
  {
    label: "提前1小时",
    value: 60,
  },
]);
// const taskPermissions = ref([
//   {
//     label: "仅自己可见",
//     value: 0,
//   },
//   {
//     label: "参与人可见",
//     value: 1,
//   },
//   {
//     label: "全员可见",
//     value: 2,
//   },
// ]);
const predefineColors = ref([
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#00e0ff",
  "#1e90ff",
  "#c71585",
  "#8c00ff",
  "#ff00f2",
  "#00ff32",
  "#b9ff00",
]);
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "title",
      label: "标题",
      itemType: "text",
    },
    {
      type: "slot",
      prop: "time",
      slotName: "time",
      label: "时间",
    },
    {
      type: "slot",
      prop: "color",
      slotName: "color",
      label: "颜色",
    },
    {
      type: "slot",
      prop: "participantList",
      slotName: "participantList",
      label: "参与人",
    },
    // {
    //   type: "input",
    //   prop: "place",
    //   label: "地点",
    //   itemType: "text",
    // },
    {
      type: "slot",
      prop: "noticeType",
      slotName: "noticeType",
      label: "通知",
    },
    // {
    //   type: "slot",
    //   prop: "taskPermissions",
    //   slotName: "taskPermissions",
    //   label: "任务权限",
    // },
    {
      type: "input",
      prop: "remark",
      label: "具体描述",
      itemType: "textarea",
    },
  ];
});
const rules = ref({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  startDate: [{ required: true, message: "请选择开始时间", trigger: "change" }],
  endDate: [{ required: true, message: "请选择结束时间", trigger: "change" }],
  // repeatType: [{ required: true, message: "请选择重复类型", trigger: "change" }],
  color: [{ required: true, message: "请选择颜色", trigger: "change" }],
  participantList: [{ required: true, message: "请选择参与人", trigger: "change" }],
  // place: [{ required: true, message: "请输入日程、事项、活动地址等", trigger: "blur" }],
  noticeType: [{ required: true, message: "请选择通知类型", trigger: "change" }],
  // taskPermissions: [{ required: true, message: "请选择任务权限", trigger: "change" }],
});
const newSchedule = () => {
  formData.data = {
    isAllDay: 0,
    participantList: [],
  };
  loadingDialog.value = false;
  openSchedule.value = true;
};
const clickSubmit = () => {
  schedule.value.handleSubmit(() => {
    if (formData.data.startDate > formData.data.endDate) {
      return ElMessage("结束时间不能小于开始时间");
    }
    loadingDialog.value = true;
    let data = proxy.deepClone(formData.data);
    if (data.participantList && data.participantList.length > 0) {
      data.participantList = data.participantList.map((item) => {
        return {
          participantId: item,
        };
      });
    }
    proxy.post("/scheduleInfo/add", data).then(
      () => {
        ElMessage({
          message: "新建成功",
          type: "success",
        });
        openSchedule.value = false;
        getList();
        getSelectDayList();
      },
      (err) => {
        console.log(err);
        loadingDialog.value = false;
      }
    );
  });
};
const judgeDay = (day) => {
  return dateList.value[day] && dateList.value[day].length > 0;
};
const getColor = (item) => {
  let text = "background-color: " + item.color + "6b;";
  if (item.startDate && item.date === item.startDate.substr(0, 10)) {
    text += " border-left: 5px solid " + item.color;
  }
  return text;
};
const getLabel = (val, list) => {
  let text = "";
  if (list && list.length > 0) {
    let data = list.filter((item) => item.value == val);
    if (data && data.length > 0) {
      text = data[0].label;
    }
  }
  return text;
};
const scheduleDetails = ref({});
const drawer = ref(false);
const direction = ref("rtl");
const getDrawerTitle = () => {
  let title = "";
  if (scheduleDetails.value.date) {
    title += moment(scheduleDetails.value.date).format("MM月DD日");
    title = title + " " + proxy.calculationWeek(moment(scheduleDetails.value.date).format("MM月DD日"), "MM月DD日");
  }
  return title;
};
const clickDetail = (item) => {
  proxy.post("/scheduleInfo/detail", { id: item.id }).then((res) => {
    scheduleDetails.value = res;
    scheduleDetails.value.date = item.date;
    drawer.value = true;
  });
};
</script>

<style lang="scss" scoped>
.outer-layer {
  margin: 20px;
  display: flex;
  justify-content: space-between;
  .schedule-left {
    width: 360px;
    background: #fff;
    height: calc(100vh - 100px - 40px);
    padding: 20px;
    overflow-y: auto;
  }
  .schedule-right {
    width: calc(100% - 380px);
    .schedule-top {
      width: 100%;
      background: #fff;
      padding: 20px;
    }
    .schedule-bottom {
      width: 100%;
      background: #fff;
      height: calc(100vh - 100px - 40px - 92px);
      padding: 20px;
      margin-top: 20px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0px;
      }

      .line-class {
        height: 18px;
        line-height: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        margin: 1px 0;
      }
    }
  }
}
::v-deep(.el-menu) {
  border-right: 0;
}
::v-deep(.el-menu-item) {
  height: 40px;
}
::v-deep(.el-calendar__header) {
  display: none;
}
::v-deep(.el-calendar__body) {
  padding: 0;
}
::v-deep(.el-calendar-table .el-calendar-day) {
  padding: 0;
  height: calc((100vh - 100px - 40px - 92px - 50px - 40px) / 6);
  overflow-y: hidden;
}
.is-selected {
  color: #1989fa;
}
.title {
  text-align: center;
  height: 24px;
  line-height: 18px;
  position: relative;
  padding: 4px;
  .select-title {
    border-radius: 50px;
    background-color: #1989fa;
    color: #eee;
    padding: 2px;
  }
}
::v-deep(.radio-color .el-radio) {
  margin-right: 8px;
}
::v-deep(.radio-color .el-radio__input) {
  display: none;
}
::v-deep(.radio-color .el-radio__label) {
  div {
    width: 24px;
    height: 24px;
    border-radius: 50px;
  }
}
::v-deep(.el-drawer__title) {
  font-size: 24px;
  font-weight: 700;
  color: black;
}
::v-deep(.el-drawer__body) {
  padding: 0 !important;
}
</style>
