<template>
  <div class="classroom-list">
    <!---->
    <div class="classroom-filterArea">
      <Row>
        <i-col :xs="24" :sm="24" :md="24" :lg="6"><SmallCRTypePie /></i-col>
        <i-col :xs="24" :sm="24" :md="24" :lg="6" class="filter-col">
          <div @click="setHideClassroom('議課教室')">
            <div
              class="check-triangle"
              :class="{
                'uncheck-triangle': setHideScorateClassroomNow == true,
              }"
            ></div>
            <h1>5</h1>
            <p class="scorateroom-text">議課教室</p>
          </div>
        </i-col>
        <i-col :xs="24" :sm="24" :md="24" :lg="6" class="filter-col">
          <div @click="setHideClassroom('智慧教室')">
            <div
              class="check-triangle"
              :class="{ 'uncheck-triangle': setHideSmartClassroomNow == true }"
            ></div>
            <h1>66</h1>
             <p class="smartroom-text">智慧教室</p>
          </div>
        </i-col>
        <i-col :xs="24" :sm="24" :md="24" :lg="6" class="filter-col">
          <div @click="setHideClassroom('一般教室')">
            <div
              class="check-triangle"
              :class="{ 'uncheck-triangle': setHideNormalClassroomNow == true }"
            ></div>
            <h1>88</h1>
           <p class="normalroom-text">一般教室</p> 
          </div></i-col
        >
      </Row>
      <Row style="border-top: 1px solid  #ffffff2c" v-if=" setHideSmartClassroomNow==false||setHideScorateClassroomNow==false">
        <i-col :xs="24" :sm="24" :md="24" :lg="7"><SmallCRStatusPie /></i-col>
        <i-col :xs="24" :sm="24" :md="24" :lg="4" class="filter-col">
          <div @click="setSortListBy('正常使用中')">
            <v-icon
              iconClass="sort-down"
              class="sort-icon"
              v-if="this.setSortBy == '正常使用中'"
            />
            <h1>19</h1>
            <p class='sortText-using'>課堂中</p>
          </div></i-col
        >
        <i-col :xs="24" :sm="24" :md="24" :lg="4" class="filter-col">
          <div @click="setSortListBy('正常閒置中')">
            <v-icon
              iconClass="sort-down"
              class="sort-icon"
              v-if="this.setSortBy == '正常閒置中'"
            />
            <h1>20</h1>
             <p class='sortText-noUsing'> 閒置中</p>
           
          </div></i-col
        >
        <i-col :xs="24" :sm="24" :md="24" :lg="4" class="filter-col">
          <div @click="setSortListBy('修理')">
            <v-icon
              iconClass="sort-down"
              class="sort-icon"
              v-if="this.setSortBy == '修理'"
            />
            <h1>2</h1>
           <p class='sortText-fixing'> 維修中</p>
          </div></i-col
        >
        <i-col :xs="24" :sm="24" :md="24" :lg="4" class="filter-col"
          ><div @click="setSortListBy('未開機')">
            <v-icon
              iconClass="sort-down"
              class="sort-icon"
              v-if="this.setSortBy == '未開機'"
            />
            <h1>10</h1>
            <p class='sortText-unOpening'> 未開機</p>
           
          </div></i-col
        >
      </Row>
    </div>
    <!--教師清單-->
    <div
      class="list-wrapper"
      :class="{
        'open-filter': showfilter == true,
        'fs-list-wrapper': isFullscreenNow == true,
        'hide-statusfilter':setHideSmartClassroomNow==true&&setHideScorateClassroomNow==true

      }"
    >
      <!--智慧教室優先顯示-->
      <!-- @click="setClassroomInfo(room)"-->
      <div
        class="list-item"
        v-for="(room, classroomId) in mockdata"
        :key="classroomId"
        @click="getMapInfo == true ? setClassroomInfo(room) : ''"
        v-show="unhideSmartCRCondition(room)"
        :class="{
          'list-item-selected':
            getOpenClassroomInfo == true &&
            getClassroomInfo.classroomName == room.classroomName,
          'list-item-hover': getOpenClassroomInfo == true,
        }"
      >
        <div class="classroomName-row">
          <p class="classroomName-col">
            <span
              class="badge"
              :style="{
                'background-color':
                  room.toolbox.Scorates == true
                    ? 'rgb(8, 133, 105)'
                    : 'rgb(0, 109, 192)',
              }"
              >{{ room.toolbox.Scorates == true ? "議課" : "智慧" }}</span
            ><span class="classroomName">{{ room.classroomName }}教室</span>
          </p>
          <div class="status-col" >
            <div v-if="room.status != '修理'" class="hotdegree">
              {{ room.todayCourseNum }}
            </div>
           
            <div class='status-noUsing' v-if="room.status == '正常閒置中'">閒置中</div>
            <div class='status-using' v-else-if="room.status == '正常使用中'">課堂中</div>
            <div class='status-fixing' v-else-if="room.status == '修理'">維修中</div>
            <div class='status-unOpening' v-else>未開機</div>
          
          </div>
        </div>

        <div class="classroom-status">
          <div class="current-status">
            <!--p v-if="room.status == '修理'" class="fix-status">
              <v-icon iconClass="fix" class="fix-icon" />報修中
            </p-->
            <p v-if="room.status == '正常使用中'" class="teachNow-status">
              <v-icon iconClass="teachNow" class="teachNow-icon" />{{
                room.optime
              }}
              <span class="teachNow-name"> {{ room.currentUserName }} </span>
            </p>
          </div>
        </div>
        <div class="classroom-status">
          <p class="license">
            {{ room.hiteachVer }}&nbsp;{{ room.hiteachVerNum }}．{{
              room.license
            }}
          </p>
          <div class="toolbox">
            <v-icon
              iconClass="board"
              :class="{ 'icon-light': room.toolbox.Haboard == true }"
            />
            <v-icon
              iconClass="IRS"
              :class="{ 'icon-light': room.toolbox.IRS == true }"
            />
            <v-icon
              iconClass="ezStation"
              :class="{ 'icon-light': room.toolbox.ezStation == true }"
            />
          </div>
        </div>
      </div>
      <!--接著秀出一般教室-->
      <div v-if="showfilter != true">
        <div
          class="list-item"
          v-for="(room, index) in mockdata"
          :key="'a' + index"
          style="cursor: not-allowed"
          v-show="setHideNormalClassroomNow == false && room.isSmart == true"
        >
          <p>
            <span class="badge">一般</span
            ><span class="classroomName">{{ room.classroomName }}教室</span>
          </p>
        </div>
      </div>
      <div
        v-if="
          setHideSmartClassroomNow == true &&
          setHideScorateClassroomNow == true &&
          setHideNormalClassroomNow == true
        "
        class="no-data-text"
      >
        <img src="../../../../assets/icon/no_data.png" width="120" />
        <p style="color: #808080">暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import scboardData from "@/mock/scboard";
import SmallCRStatusPie from "./SmallCRStatusPie";
import SmallCRTypePie from "./SmallCRTypePie";
import ClassroomMultiFilter from "./ClassroomMultiFilter";
import { mapGetters, mapMutations } from "vuex";

export default {
  props: ["showfilter", "isFullscreenNow"],
  name: "Classroomlist",
  created() {
    //一開始時把課堂中的項目先排在最上面
    this.setSortListBy("正常使用中");
  },
  data() {
    return {
      noData: false,
      currentFilterNum: 0,
      mockdata: scboardData.scboardData.classroomList,
      basicInfoTabNow: "所有教室", //目前所點擊的tab按鈕

      //一開始不隱藏所有類型的教室
      setHideScorateClassroomNow: false,
      setHideSmartClassroomNow: false,
      setHideNormalClassroomNow: false,

      //排序的條件
      setSortBy: "正常使用中",

      basicdata: [
        {
          name: "所有教室",
          num: 133,
        },
        {
          name: "一般教室",
          num: 77,
        },
        {
          name: "智慧教室",
          num: 33,
        },
        {
          name: "議課教室",
          num: 23,
        },
        {
          name: "運行中",
          num: 36,
        },
      ],
    };
  },
  components: {
    ClassroomMultiFilter,
    SmallCRStatusPie,
    SmallCRTypePie,
  },
  watch: {
    showfilter: function (value) {
      if (value == true) {
        this.basicInfoTabNow = "所有教室";
      }
    },
  },

  computed: {
    ...mapGetters({
      getOpenClassroomInfo: "scboard/getOpenClassroomInfo",
      getClassroomInfo: "scboard/getClassroomInfo",
      getMorefilterCondition: "scboard/getMorefilterCondition",
      getMapInfo: "scboard/getMapInfo",
    }),
  },
  methods: {
    ...mapMutations({
      setClassroomInfo: "scboard/setClassroomInfo",
    }),
    getNodata(val) {
      //console.log(val)
      if (val == "noData") {
        this.noData = true;
      } else this.noData = false;
    },
    setInfoBtnTab(name) {
      this.basicInfoTabNow = name;
    },
    setSortListBy(status) {
      console.log(this.mockdata);
      this.setSortBy = status;
      this.mockdata = this.mockdata.sort(function (a, b) {
        return a.status == status ? -1 : 1;
      });
      if (this.getMapInfo == true) {
        let tempArr = [];
        for (let i = 0; i < this.mockdata.length; i++) {
          if (this.mockdata[i].isSmart == true) {
            tempArr.push(this.mockdata[i]);
          }

          this.setClassroomInfo(tempArr[0]);
        }
      }
    },
    setHideClassroom(name) {
      if (name == "議課教室") {
        this.setHideScorateClassroomNow = !this.setHideScorateClassroomNow;
        console.log("隱藏議課教室" + this.setHideScorateClassroomNow);
      }
      if (name == "智慧教室") {
        this.setHideSmartClassroomNow = !this.setHideSmartClassroomNow;
        console.log("隱藏智慧教室" + this.setHideSmartClassroomNow);
      }
      if (name == "一般教室") {
        this.setHideNormalClassroomNow = !this.setHideNormalClassroomNow;
        console.log("隱藏一般教室" + this.setHideNormalClassroomNow);
      }
    },

    //隱藏智慧教室的多重條件
    unhideSmartCRCondition(item) {
      //隱藏議課教室，但不隱藏智慧教室
      if (
        this.setHideScorateClassroomNow == true &&
        this.setHideSmartClassroomNow == false
      ) {
        return item.isSmart == true && item.toolbox.Scorates == false;
        //隱藏智慧教室，但不隱藏議課教室
      }
      if (
        this.setHideSmartClassroomNow == true &&
        this.setHideScorateClassroomNow == false
      ) {
        return item.isSmart == true && item.toolbox.Scorates == true;
        //全部隱藏
      }
      if (
        this.setHideSmartClassroomNow == true &&
        this.setHideScorateClassroomNow == true
      ) {
        return false;
      } else return item.isSmart == true;
    },

    //更多選單第一個條件
    setfilterClassroomType(item) {
      if (this.getMorefilterCondition.filterClassroomType == "全部") {
        return true;
      }
      //選擇智慧教室
      else if (this.getMorefilterCondition.filterClassroomType == "智慧教室") {
        return item.isSmart == true && item.toolbox.Scorates == false;
      }
      //選擇議客教室
      else if (this.getMorefilterCondition.filterClassroomType == "議課教室") {
        return item.isSmart == true && item.toolbox.Scorates == true;
      }
    },
    //更多選單第二個條件
    setfilterClassroomStatus(item) {
      if (this.getMorefilterCondition.filterClassroomStatus == "全部") {
        return true;
      } else if (
        this.getMorefilterCondition.filterClassroomStatus == "運行中"
      ) {
        return item.status == "正常使用中";
      } else if (
        this.getMorefilterCondition.filterClassroomStatus == "閒置中"
      ) {
        return item.status == "正常閒置中";
      } else if (
        this.getMorefilterCondition.filterClassroomStatus == "報修中"
      ) {
        return item.status == "修理";
      }
    },
    //更多選單第三個條件
    setHaveHaboard(item) {
      if (this.getMorefilterCondition.filterEquip.includes("Haboard")) {
        return item.toolbox.Haboard == true;
      } else return true;
    },

    setHaveIRS(item) {
      if (this.getMorefilterCondition.filterEquip.includes("IRS")) {
        return item.toolbox.IRS == true;
      } else return true;
    },
    setHaveEzStation(item) {
      if (this.getMorefilterCondition.filterEquip.includes("ezStation")) {
        return item.toolbox.ezStation == true;
      } else return true;
    },
    setHaveScorate(item) {
      if (this.getMorefilterCondition.filterEquip.includes("Scorates")) {
        return item.toolbox.Scorates == true;
      } else return true;
    },
    setUpdate(item) {
      if (this.getMorefilterCondition.filterUpdate == "全部") return true;
      else if (this.getMorefilterCondition.filterUpdate == "可更新") {
        return item.status == "修理";
      } else if (this.getMorefilterCondition.filterUpdate == "無需更新")
        return item.status != "修理";
    },
  },
};
</script>

<style lang='less'>
@import "./Styles/Classroomlist.less";
</style>