<template>
  <div class="maintenanceBot" :class="[sysTheme ? 'dack' : '']">
    <div class="title">巡检排班</div>
    <div class="search_box">
      <n-space>
        <n-select
          size="small"
          v-model:value="searchValue1"
          filterable
          :options="options1"
          placeholder="请选择泵闸站"
          style="width: 200px"
        />
        <n-select
          size="small"
          v-model:value="searchValue2"
          filterable
          :options="options2"
          placeholder="请选择月份"
          style="width: 200px"
          @update:value="changevalue2"
        />
      </n-space>
    </div>
    <div class="table_content">
      <ul class="lenged">
        <li><span class="done"></span>已巡查</li>
        <li><span class="undone"></span>带巡查</li>
        <li><span class="omission"></span>有遗漏</li>
      </ul>
      <div class="table_box">
        <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.inspector }}</div>
            <div class="border">
              <div class="statusIcon" v-if="modalItem.status === 0">
                <n-icon size="14" color="#fff">
                  <Checkmark />
                </n-icon>
              </div>
              <div
                class="statusIcon statusIcon2"
                v-else-if="modalItem.status === 1"
              >
                <n-icon size="14" color="#fff">
                  <Close />
                </n-icon>
              </div>
              <div
                class="statusIcon statusIcon3"
                v-else-if="modalItem.status === 2"
              >
                <n-icon size="14" color="#fff">
                  <HelpOutline />
                </n-icon>
              </div>
              <div v-else>
                {{ modalItem.result }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, h, onMounted, computed } from "vue";
import { Checkmark, Close, HelpOutline } from "@vicons/ionicons5";
import { useStore } from "vuex";

export default {
  name: "maintenanceBottom",
  components: {
    Checkmark,
    Close,
    HelpOutline,
  },
  setup() {
    let store = useStore();

    const state = reactive({
      searchValue1: "西渠闸门",
      searchValue2: "二月",
      options1: [
       { label: "西渠闸门", value: "0" },
        { label: "解放大道澳门路闸", value: "1" },
        { label: "中山大道前进四路闸", value: "2" },
        { label: "王家墩污水泵站", value: "3" },
        { label: "后湖二期泵站", value: "4" },
        { label: "铁路桥泵站", value: "5" },
        { label: "机场河补水泵站", value: "6" },
        { label: "常青公园地下调蓄池", value: "7" },
        { label: "黄孝河CSO调蓄", value: "8" },
        { label: "机场河CSO调蓄", value: "9" },
      ],
      options2: [
        { label: "一月", value: 0 },
        { label: "二月", value: 1 },
        { label: "三月", value: 2 },
        { label: "四月", value: 3 },
        { label: "五月", value: 4 },
        { label: "六月", value: 5 },
        { label: "七月", value: 6 },
        { label: "八月", value: 7 },
        { label: "九月", value: 8 },
        { label: "十月", value: 9 },
        { label: "十一月", value: 10 },
        { label: "十二月", value: 11 },
      ],
      modalList: [],
      tableTitle: {
        week: "星期",
        date: "日期",
        inspector: "巡检人",
        result: "结果",
      },
      sysTheme: "",
    });
    state.sysTheme = computed(() => {
      return store.getters.sysTheme;
    });
    const getCurMouth = () => {};
    const changevalue2 = (value) => {
      let date = new Date(2022, value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1; // 月
      console.log(month);
      let lastDay = new Date(year, value + 1, 0).getDate();
      console.log(date);
      console.log();
      state.modalList = Array.apply(null, { length: lastDay }).map(
        (_, index) => ({
          week: new Array("日", "一", "二", "三", "四", "五", "六")[
            new Date(2022, value, index + 1).getDay()
          ],
          date: index + 1,
          inspector: "张三",
          status: Math.floor(Math.random() * (3 - 0)) + 0,
        })
      );
      state.modalList.unshift(state.tableTitle);
      console.log(state.modalList);
    };
    const getData = () => {
      console.log(state.value);
    };
    onMounted(() => {
      getCurMouth();
      changevalue2(1);
    });
    return {
      ...toRefs(state),
      getCurMouth,
      getData,
      changevalue2,
    };
  },
};
</script>

<style lang="less" scoped>
.maintenanceBot {
  padding: 0 15px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(100% - 535px);
  height: 316px;
  background: url("../../../../assets/Imgs/yunwei_xunjianBg.png");
  background-size: 100% 100%;
  .title {
    padding-left: 10px;
    line-height: 44px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: var(--color-title);
  }
  .search_box {
    margin: 10px;
  }
  .table_content {
    position: relative;
    background: var(--color-rgba2);
    height: 200px;
    border-radius: 10px;
    .lenged {
      position: absolute;
      right: 10px;
      top: -40px;
      width: 250px;
      display: flex;
      li {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        // color: var(--color-yunwei);

        span {
          margin-right: 5px;
          width: 20px;
          height: 10px;
          background: linear-gradient(
            0deg,
            #54fafd 0%,
            #69da8e 0%,
            #69da8e 100%
          );
          border-radius: 3px;
        }
        .undone {
          background: linear-gradient(
            0deg,
            #69da8e 0%,
            #1f96db 0%,
            #319fde 100%
          );
        }
        .omission {
          background: linear-gradient(
            0deg,
            #69da8e 0%,
            #fe5c5c 0%,
            #fe5c5c 100%
          );
        }
      }
    }
    .table_box {
      padding: 5px;
      width: 100%;
      display: flex;
      background: var(--color-rgba3);
      position: absolute;
      bottom: 0;
      border-radius: 10px;
    }
    .table_item {
      flex: 1;
      > div {
        text-align: center;
        color: var(--color-yunwei);
      }
      .weeks {
        line-height: 40px;
      }
      .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: 60px;
        }
        .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: #69da8e;
            border-radius: 50%;
            margin: 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .statusIcon2 {
            background: #ff7b80;
          }
          .statusIcon3 {
            background: #3c82eb;
          }
        }
      }
    }
  }
}
.dack {
  background: url("../../../../assets/Imgs/paiban_dackBg.png");
}
</style>