<template>
  <div class="trainingPlan">
    <h2 class="title">泵站值班计划</h2>
    <div class="searchBox">
      <n-space>
        <n-select
          v-model:value="searchValue"
          filterable
          :options="options"
          style="width: 250px"
        />
      </n-space>
    </div>
    <div class="content">
      <div class="card_box">
        <div class="card_list" v-for="(item, index) in cardList" :key="index">
          <div class="card">
            <h3>{{ item }}</h3>
          </div>
          <div class="empty"></div>
        </div>
      </div>

      <div class="quarter">
        <div
          class="beng_details"
          v-for="(item, index) in quarterList"
          :key="index"
        >
          <div class="month_head">
            <span>{{ index + 1 }}月 </span>
          </div>
          <div class="beng_body">
            <span
              :class="[
                item.plan == '完成50%'
                  ? 'unPlan'
                  : item.plan == '完成75%'
                  ? 'plan'
                  : 'done',
              ]"
              @click="chakanDetails(item, index)"
              >{{ item.plan }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="result">
      <div>
        <div class="result_title">
          <span>{{ searchValue }}{{ year }}年{{ mouth }}月份培训结果表</span>
          <span class="color1">计划{{ planNum }}次，实际完成{{ done }}次</span
          ><span class="color2">完成率{{ completionRate }}</span>
        </div>
        <div class="result_body">
          <div class="table_item" v-for="(modalItem, a) in modalList" :key="a">
            <div class="weeks">
              <span v-if="a != 0">周{{ modalItem.week }}</span>
              <span v-else>{{ modalItem.week }}</span>
            </div>
            <div class="dates" :class="[a === 0 ? 'last' : '']">
              <div class="border">{{ modalItem.date }}</div>
              <div class="border">{{ modalItem.lecturer }}</div>
              <div class="border">{{ modalItem.time }}</div>
              <div class="border">{{ modalItem.number }}</div>
              <div class="border">
                <div class="statusIcon" v-if="modalItem.status === 0">
                  <n-icon size="14">
                    <Checkmark />
                  </n-icon>
                </div>
                <div
                  class="statusIcon statusIcon2"
                  v-else-if="modalItem.status === 1"
                >
                  <n-icon size="14">
                    <Close />
                  </n-icon>
                </div>
                <div v-else>
                  {{ modalItem.status }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { Checkmark, Close } from "@vicons/ionicons5";
import { useRouter } from "vue-router";

export default {
  name: "trainingPlan",
  components: {
    Checkmark,
    Close,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      searchValue: "西渠闸门",
      options: [
        { label: "西渠闸门", value: "荣军泵站" },
        { label: "解放大道澳门路闸", value: "解放大道澳门路闸" },
        { label: "中山大道前进四路闸", value: "中山大道前进四路闸" },
        { label: "王家墩污水泵站", value: "王家墩污水泵站" },
        { label: "后湖二期泵站", value: "后湖二期泵站" },
        { label: "铁路桥泵站", value: "铁路桥泵站" },
        { label: "机场河补水泵站", value: "机场河补水泵站" },
        { label: "常青公园地下调蓄池", value: "常青公园地下调蓄池" },
        { label: "黄孝河CSO调蓄", value: "黄孝河CSO调蓄" },
        { label: "机场河CSO调蓄", value: "机场河CSO调蓄" },
      ],
      cardList: [
        "一季度培训计划",
        "二季度培训计划",
        "三季度培训计划",
        "四季度培训计划",
      ],
      year: "2022",
      mouth: 1,
      planNum: 17,
      done: 13,
      completionRate: "75%",
      quarterList: [
        {
          plan: "完成50%",
        },
        {
          plan: "完成50%",
        },
        {
          plan: "完成50%",
        },
        {
          plan: "完成100%",
        },
        {
          plan: "完成75%",
        },
        {
          plan: "完成100%",
        },
        {
          plan: "完成100%",
        },
        {
          plan: "完成75%",
        },
        {
          plan: "完成75%",
        },
        {
          plan: "完成50%",
        },
        {
          plan: "完成100%",
        },
        {
          plan: "完成75%",
        },
      ],
      tableTitle: {
        week: "星期",
        date: "日期",
        number: "参与人数",
        lecturer: "培训讲师",
        status: "完成情况",
        time: "培训时间",
      },
      modalList: [],
    });

    const chakanDetails = (item, index) => {
      state.mouth = index + 1;
      sessionStorage.setItem("mouth", state.mouth);
      getMouth(index + 1);
      setTimeout(() => {
        router.push({
          path: "/trainingDetails",
          query: {
            id: index,
          },
        });
      }, 1000);
    };
    const getMouth = (m) => {
      let date = new Date(2021, m - 1);
      let year = date.getFullYear();
      let lastDay = new Date(year, m, 0).getDate(); //获得是标准时间,需要getDate()获得天数
      (state.modalList = Array.apply(null, { length: lastDay }).map(
        (_, index) => ({
          week: new Array("日", "一", "二", "三", "四", "五", "六")[
            new Date(2022, m - 1, index + 1).getDay()
          ],
          date: index + 1,
          number: 17,
          lecturer: "张三",
          status: Math.floor(Math.random() * (2 - 0)) + 0,
          time: "15:00",
        })
      )),
        state.modalList.unshift(state.tableTitle);
    };
    onMounted(() => {
      state.mouth = sessionStorage.getItem("mouth") || 1;
      getMouth(state.mouth);
    });
    return {
      ...toRefs(state),
      chakanDetails,
      getMouth,
    };
  },
};
</script>

<style lang="less" scoped>
.trainingPlan {
  height: 100%;
  .title {
    padding-left: 20px;
    width: 100%;
    line-height: 50px;
    border-radius: 3px;
    background: linear-gradient(0deg, #163f7e, #3e79d5);
    font-size: 18px;
    font-weight: normal;
    color: #f4f8fb;
  }
  .searchBox {
    margin: 20px 0;
  }
  .content {
    position: relative;
    margin-top: 20px;
    height: 240px;
    .card_box {
      display: flex;
      height: 240px;
      .card_list {
        margin: 10px;
        flex: 1;
        box-shadow: 0px 1px 7px 0px #c8dcf5;

        .card {
          height: 100px;
          background: var(--color-card);
          h3 {
            padding-bottom: 15px;
            line-height: 50px;
            font-size: 18px;
            color: #f4f8fb;
            text-align: center;
            font-weight: normal;
          }
        }
        .empty {
          height: 120px;
          background: var(--bg-menu);
        }
      }
    }
    .quarter {
      position: absolute;
      top: 80px;
      left: 0;
      display: flex;
      width: 100%;
      .beng_details {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .month_head {
          span {
            width: 52px;
            text-align: center;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #f4f7fa;
          }
        }
        .beng_body {
          line-height: 100px;
          // background-color: var(--bg-menu);

          span {
            padding: 5px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            color: #ffffff;
            border-radius: 3px;
            cursor: pointer;
            &.done {
              background: #549bfb;
            }
            &.plan {
              background: #16a25e;
            }
            &.unPlan {
              background: #ffada1;
            }
          }
        }
      }
    }
  }

  .result {
    margin: 30px 10px 10px;
    width: calc(100% - 20px);
    height: 330px;
    background: var(--bg-menu);
    opacity: 0.92;
    border-radius: 16px;
    box-shadow: 0px 1px 7px 0px rgba(88, 116, 154, 0.24);
    > div {
      .result_title {
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #91a2ae;
        background: var(--color-rgba2);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        span {
          font-size: 14px;
          color: var(--color-title);
          font-weight: 600;
          margin-right: 5px;
        }
        .color1 {
          color: #ce7669;
        }
        .color2 {
          color: #399455;
        }
      }
      .result_body {
        padding: 0 10px;
        display: flex;
        .table_item {
          flex: 1;
          > div {
            text-align: center;
          }
          .weeks {
            line-height: 50px;
          }
          .dates {
            border-right: 1px solid;
            border-top: 1px solid;
            border-color: var(---color-text);
            &.last {
              border-left: 1px solid;
              border-color: var(---color-text);
              width: 70px;
            }
            .border {
              line-height: 40px;
              border-bottom: 1px solid;
              border-color: var(---color-text);
              display: flex;
              justify-content: center;
              align-items: center;
              .statusIcon {
                width: 20px;
                height: 20px;
                background: #399455;
                border-radius: 50%;
                margin: 10px 0;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
              }
              .statusIcon2 {
                background: #ce7669;
              }
            }
          }
        }
      }
    }
  }
}
</style>