<template>
  <div style="display: flex; flex-direction: column">
    <headers></headers>
    <div class="fullmain">
      <listFullcalendar></listFullcalendar>
      <fullCalendar
        :events="monthData"
        class="test-fc"
        first-day="1"
        locale="fr"
        lang="zh"
      >
        <template slot="fc-header-left">
          <div style="display: flex; flex-direction: column">
            <div
              style="
                display: flex;
                font-size: 14px;
                width: 50px;
                justify-content: center;
                height: 20px;
                border: 1px solid #ddddddff;
                margin-bottom: 20px;
                align-items: center;
              "
            >
              今天
            </div>
            <div style="display: flex">
              <div style="display: flex">
                <div
                  style="
                    width: 12px;
                    height: 12px;
                    background: #5b8ff9ff;
                    border-radius: 6px;
                    margin-right: 5px;
                  "
                ></div>
                <div style="font-size: 12px; margin-right: 5px">计划中</div>
              </div>
              <div style="display: flex">
                <div
                  style="
                    width: 12px;
                    height: 12px;
                    background: #70e17bff;
                    border-radius: 6px;
                    margin-right: 5px;
                  "
                ></div>
                <div style="font-size: 12px">进行中</div>
              </div>
              <div style="display: flex">
                <div
                  style="
                    width: 12px;
                    height: 12px;
                    background: #5d7092ff;
                    border-radius: 6px;
                    margin-right: 5px;
                    margin-left: 5px;
                  "
                ></div>
                <div style="font-size: 12px; margin-right: 5px">已完成</div>
              </div>
            </div>
          </div>
        </template>
        <template slot="fc-header-right">
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
            "
          >
            <el-select size="small" style="width: 100px" v-model="region">
              <el-option label="月" value="shanghai"></el-option>
              <el-option label="近三个月" value="beijing"></el-option>
            </el-select>
            <div style="display: flex; align-items: center; margin-top: 10px">
              <div style="display: flex">
                <div
                  style="
                    width: 12px;
                    height: 12px;
                    background: #ddddddff;
                    border-radius: 4px;
                    margin-right: 5px;
                  "
                ></div>
                <div style="font-size: 12px; margin-right: 5px">计划</div>
              </div>
              <div style="display: flex">
                <div
                  style="
                    width: 12px;
                    height: 12px;
                    background: #0460fb33;
                    border-radius: 4px;
                    margin-right: 5px;
                  "
                ></div>
                <div style="font-size: 12px">实际</div>
              </div>
            </div>
          </div>
        </template>
      </fullCalendar>
    </div>
  </div>
</template>
<script>
import listFullcalendar from "@/components/listFullcalendar";
import fullCalendar from "vue-fullcalendar";
import headers from "@/components/header";
export default {
  data() {
    return {
      region: "月",
      resource: "",
      monthData: [
        {
          startnum: "1",
          endnum: "2",
          title: "新开发区特殊地形高架检查 | 特殊巡视备", // 事件内容
          start: "2022-12-1", // 事件开始时间
          end: "2022-12-2", // 事件结束时间
          cssClass: "red", // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
        },
        {
          startnum: "25",
          endnum: "30",
          title: "110kV前牵线64#-73#杆塔登检",
          start: "2022-12-25",
          end: "2022-12-30",
          cssClass: "blue",
        },

        {
          startnum: "20",
          endnum: "22",
          title: "220kV祥前II线183#-204#",
          start: "2022-12-20",
          end: "2022-12-22",
          cssClass: "greage",
        },
      ],
    };
  },
  components: {
    listFullcalendar,
    fullCalendar,
    headers,
  },
  methods: {
    // 选择月份
    changeMonth(start, end, current) {
      console.log(
        "changeMonth",
        start.format(),
        end.format(),
        current.format()
      );
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      console.log("eventClick", event, jsEvent, pos);
    },
    // 点击当天
    dayClick(day, jsEvent) {
      console.log("dayClick", day, jsEvent);
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      console.log("moreCLick", day, events, jsEvent);
    },
  },
  mounted() {
    let list = $(".day-number");
    for (let item of list) {
      console.log($(item).text());
    }
    //  console.log($(".day-number").next().append(`<div>232323</div>`));
  },
};
</script>
<style scoped>
/deep/.greage {
  background-color: #70e17b !important;
}
/deep/.red {
  background-color: #5d7092 !important;
}
/deep/.blue {
  background-color: #5b8ff9 !important;
}

/deep/ .comp-full-calendar {
  display: flex;
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  flex-direction: column;
  max-width: none;
  box-sizing: border-box;
}
/deep/ .el-input--small .el-input__inner {
  height: 26px;
  line-height: 26px;
}
/deep/.full-calendar-body
  .dates
  .dates-events
  .events-week
  .events-day
  .event-box
  .event-item.is-end {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
/deep/ .today {
}
.fullmain {
  display: flex;
  flex: 1;

  background: #ffffff;
}
/deep/.week {
  height: 50px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.day-number {
  display: flex;
  flex: 1 !important;
}
/deep/.dates-events {
  display: flex;
  flex-direction: column;
  flex: 1;
}
</style>
