<template>
  <div>
    <back-box>
      <template slot="title">
        <span>设备管理</span>
      </template>
      <template slot="btns" v-if="type == 1 && school !== '长水'">
        <el-tooltip effect="dark" content="设备导入" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            plain
            circle
            @click="diaUp = true"
          ></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="添加基站" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-receiving"
            size="mini"
            plain
            circle
            @click="diaAnswerEqu = true"
          ></el-button>
        </el-tooltip>
      </template>
    </back-box>
    <div class="page-content">
      <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-button :label="3">授课端管理</el-radio-button>
        </el-radio-group>
      </div>
      <div class="content">
        <div v-if="type == 1">
          <div class="chart-box">
            <div class="device-num">
              <p class="p1">{{ total }}</p>
              <p class="p2">基站数量</p>
            </div>
            <div class="chart">
              <pie-chart
                id="pieChart"
                :params="chartData"
                @clickPieChart="clickPieChart"
              ></pie-chart>
            </div>
          </div>
          <div class="table-box">
            <div class="answer-header">
              <div class="sel-box">
                <el-cascader
                  class="sel"
                  collapse-tags
                  clearable
                  placeholder="选择班级"
                  v-model="query.classId"
                  :options="classList"
                  :props="props"
                  :show-all-levels="false"
                  @change="_QueryData(false)"
                ></el-cascader>
                <el-select
                  class="sel"
                  v-model="query.status"
                  placeholder="选择状态"
                  @change="_QueryData(false)"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  type="number"
                  placeholder="请输入设备编码"
                  v-model="query.number"
                  class="input-with-select"
                  @keyup.enter.native="_QueryData(true)"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="_QueryData(true)"
                  ></el-button>
                </el-input>
              </div>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                prop="number"
                label="设备编码"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="pindian"
                label="频点"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="peidui"
                label="配对码"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="jiaoshi"
                label="所在教室"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="class"
                label="关联班级"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="version"
                label="固件版本号"
                align="center"
              ></el-table-column>
              <el-table-column prop="datiqi" label="配对答题器" align="center"
                ><template slot-scope="scope"
                  >{{ scope.row.datiqi }}个</template
                ></el-table-column
              >
              <el-table-column label="状态" align="center"
                ><template slot-scope="scope">
                  {{
                    scope.row.status == 1
                      ? "在线"
                      : scope.row.status == 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="primary"
                      circle
                      size="mini"
                      icon="fa fa-edit"
                      @click="edit(scoped.row)"
                    ></el-button>
                  </el-tooltip>
                  <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-if="type == 2">
          <div class="chart-box">
            <div class="device-num">
              <p class="p1">{{ total }}</p>
              <p class="p2">答题器数量</p>
            </div>
            <div class="chart">
              <scatter-chart
                id="scatterChart"
                :params="chartData2"
                @clickScatterChart="clickScatterChart"
              ></scatter-chart>
            </div>
          </div>
          <div class="table-box">
            <div class="answer-header">
              <div class="sel-box">
                <el-cascader
                  class="sel"
                  collapse-tags
                  clearable
                  placeholder="选择班级"
                  v-model="query.classId"
                  :options="classList"
                  :props="props"
                  :show-all-levels="false"
                  @change="_QueryData(false)"
                ></el-cascader>
                <el-select
                  class="sel"
                  v-model="query.status"
                  placeholder="选择状态"
                  @change="_QueryData(false)"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  type="number"
                  placeholder="请输入设备编码"
                  v-model="query.number"
                  class="input-with-select"
                  @keyup.enter.native="_QueryData(true)"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="_QueryData(true)"
                  ></el-button>
                </el-input>
              </div>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                prop="number"
                label="设备编码"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="xuesheng"
                label="学生信息"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="dianliang"
                label="电量"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="class"
                label="关联班级"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="peidui"
                label="配对码"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="cishu"
                label="答题次数"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="time"
                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 v-if="type == 3">
          <div class="table-box">
            <div class="answer-header">
              <div class="sel-box">
                <el-cascader
                  class="sel"
                  collapse-tags
                  clearable
                  placeholder="选择班级"
                  v-model="query.classId"
                  :options="classList"
                  :props="props"
                  :show-all-levels="false"
                  @change="_QueryData(false)"
                ></el-cascader>
                <span class="sel">共选择5个授课端</span>
                <el-button plan round @click="autoUpDate"
                  >开启自动更新</el-button
                >
                <el-button plan round @click="stopUpdate"
                  >停止自动更新</el-button
                >
              </div>
            </div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="class"
                label="关联班级"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="gengxin"
                label="最近更新"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="xitong"
                label="软件系统"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="yingjian"
                label="硬件环境"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="version"
                label="版本号"
                align="center"
              ></el-table-column>
              <el-table-column label="状态" align="center"
                ><template slot-scope="scope">
                  {{
                    scope.row.status == 1
                      ? "在线"
                      : scope.row.status == 2
                      ? "离线"
                      : "异常"
                  }}
                </template></el-table-column
              >
              <el-table-column label="自动更新" align="center"
                ><template slot-scope="scoped">
                  <el-switch
                    v-model="scoped.row.isUp"
                    @change="changeUpdate($event, scoped.row, this)"
                  >
                  </el-switch> </template
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="设备导入" :visible.sync="diaUp" width="400">
      <up-load id="downDevice" :url="url" fileName="设备信息">
        <p class="down-txt" slot="down">
          通过Excel名单导入设备，需要提供设备编码，点击
          <el-link  type="danger" @click="downExcel">模板下载</el-link> 。
        </p>
      </up-load>
      <div class="dialog-footer" slot="footer">
        <el-button @click="diaUp = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加答题器" :visible.sync="diaAnswerEqu" width="400">
      <el-form ref="forms" :model="form" :rules="formRules" label-width="140px">
        <el-form-item label="设备编码：" prop="number">
          <el-col :span="10"
            ><el-input
              type="text"
              placeholder="输入设备编码"
              v-model.trim="form.number"
              maxlength="30"
              size="45"
              show-word-limit
            >
            </el-input
          ></el-col>
        </el-form-item>
        <el-form-item label="频点：" prop="pindian">
          <el-col :span="10"
            ><el-input
              type="text"
              placeholder="输入频点"
              v-model.trim="form.pindian"
              maxlength="30"
              size="45"
              show-word-limit
            >
            </el-input
          ></el-col>
        </el-form-item>
        <el-form-item label="配对码：" prop="peidui">
          <el-col :span="10"
            ><el-input
              type="text"
              placeholder="输入配对码"
              v-model.trim="form.peidui"
              maxlength="30"
              size="45"
              show-word-limit
            >
            </el-input
          ></el-col>
        </el-form-item>
        <el-form-item label="选择班级：" prop="classId">
          <el-col :span="10">
            <el-cascader
              clearable
              v-model="form.classId"
              :options="classList"
              :props="{ expandTrigger: 'hover' }"
              :show-all-levels="false"
            ></el-cascader>
          </el-col>
        </el-form-item>
        <el-form-item label="所在教室：">
          <el-col :span="10"
            ><el-input
              type="text"
              placeholder="输入所在教室"
              v-model.trim="form.jiaoshi"
              maxlength="30"
              size="45"
              show-word-limit
            >
            </el-input
          ></el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" @click="addAnswerEqu">确 定</el-button>
        <el-button @click="diaAnswerEqu = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pieChart from "@/components/charts/pieChart";
import scatterChart from "@/components/charts/scatterChart";
import _ from "lodash";
import { downloadFile, formatClass } from "@/utils";
export default {
  components: { pieChart, scatterChart },
  data() {
    return {
      school: "",
      loading: false,
      url: "/web/upLoadDevice",
      diaUp: false,
      diaAnswerEqu: false,
      classList: [],
      classListAll: [],
      props: { multiple: true, checkStrictly: false },
      type: 1,
      query: {
        classId: [],
        status: 0,
        number: "",
      },
      statusList: [
        { label: "全部", value: 0 },
        { label: "在线", value: 1 },
        { label: "离线", value: 2 },
        { label: "异常", value: 3 },
      ],
      form: {
        number: "",
        pindian: "",
        peidui: "",
        classId: "",
        jiaoshi: "",
      },
      formRules: {
        number: [
          { required: true, message: "请输入设备编码", trigger: "blur" },
        ],
        pindian: [{ required: true, message: "请输入频点", trigger: "blur" }],
        peidui: [{ required: true, message: "请输入配对码", trigger: "blur" }],
        classId: [{ required: true, message: "请选择班级", trigger: "blur" }],
      },
      tableData: [
        {
          number: 32456,
          pindian: 12,
          peidui: 100123,
          jiaoshi: " 13号教室",
          class: "21班",
          version: "2.13",
          datiqi: 50,
          status: 1,
          xuesheng: "sss",
          dianliang: "25",
          cishu: "10",
          time: "10:00:00",
          gengxin: "10:00:00",
          xitong: "window7",
          yingjian: "cpu:i7，4G内存，160G硬盘",
          isUp: true,
        },
      ],
      total: 35,
      chartData: [
        { name: "在线", value: "65" },
        { name: "离线", value: "18" },
        { name: "异常", value: "17" },
      ],
      chartData2: [
        { name: "1日内", value: "8.6", count: 12 },
        { name: "3日内", value: "18", count: 30 },
        { name: "7日内", value: "36", count: 60 },
        { name: "1月内", value: "80", count: 138 },
        { name: "3月内", value: "20", count: 36 },
        { name: "3月以上", value: "8", count: 9 },
      ],
      selectionTabIds: [],
    };
  },
  created() {
    this._QueryClassList();
  },
  methods: {
    edit() {},
    linkTo(obj, type) {
      this.$router.push({
        path: "/deviceLog",
        query: {
          id: obj.id,
          type: type,
        },
      });
    },
    clickPieChart(obj) {
      this.query.status = obj.name == "在线" ? 1 : obj.name == "离线" ? 2 : 3;
      this._QueryData(false);
    },
    clickScatterChart(obj) {
      console.log(obj);
      // this._QueryData(false)
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selectionTabIds = val.map((item) => {
        return item.id;
      });
    },
    changeUpdate: _.debounce(function (event, obj) {
      console.log(this);
      if (event) {
        this.autoUpDate(obj.id);
      } else {
        this.stopUpdate(obj.id);
      }
    }, 800),
    async autoUpDate(id) {
      if (!this.selectionTabIds.length && !id) {
        this.$message.warning("请选择授课端~");
        return;
      }
      if (this.loadingUpDate) return;
      this.loadingUpDate = true;
      let data = await this.$request.autoUpDate({
        id: id ? id : this.selectionTabIds,
      });
      this.loadingUpDate = false;
      if (data && !data.code) {
        this._QueryData(false);
        this.$message.success("开启自动更新成功");
      } else {
        this.$message.error(data.message);
      }
    },
    async stopUpdate(id) {
      if (!this.selectionTabIds.length && !id) {
        this.$message.warning("请选择授课端~");
        return;
      }
      if (this.loadingUpDate) return;
      this.loadingUpDate = true;
      let data = await this.$request.stopUpdate({
        id: id ? id : this.selectionTabIds,
      });
      this.loadingUpDate = false;
      if (data && !data.code) {
        this._QueryData(false);
        this.$message.success("关闭自动更新成功");
      } else {
        this.$message.error(data.message);
      }
    },
    async downExcel() {
      let data = await this.$request.downDevice({
        id: this.id,
      });
      if (data && !data.code) {
        let blob = new Blob([data], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        downloadFile(`设备信息.xlsx`, blob);
      } else {
        this.$message.error(data.message);
      }
    },

    // 添加设备
    async addAnswerEqu() {
      // if(this.loadingAnswerEqu)return
      //  this.loadingAnswerEqu = true;
      // const { data, status, info } = await this.$request.fetchClassList();
      //  this.loadingAnswerEqu = false;
      // console.log(status);
      // if (status === 0) {
      //   this._QueryData();
      // } else {
      //   this.$message.error(info);
      // }
    },
    // 查找班级
    async _QueryClassList() {
      // this.loading = true;
      // const { data, status, info } = await this.$request.fetchClassList();
      // console.log(status);
      // if (status === 0) {
      //   if (!!data.list) {
      //     this.classList =
      //       data.list?.map((item) => {
      //         return {
      //           value: item.classId,
      //           label: item.className,
      //         };
      //       }) || [];
      //   }
      // } else {
      //   this.$message.error(info);
      // }
      let data = [
        {
          classId: 1,
          className: 1001,
          sectionName: 1,
          gradeName: 1,
        },
        {
          classId: 1,
          className: 1001,
          sectionName: 2,
          gradeName: 7,
        },
        {
          classId: 1,
          className: 1001,
          sectionName: 3,
          gradeName: 10,
        },
        {
          classId: 1,
          className: 1001,
          sectionName: 4,
          gradeName: 12,
        },
      ];
      this.classList = formatClass(data);
    },
    // 设备列表信息
    async _QueryData(type) {
      console.log(1);
      // this.loading = true;
      // let query = {};
      // if (!type) {
      //   this.query.title = "";
      //   query = { ...this.query };
      // } else {
      //   query = { title: this.query.title };
      //   this.query.status = "";
      //   this.query.classId = [];
      // }
      // for (let key in query) {
      //   if (!query[key] || query[key].length == 0) {
      //     query[key] = null;
      //   }
      // }
      // this.loading = true;
      // const { data, status, info } = await this.$request.fetchDeviceList();
      // this.loading = false;
      // console.log(status);
      // if (status === 0) {
      //   this.tableData = data.list || [];
      // } else {
      //   this.$message.error(info);
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 20px 20px 0;
}
.tab-box {
  margin-bottom: 12px;
}
.content {
  background: #f8f8f8;
  border: 1px solid #e2e2e2;
  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>