<template>
  <div ref="main" class="page-content">
    <back-box>
      <template slot="title">
        <span>设备管理</span>
      </template>
    </back-box>
    <div>
      <div class="tab-box">
        <el-radio-group v-model="type">
          <el-radio-button :label="1">基站管理</el-radio-button>
          <el-radio-button :label="2">答题器管理</el-radio-button>
        </el-radio-group>
      </div>
      <div class="content">
        <div v-show="type == 1">
          <div class="chart-box" v-if="count">
            <div class="device-num">
              <p class="p1">{{ count }}</p>
              <p class="p2">基站数量</p>
            </div>
            <div class="chart">
              <pie-chart id="pieChart" :params="chartData"></pie-chart>
            </div>
          </div>
          <div class="table-box">
            <div class="answer-header">
              <div class="sel-box">
                <el-input
                  placeholder="请输入学校"
                  v-model="query.schoolName"
                  class="input-with-select"
                  @keyup.enter.native="query.loginName='',query.realName='',QueryData(true)"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="query.loginName='',query.realName='',_QueryData(true)"
                  ></el-button>
                </el-input>
                <el-input
                  placeholder="请输入租户账号"
                  v-model="query.loginName"
                  class="input-with-select"
                  @keyup.enter.native="query.schoolName='',query.realName='',_QueryData(true)"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="query.schoolName='',query.realName='',_QueryData(true)"
                  ></el-button>
                </el-input>
                <el-input
                  placeholder="请输入租户名称"
                  v-model="query.realName"
                  class="input-with-select"
                  @keyup.enter.native="query.schoolName='',query.loginName='',_QueryData(true)"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="query.schoolName='',query.loginName='',_QueryData(true)"
                  ></el-button>
                </el-input>
                <el-button class="serach-box" round @click="_QueryData(true)"
                  >筛选</el-button
                >
              </div>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                prop="sn"
                label="设备编码"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="frequency"
                label="频点"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="pairingCode"
                label="配对码"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="tenantName"
                label="所在学校"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="otaVersionName"
                label="固件版本号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="contactPerson"
                label="联系人"
                align="center"
              ></el-table-column>
              <el-table-column label="状态" align="center"
                ><template slot-scope="scope">
                  {{
                    scope.row.onlineStatus == 1
                      ? "在线"
                      : scope.row.onlineStatus == 2
                      ? "异常"
                      : "离线"
                  }}
                </template></el-table-column
              >
              <el-table-column label="操作" align="center"
                ><template slot-scope="scoped">
                  <el-tooltip effect="dark" content="日志" placement="top">
                    <el-button
                      type="warning"
                      circle
                      size="mini"
                      icon="fa fa-eye"
                      @click="linkTo(scoped.row, 1)"
                    ></el-button>
                  </el-tooltip> </template
              ></el-table-column>
            </el-table>
          </div>
        </div>
        <div v-show="type == 2">
          <div class="chart-box" v-if="count">
            <div class="device-num">
              <p class="p1">{{ count }}</p>
              <p class="p2">答题器数量</p>
            </div>
            <div class="chart">
              <scatter-chart
                id="scatterChart"
                :params="chartData2"
              ></scatter-chart>
            </div>
          </div>
          <div class="table-box">
            <div class="answer-header">
              <div class="sel-box">
                <el-input
                  placeholder="请输入学校"
                  v-model="query.schoolName"
                  class="input-with-select"
                  @keyup.enter.native="query.loginName='',_QueryData(true)"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="query.loginName='',_QueryData(true)"
                  ></el-button>
                </el-input>
                <el-input
                  placeholder="请输入租户"
                  v-model="query.loginName"
                  class="input-with-select"
                  @keyup.enter.native="query.schoolName='',_QueryData(true)"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="query.schoolName='',_QueryData(true)"
                  ></el-button>
                </el-input>
                <el-button class="serach-box" round @click="_QueryData(true)"
                  >筛选</el-button
                >
              </div>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                prop="sn"
                label="设备编码"
                align="center"
              ></el-table-column>
              <el-table-column label="学生信息" align="center"
                ><template slot-scope="scoped"
                  ><p
                    v-for="(item, index) in scoped.row.studentList"
                    :key="index"
                  >
                    {{ item.studentName }}
                  </p></template
                ></el-table-column
              >
              <el-table-column prop="class" label="关联班级" align="center">
                <template slot-scope="scoped">
                  <p v-for="(item, index) in scoped.row.classList" :key="index">
                    {{ item.className }}
                  </p>
                </template></el-table-column
              >
              <el-table-column
                prop="pairingCode"
                label="配对码"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="answerTimes"
                label="答题次数"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="latestReportTime"
                label="最后答题时间"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" align="center"
                ><template slot-scope="scoped">
                  <el-tooltip effect="dark" content="日志" placement="top">
                    <el-button
                      type="warning"
                      circle
                      size="mini"
                      icon="fa fa-eye"
                      @click="linkTo(scoped.row, 2)"
                    ></el-button>
                  </el-tooltip> </template
              ></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="pagination-box">
          <el-pagination
            small=""
            layout="total,prev, pager, next"
            :hide-on-single-page="true"
            :total="total"
            @current-change="changePage"
            :current-page="page"
            :page-size="size"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pieChart from "@/components/charts/pieChart";
import scatterChart from "@/components/charts/scatterChart";
import _ from "lodash";
import { downloadFile, getBlob, formatGradeNameClass } from "@/utils";
import api from "@/api/apis/apis";
import BusEvent from "@/utils/busEvent";
export default {
  components: { pieChart, scatterChart },
  watch: {
    type: function (val) {
      this.page = 1;
      this.total = 0;
      this.count = 0;
      this.query.schoolName = "";
      this.query.loginName = "";
      if (val == 1) {
        this.stationReport();
      } else if (val == 2) {
        this.keyboardReport();
      }
      this._QueryData();
    },
  },
  data() {
    return {
      code: "",
      loading: false,
      schoolList: [],
      type: 1,
      query: {
        schoolName: "",
        loginName: "",

      },
      tableData: [],
      total: 0,
      count: 0,
      chartData: [],
      chartData2: [],
      page: 1,
      size: 20,
    };
  },
  created() {
    this.code = localStorage.getItem("csCode") || "";
    this.stationReport();
    this._QueryData();
  },
  activated() {
    const that = this;
    BusEvent.$on("keepAlive", async function () {
      that.type = 1;
      that.page = 1;
      that.total = 0;
      that.count = 0;
      that.query.schoolName = "";
      that.query.loginName = "";
      that.stationReport();
      that._QueryData();
    });
  },
  methods: {
    linkTo(obj, type) {
      this.$router.push({
        path: "/deviceLog",
        query: {
          id: obj.id,
          type: type,
        },
      });
    },
    changePage(page) {
      this.page = page;
      this._QueryData(false);
    },
    // 基站统计数据
    async stationReport() {
      const { data, status, info } = await this.$request.pStationReport();
      if (status === 0) {
        this.chartData =
          data.list?.map((item) => {
            return {
              name:
                item.onlineStatus == "1"
                  ? "在线"
                  : item.onlineStatus == 0
                  ? "离线"
                  : "异常",
              value: item.total,
              rate: item.rate,
            };
          }) || [];
        this.count = data.total || 0;
      } else {
        this.$message.error(info);
      }
    },
    // 答题器统计数据
    async keyboardReport() {
      const { data, status, info } = await this.$request.pKeyboardReport();
      if (status === 0) {
        this.chartData2 =
          data.list?.map((item) => {
            return {
              name:
                item.type == 1
                  ? "1日内"
                  : item.type == 2
                  ? "3日内"
                  : item.type == 3
                  ? "7日内"
                  : item.type == 4
                  ? "1月内"
                  : item.type == 5
                  ? "3月内"
                  : "3月以上",
              count: item.total,
              value: item.rate * 100,
            };
          }) || [];
        this.count = data.total || 0;
      } else {
        this.$message.error(info);
      }
    },
    // 设备列表信息
    async _QueryData(isRef) {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key]) {
          query[key] = this.query[key];
        }
      }
      if (isRef) {
        this.page = 1;
      }
      this.loading = true;
      this.tableData = [];
      const { data, status, info } = await this.$request.pDeviceList({
        ...query,
        deviceType: this.type,
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status == 0) {
        this.tableData =
          (data?.list &&
            data?.list.map((item) => {
              item.upgradeFlag = item.upgradeFlag == 1 ? true : false;
              return item;
            })) ||
          [];

        this.total = data.count;
        this.$nextTick(function () {
          this.$refs.main.scrollTop = 0;
        });
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 0 20px;
  height: 100%;
  overflow-y: auto;
}
.tab-box {
  padding: 20px 0 12px;
}
.content {
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  :deep(.fa-edit) {
    width: 12px;
    height: 12px;
    &::before {
      margin-left: 2px;
    }
  }
  :deep(.fa-eye) {
    width: 12px;
    height: 12px;
    &::before {
      margin-left: 1px;
    }
  }
  .chart-box {
    display: flex;
    overflow: hidden;
    height: 240px;
    border-bottom: 0.5px solid #e2e2e2;
    .device-num {
      width: 280px;
      border-right: 0.5px solid #e2e2e2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .p1 {
        font-size: 28px;
      }
    }
    .chart {
      flex: 1;
      height: 100%;
    }
  }
  .table-box {
    padding: 20px;
    .answer-header {
      padding: 0;
      margin-bottom: 12px;
    }
  }
}
</style>