<template>
  <div class="classroom-multifilter">
    <div class="filter-wrap">
      <div class="filter-item">
        <span class="filter-title">教室類型：</span>
        <RadioGroup v-model="filterClassroomType" type="button">
          <Radio label="全部">全部</Radio>
          <Radio label="智慧教室">智慧教室</Radio>
          <Radio label="議課教室">議課教室</Radio>
        </RadioGroup>
      </div>

      <div class="filter-item">
        <span class="filter-title">教室狀態：</span>
        <RadioGroup v-model="filterClassroomStatus" type="button">
          <Radio label="全部">全部</Radio>
          <Radio label="運行中">運行中</Radio>
          <Radio label="報修中">報修中</Radio>
          <Radio label="閒置中">閒置中</Radio>
        </RadioGroup>
      </div>
      <div class="filter-item">
        <span class="filter-title">搭載設備：</span>
        <CheckboxGroup v-model="filterEquip" @on-change="onChangfilterEquip"
          ><!--iview Checkbox event-->
          <Checkbox label="全部">全部</Checkbox>
          <Checkbox label="Haboard"> <v-icon iconClass="board" /> </Checkbox>
          <Checkbox label="IRS"><v-icon iconClass="IRS" /> </Checkbox>
          <Checkbox label="ezStation"
            ><v-icon iconClass="ezStation" />
          </Checkbox>
          <Checkbox label="Scorates"><v-icon iconClass="socrate" /> </Checkbox>
        </CheckboxGroup>
      </div>
      <div class="filter-item">
        <span class="filter-title">軟體更新：</span>
        <RadioGroup v-model="filterUpdate" type="button">
          <Radio label="全部">全部</Radio>
          <Radio label="可更新">可更新</Radio>
          <Radio label="無需更新">無需更新</Radio>
        </RadioGroup>
      </div>
      <div class="clear-btn" @click="resetFilter">
        <v-icon iconClass="close" class="close-icon" />&nbsp;清除篩選
      </div>
    </div>
    <div class="filters-condition">
      當前篩選：

      <span class="condition-item" v-if="filterClassroomType != '全部'">{{
        filterClassroomType
      }}</span>

      <span class="condition-item" v-if="filterClassroomStatus != '全部'">{{
        filterClassroomStatus
      }}</span>

      <span
        class="condition-item"
        v-for="(item, index) in filterEquip"
        :key="`c3${index}`"
        v-show="item != '全部'"
      >
        <v-icon v-if="item == 'Haboard'" iconClass="board" />
        <v-icon iconClass="IRS" v-if="item == 'IRS'" />

        <v-icon iconClass="ezStation" v-if="item == 'ezStation'" />

        <v-icon iconClass="socrate" v-if="item == 'Scorates'" />
      </span>

      <span class="condition-item" v-if="filterUpdate != '全部'">{{
        filterUpdate
      }}</span>
      <span class="filter-num" v-if="temphideNum == false"
        >{{ currentFilterNum }}間</span
      ><span class="filter-num" v-else>計算中...</span>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import scboardData from "@/mock/scboard";
export default {
  name: "ClassroomMultiFilter",
  data() {
    return {
      currentFilterNum: 0,
      temphideNum: false,
      mockdata: scboardData.scboardData.classroomList,
      mockdataTempSaveByFilterNow: [],
      filterClassroomType: "全部",
      filterClassroomStatus: "全部",
      filterEquip: ["全部"],
      filterUpdate: "全部",
    };
  },
  created() {
    //打開更多篩選，初始化預設指顯示智慧教室，一般教室不做更多篩選
    let temp = [];
    for (let i = 0; i < this.mockdata.length; i++) {
      if (this.mockdata[i].isSmart == true) {
        temp.push(this.mockdata[i]);
      }
    }
    this.currentFilterNum = temp.length;
  },
  computed: {
    ...mapGetters({
      getMorefilterCondition: "scboard/getMorefilterCondition",
    }),
  },
  watch: {
    currentFilterNum: function (value) {
      if (value == 0) {
        this.$emit("isNoData", "noData");
      } else this.$emit("isNoData", "haveData");
    },
    filterClassroomType: function (value) {
      this.sentfilterConfitiontoStore();
      this.multifilterCalc();
    },
    filterClassroomStatus: function () {
      this.sentfilterConfitiontoStore();
      this.multifilterCalc();
    },
    filterEquip: function () {
      this.sentfilterConfitiontoStore();
      this.multifilterCalc();
    },
    filterUpdate: function () {
      this.sentfilterConfitiontoStore();
      this.multifilterCalc();
    },
  },
  methods: {
    ...mapMutations({
      setMorefilterCondition: "scboard/setMorefilterCondition",
    }),
    sentfilterConfitiontoStore() {
      let filterCondition = {
        filterClassroomType: this.filterClassroomType,
        filterClassroomStatus: this.filterClassroomStatus,
        filterEquip: this.filterEquip,
        filterUpdate: this.filterUpdate,
      };
      this.setMorefilterCondition(filterCondition);
    },
    resetFilter() {
      this.filterClassroomType = "全部";
      this.filterClassroomStatus = "全部";
      this.filterEquip = ["全部"];
      this.filterUpdate = "全部";
    },
    onChangfilterEquip() {
      if (
        this.filterEquip !== ["全部"] &&
        this.filterEquip.indexOf("全部") === 0
      ) {
        this.filterEquip.splice(this.filterEquip.indexOf("全部"), 1);
      } else if (this.filterEquip.indexOf("全部") > 0) {
        this.filterEquip = ["全部"];
      }
    },
    multifilterCalc() {
      this.setfilterClassroomType();
      this.setfilterClassroomStatus();
      this.setUpdate();
      this.setEqip();
    },
    setfilterClassroomType() {
      this.mockdataTempSaveByFilterNow = [];
      for (let i = 0; i < this.mockdata.length; i++) {
        if (this.filterClassroomType == "全部") {
          let temp = [];
          for (let i = 0; i < this.mockdata.length; i++) {
            if (this.mockdata[i].isSmart == true) {
              temp.push(this.mockdata[i]);
            }
          }
          this.mockdataTempSaveByFilterNow = temp;
        }
        //選擇智慧教室
        else if (this.filterClassroomType == "智慧教室") {
          if (
            this.mockdata[i].isSmart == true &&
            this.mockdata[i].toolbox.Scorates == false
          ) {
            this.mockdataTempSaveByFilterNow.push(this.mockdata[i]);
          }
        }
        //選擇議客教室
        else if (this.filterClassroomType == "議課教室") {
          if (
            this.mockdata[i].isSmart == true &&
            this.mockdata[i].toolbox.Scorates == true
          ) {
            this.mockdataTempSaveByFilterNow.push(this.mockdata[i]);
          }
        }
        this.currentFilterNum = this.mockdataTempSaveByFilterNow.length;
      }
    },

    setfilterClassroomStatus() {
      let filter01 = this.mockdataTempSaveByFilterNow;
      let temp01 = [];
      for (let i = 0; i < filter01.length; i++) {
        if (this.filterClassroomStatus == "全部") {
          temp01 = this.mockdataTempSaveByFilterNow;
        } else if (this.filterClassroomStatus == "運行中") {
          if (filter01[i].status == "正常使用中") {
            temp01.push(filter01[i]);
          }
        } else if (this.filterClassroomStatus == "閒置中") {
          if (filter01[i].status == "正常閒置中") {
            temp01.push(filter01[i]);
          }
        } else if (this.filterClassroomStatus == "報修中") {
          if (filter01[i].status == "修理") {
            temp01.push(filter01[i]);
          }
        }
      }
      this.currentFilterNum = temp01.length;
      this.mockdataTempSaveByFilterNow = temp01;
    },
    setUpdate() {
      let filter01 = this.mockdataTempSaveByFilterNow;
      let temp01 = [];
      for (let i = 0; i < filter01.length; i++) {
        if (this.filterUpdate == "全部") {
          temp01 = this.mockdataTempSaveByFilterNow;
        } else if (this.filterUpdate == "可更新") {
          if (filter01[i].status == "修理") {
            temp01.push(filter01[i]);
          }
        } else if (this.filterUpdate == "無需更新") {
          if (filter01[i].status != "修理") {
            temp01.push(filter01[i]);
          }
        }
      }
      this.currentFilterNum = temp01.length;
      this.mockdataTempSaveByFilterNow = temp01;
    },
    setEqip() {
      //未加入條件同時發生之陣列控制
      let filter01 = this.mockdataTempSaveByFilterNow;
      let temp01 = [];
      for (let i = 0; i < filter01.length; i++) {
        if (this.filterEquip.includes("全部") == true) {
          this.temphideNum = false;
          //單一選項
        } else this.temphideNum = true;
      }
    },
  },
};
</script>

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