<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 == '未计划'
                  ? 'unPlan'
                  : item.plan == '已计划'
                  ? 'plan'
                  : 'done',
              ]"
              @click="chakanDetails(index)"
              >{{ item.plan }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="result">
      <div>
        <div class="result_title">
          <span>{{ searchValue }}{{ year }}年{{ mouth }}月份培训结果表</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>
              <n-popconfirm
                :show-icon="false"
                :negative-text="null"
                @positive-click="sureDuty('morning', a)"
              >
                <template #trigger>
                  <div class="border">{{ modalItem.morning }}</div>
                </template>
                <div class="selectBox">
                  <!-- <p>早班</p> -->
                  <n-select
                    placeholder="选择值班人"
                    v-model:value="selectDuty"
                    filterable
                    :options="dutyOptions"
                  />
                </div>
              </n-popconfirm>
              <n-popconfirm
                :show-icon="false"
                :negative-text="null"
                @positive-click="sureDuty('afternoon', a)"
              >
                <template #trigger>
                  <div class="border">{{ modalItem.afternoon }}</div>
                </template>
                <div class="selectBox">
                  <!-- <p>中班</p> -->
                  <n-select
                    placeholder="选择值班人"
                    v-model:value="selectDuty"
                    filterable
                    :options="dutyOptions"
                  />
                </div>
              </n-popconfirm>
              <n-popconfirm
                :show-icon="false"
                :negative-text="null"
                @positive-click="sureDuty('evening', a)"
              >
                <template #trigger>
                  <div class="border">{{ modalItem.evening }}</div>
                </template>
                <div class="selectBox">
                  <!-- <p>晚班</p> -->
                  <n-select
                    placeholder="选择值班人"
                    v-model:value="selectDuty"
                    filterable
                    :options="dutyOptions"
                  />
                </div>
              </n-popconfirm>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";

export default {
  name: "trainingPlan",

  setup() {
    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: [
        "一季度培训计划",
        "二季度培训计划",
        "三季度培训计划",
        "四季度培训计划",
      ],
      quarterList: [
        {
          plan: "已计划",
        },
        {
          plan: "未计划",
        },
        {
          plan: "已计划",
        },
        {
          plan: "已计划",
        },
        {
          plan: "未计划",
        },
        {
          plan: "已计划",
        },
        {
          plan: "未计划",
        },
        {
          plan: "已计划",
        },
        {
          plan: "未计划",
        },
        {
          plan: "未计划",
        },
        {
          plan: "已计划",
        },
        {
          plan: "未计划",
        },
      ],
      year: 2022, // 年
      mouth: 1, // 月
      tableTitle: {
        week: "星期",
        date: "日期",
        morning: "早08-11",
        afternoon: "中11-13",
        evening: "晚13-18",
      },
      modalList: [],
      selectDuty: "张三",
      dutyOptions: [
        { label: "张三", value: "0" },
        { label: "李四", value: "1" },
        { label: "王五", value: "2" },
      ],
    });
    const chakanDetails = (index) => {
      state.mouth = index + 1;
      getMouth(state.mouth);
    };
    const getMouth = (m) => {
      let date = new Date(2022, 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,
          morning: index <= 10 ? "张三" : "",
          afternoon: "",
          evening: "",
        })
      )),
        state.modalList.unshift(state.tableTitle);
      console.log(state.modalList);
    };
    // 确认提交值班人
    const sureDuty = (a) => {
      console.log(a);
      console.log("确认提交");
    };
    onMounted(() => {
      chakanDetails(0);
    });
    return {
      ...toRefs(state),
      chakanDetails,
      getMouth,
      sureDuty,
    };
  },
};
</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: 200px;
    .card_box {
      display: flex;
      height: 200px;
      .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: 80px;
          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: #71c38a;
            }
            &.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;
            cursor: pointer;
          }
          .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 {
              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;
              }
              .statusIcon2 {
                background: #ce7669;
              }
            }
          }
        }
      }
    }
  }
}
.selectBox {
  margin: 20px;
}
</style>