<template>
  <div class="hiteachAuth-list">
    <!-- 新增知识点弹窗 -->
    <Modal
      id="hiteachAuth-modal"
      ref="pointRef"
      v-model="isOpenRemove"
      :title="title"
      
    >
      <p>{{$t("serviceDriveAuth['當前您所選中的PC']")}}【{{ currentConfirmRemovePC }}】{{$t("serviceDriveAuth['，確定解除授權?']")}}</p>
      <p>{{$t("serviceDriveAuth['解除授權後，可在教室中的電腦再次進行綁定授權。']")}}</p>

      <div slot="footer">
        <Button type="text" @click="isOpenRemove = false">{{$t("serviceDriveAuth['取消']")}}</Button>
        <Button type="primary" @click="removeUserPC(currentConfirmRemovePC)"
          >{{$t("serviceDriveAuth['確定']")}}</Button
        >
      </div>
    </Modal>
    <Loading v-if="isloading == true"></Loading>
    <div class="service-list">
      <div class="service-listTitle"><span class="title-item" @click="setTab(0)">{{$t("serviceDriveAuth['服務授權列表']")}}</span> <span class="title-item" @click="setTab(1)" :class="{ 'title-checked': true }" >{{$t("serviceDriveAuth['智慧教室授權管理']")}}<span class="title-checked-line"></span></span></div>
      <Row>
        <i-col :xs="24" :sm="24" :md="24" :lg="19">
          <Row>
            <i-col :xs="24" :sm="24" :md="24" :lg="13">
              <div class="hiteach-info">
                <p class="nomal-text">{{$t("serviceDriveAuth['Hiteach序號數']")}}</p>
                <Row>
                  <i-col :xs="24" :sm="24" :md="24" :lg="12">
                    <p class="device-max">{{$t("serviceDriveAuth['大量']")}}</p>
                    &nbsp;<span class="nomal-text">{{$t("serviceDriveAuth['授權']")}}</span>
                    <p class="info-num-small">{{ serialInfo.multiAuthNum }}</p>
                  </i-col>
                  <i-col :xs="24" :sm="24" :md="24" :lg="12">
                    <p class="device-max">{{$t("serviceDriveAuth['單一']")}}</p>
                    &nbsp;<span class="nomal-text">{{$t("serviceDriveAuth['授權']")}}</span>
                    <p class="info-num-small">{{ serialInfo.singleAuthNum }}</p>
                  </i-col>
                </Row>

                <!--p class="info-num">{{ serialInfo.totalNum }}</p-->
              </div>
            </i-col>
            <i-col :xs="24" :sm="24" :md="24" :lg="5">
              <div class="hiteach-info">
                <p class="nomal-text">{{$t("serviceDriveAuth['可啟用裝置數']")}}</p>
                <p class="info-num">
                  {{ serialInfo.couldActiveNum }}
                </p>
              </div>
            </i-col>
            <i-col :xs="24" :sm="24" :md="24" :lg="6">
              <div class="hiteach-info">
                <p class="nomal-text">{{$t("serviceDriveAuth['已啟用裝置數']")}}</p>
                <p class="info-num">
                  {{ serialInfo.activeNum }}
                </p>
              </div>
            </i-col>
          </Row></i-col
        >
        <i-col :xs="24" :sm="24" :md="24" :lg="5">
          <div class="action-btn" @click="gotoHiteachMgmt()">
            {{$t("serviceDriveAuth['管理Hiteach教室']")}}
          </div>
        </i-col>
      </Row>
    </div>
    <div class="hiteach-info-border" />
    <div class="hiteach-type-filter">
       <!--篩選選單-->
      <Dropdown @on-click="filterList">
        <a class="title" href="javascript:void(0)">
          <span
            v-for="item in filterListItem"
            v-show="filterType == item.name"
            :key="item.name"
            >{{ item.text }}</span
          >

          <span><Icon type="ios-arrow-down"></Icon></span>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem
            v-for="item in filterListItem"
            :name="`${item.name}`"
            :key="item.name"
            >{{ item.text }}</DropdownItem
          >
        </DropdownMenu>
      </Dropdown>
    </div>
    <div class="hiteach-list" :style="{ height: windowHeight - 250 + 'px' }">
      <!--無資料時-->
       <div
        v-if="
         serialInfo.multiAuthNum==0&& serialInfo.singleAuthNum==0
        "
        class="no-data-text"
      >
        <img src="../../../assets/icon/no_data.png" width="120" />
        <p style="color: #808080">{{$t("serviceDriveAuth['暂无数据']")}}</p>
      </div>


      <div
        class="hiteach-item"
        v-for="(i, index) in hiteachAuthList"
        :key="i.id"
        v-show="filterCondition(i)"
      >
        <div
          class="detail-btn"
          @click="setIntroOpen(index)"
          v-if="i.endDate != 1 && i.deviceBound.length != 0 && i.deviceMax != 1"
        >
          <!--只要是單一就直接展開無需開關控件-->
          <Icon
            v-show="hiteachListItemIsOpen[index].isOpen == false"
            type="ios-arrow-down"
          />
          <Icon
            v-show="hiteachListItemIsOpen[index].isOpen == true"
            type="ios-arrow-up"
          />
        </div>
        <Row>
          <i-col :xs="24" :sm="24" :md="24" :lg="3">
            <div class="hicon-wrap">
              <v-icon
                v-if="i.prodCode === 'J223IZ6M'" 
                iconClass="hiteach_std"
              /><v-icon
                v-if="i.prodCode === 'J223IZAM'"
                iconClass="hiteach_pro"
              /><v-icon v-if="i.prodCode === '3222C6D2'" iconClass="hiteach_tbl" />
            </div>
          </i-col>
          <i-col :xs="24" :sm="24" :md="24" :lg="21">
            <p class="title">
            
              <span v-if="i.prodCode === 'J223IZ6M'" >HiTeach STD </span>
              <span v-if="i.prodCode === '3222C6D2'" >HiTeach TBL </span>
              <span v-if="i.prodCode === 'J223IZAM'" >HiTeach PRO </span>
              <span class="device-max">{{
                i.deviceMax == 1 ? $t("serviceDriveAuth['單一']") : $t("serviceDriveAuth['大量']")
              }}</span>
            </p>
            <p
              class="serial"
              :class="{ 'overtime-text': i.expireStatus == 'F' }"
            >
              {{ i.serial }}
            </p>

            <p class="app-group">
              <span
                v-for="(item, index) in aprules"
                :key="index"
                class="more-app"
                :class="{
                  'bought-app': i.aprule!=null&&i.aprule.hasOwnProperty(item) == true,
                }"
                >{{ $t("schoolBaseInfo." + item) }}</span
              >
             
            </p>
            <Row>
              <i-col :xs="24" :sm="24" :md="24" :lg="7">
                <p class="nomal-text">
                  {{$t("serviceDriveAuth['序號到期日']") }}<span
                    class="strong-text"
                    v-if="i.expireStatus == 'A' || i.expireStatus === ''"
                    >{{ i.endDate == 0 ?  $t("serviceDriveAuth['無到期日']")  : converTime(i.endDate) }}
                  </span>
                  <!--span  class="strong-text" v-if="i.expireStatus === ''">(未啟用)</span-->
                  <span class="strong-text" v-if="i.expireStatus == 'F'"
                    >{{$t("serviceDriveAuth['已到期']")}}</span
                  >
                </p>
              </i-col>
              <i-col :xs="24" :sm="24" :md="24" :lg="17"
                ><p class="nomal-text" style="margin-left: 4%">
                 {{$t("serviceDriveAuth['序號使用狀況']")}}<span class="strong-text"
                    >{{ i.deviceBound.length }} / {{ i.deviceMax }} ({{
                      (i.deviceBound.length > i.deviceMax
                        ? 100
                        : (i.deviceBound.length / i.deviceMax) * 100
                      ).toFixed(0) + "%"
                    }})</span
                  >
                </p></i-col
              >
            </Row>
          </i-col>
        </Row>
        <!--只要是單一就直接展開無需開關控件-->
        <ul
          class="pclist"
          v-if="
            (i.endDate != 1 && hiteachListItemIsOpen[index].isOpen == true) ||
            i.deviceMax == 1
          "
        >
          <li
            :id="`PC${pc.uuid != null ? pc.uuid : pc.uuid2}`"
            v-for="(pc, index) in i.deviceBound"
            :key="index + 'pc'"
            v-show="i.deviceMax != 1 ? index < i.deviceMax : index < 1"
            class="pclist-item"
          >
            <p class="pc-title">
              {{ pc.pcname == null ? $t("serviceDriveAuth['未命名機台']") : pc.pcname }}
            </p>
            <p class="nomal-text" v-if="pc.ip!==null">
              {{ pc.ip }} | {{ pc.uuid != null ? pc.uuid : pc.uuid2 }}
            </p>
             <p class="nomal-text" v-else>
              {{ pc.uuid != null ? pc.uuid : pc.uuid2 }}
            </p>
            <p class="nomal-text" v-if="pc.os!==null">
              {{ pc.os }}&nbsp;{{ pc.cpu }}&nbsp;{{
                (pc.ram / 1000).toFixed(1)
              }}G RAM
            </p>
            <div
              class="action-btn"
              @click="comfirmRemovePC(pc.uuid != null ? pc.uuid : pc.uuid2)"
            >
              <Icon type="md-close" /> {{$t("serviceDriveAuth['解除授權']")}}
            </div>
          </li>
          <!--div v-if="i.deviceBound==0" class='pclist-empty' >尚未綁定任何機台</div-->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import "@/icons/svg/hiteach_std.svg";
import "@/icons/svg/hiteach_pro.svg";
import "@/icons/svg/hiteach_tbl.svg";
import Loading from "@/common/Loading.vue";
import { mapGetters,mapMutations } from "vuex";
export default {
  props: ["hiteachAuthList", "windowHeight", "windowWidth"],
  name: "HiteachAuthList",
  components: {
    Loading,
  },
  data() {
    return {
     
      tempRemovePCs: [], //暫存解綁的UserPC的Mac
      hiteachListItemIsOpen: {},
      filterType: "1",
      currentConfirmRemovePC: "", //暫存讓使用者確認的UserPC
      isOpenRemove: false,
      isloading: false,
    };
  },
  created() {
    this.hiteachListItemIsOpen = this.hiteachListItemIsOpenVuex;
  },
  computed: {
    ...mapGetters({
      serialInfo: "serviceDriveAuth/getHiteachAuthListInfo",
      aprules: "schoolBaseInfo/getAprules", //讀取周邊產品列表
      hiteachListItemIsOpenVuex: "serviceDriveAuth/getHiteachListItemIsOpen",
    }),
    title:function(){
      return this.$t('serviceDriveAuth["確定解除授權"]')
    },
    filterListItem:function(){
      return [
        {
          name: 1,
          text: this.$t('serviceDriveAuth["顯示全部"]'),
        },
        {
          name: 2,
          text: this.$t('serviceDriveAuth["僅顯示HiTeach STD序號"]'),
        },
        {
          name: 3,
          text: this.$t('serviceDriveAuth["僅顯示HiTeach PRO序號"]'),
        },
        {
          name: 4,
          text: this.$t('serviceDriveAuth["僅顯示HiTeach TBL序號"]'),
        },
        {
          name: 5,
          text: this.$t('serviceDriveAuth["僅顯示已完成綁定的序號"]'),
        },
        {
          name: 6,
          text: this.$t('serviceDriveAuth["僅顯示已到期序號"]'),
        },
      ]
    }
  },
  watch: {
    hiteachAuthList: function (value) {
      //根據服務的長度生出開關，只要服務數量變動就必須重置
     
      let temp = [];

      for (let i = 0; i < value.length; i++) {
        temp.push({
          index: i,
          isOpen: false,
        });
      }
      console.log(value, temp);
      this.hiteachListItemIsOpen = temp;
    },
  },
  methods: {
    ...mapMutations({
      setTab: 'serviceDriveAuth/setTab'
    }),

    //先讓使用者確定是否解除授權
    comfirmRemovePC(mac) {
      this.isOpenRemove = true;
      this.currentConfirmRemovePC = mac;
    },
    removeUserPC(mac) {
      //假設回傳deviceMac，進行解綁動作
      this.isOpenRemove = false;
      if (this.tempRemovePCs.includes(mac) == false) {
        this.tempRemovePCs.push(mac);
      }
      //console.log(this.tempRemovePCs);
      document.getElementById(`PC${mac}`).classList.add("remove-pc");
      setTimeout(() => {
        document.getElementById(`PC${mac}`).style.display = "none";

        this.$Message.success(this.$t('serviceDriveAuth["已成功解除授權"]'));
      }, 1800);
      this.isloading = true;
      setTimeout(() => {
        this.getDataAsyc();
        this.isloading = false;
      }, 3000);
    },
    gotoHiteachMgmt() {
      this.$router.push("/home/classroom");
    },
    getDataAsyc() {
      this.$store.dispatch("serviceDriveAuth/getServiceListDataAsyc").then(
        (res) => {
          this.$Message.success("取得Mock資料");
        },
        (err) => {
          this.$Message.error("取得資料失敗");
        }
      );
    },
    filterCondition(item) {
      switch (this.filterType) {
        case "1":
          return true;

        case "2":
          return item.prodCode === 'J223IZ6M'
          //return item.prodName === "STD";
        case "3":
          return item.prodCode === 'J223IZAM'
          //return item.prodName === "PRO";
        case "4":
           return item.prodCode === '3222C6D2'
          //return item.prodName === "TBL";
        case "5":
          return item.deviceBound.length != 0;
        case "6":
          return item.expireStatus === "F";

        default:
          return true;
      }
    },
    filterList(name) {
      this.filterType = name;
    },
    converTime: function (time) {
      //time: Unix timestamp(秒)
      let datetime = new Date();
      //let timerecount = time * 1000 - datetime.getTimezoneOffset() * 60 * 1000;
      let timerecount = time * 1000;
      datetime.setTime(timerecount);
      let year = datetime.getFullYear();
      let month = datetime.getMonth() + 1;
      let date = datetime.getDate();
      let hour = datetime.getHours();
      let ampm = hour >= 12 ? "PM" : "AM";
      hour %= 12;
      hour = hour || 12; // the hour '0' should be '12'
      let minute = datetime.getMinutes();
      return year + "." + month + "." + date;
    },
    setIntroOpen(index) {
      this.hiteachListItemIsOpen[index].isOpen = !this.hiteachListItemIsOpen[
        index
      ].isOpen;
      //console.log(index, this.hiteachListItemIsOpen);
    },
  },
};
</script>

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

#hiteachAuth-modal {
  .ivu-modal-header {
    border-radius: 5px 5px 0px 0px !important;
  }
  .ivu-modal-footer {
    border-radius: 0px 0px 5px 5px !important;
  }

  .ivu-modal-header,
  .ivu-modal-body,
  .ivu-modal-footer {
    background-color: rgb(88, 88, 88) !important;
    color: white !important;
    border: none !important;
  }
  .ivu-btn-text {
    color: white;
    &:hover {
      background-color: transparent !important;
      color: #1cc0f3;
    }
  }
  .ivu-modal-header-inner {
    color: white !important;
    font-weight: bolder !important;
  }
}
</style>