<template>
  <div>
    <div style="width: 100vw; height: 100vh" id="container"></div>
    <div v-show="false" class="btn-wrapper">
      <div class="myBtn">
        <div
          class="el-btn"
          :class="{ active: targetNum == 1 }"
          @click.stop="addDevice"
        >
          <template v-if="iconClass == 'icon-create'">
            <span class="left">
              <i class="iconfont" :class="iconClass" />
            </span>
            <span class="right">{{ createLabel }}</span>
          </template>
          <template v-else>
            <span class="newLetf">{{ createLabel }}</span>
            <span class="newRight">
              <i class="iconfont" :class="iconClass" />
            </span>
          </template>
        </div>
        <div
          class="el-btn"
          :class="{ active: targetNum == 2 }"
          @click.stop="editDevice"
        >
          <span class="left">
            <i class="iconfont icon-compile" />
          </span>
          <span class="right">编辑</span>
        </div>
        <div
          class="el-btn"
          :class="{ active: targetNum == 3 }"
          @click.stop="deleteDevice"
        >
          <span class="left">
            <i class="iconfont icon-delete" />
          </span>
          <span class="right">删除</span>
        </div>
      </div>

      <div class="animate">
        <el-collapse-transition>
          <div v-show="deviceType">
            <div v-for="item in changeBtnData" :key="item.value" class="option">
              <div
                class="op-btn"
                :class="{ active: item.value == createValue }"
                @click.stop="createChange($event, item)"
              >
                <span class="left">
                  <i class="iconfont" :class="item.icon" />
                </span>
                <span class="right">{{ item.label }}</span>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>

    <el-input
      v-model="keyWord"
      placeholder="点击输入"
      id="tipinput"
      class="search-input"
    />
    <el-button icon="el-icon-search" class="search-but" @click="search()"
      >搜索</el-button
    >
    <el-button icon="el-icon-refresh" class="refresh-but" @click="refreshMap()"
      >重置</el-button
    >

    <div class="leftBar-wrapper">
      <div
        v-for="item in changeBtnData"
        :key="item.value"
        class="box"
        :class="{ active: leftBarNum.indexOf(item.value) >= 0 }"
        @click="leftBarChange(item)"
      >
        <div class="left">
          <i class="iconfont" :class="item.icon"></i>
        </div>
        <div class="right">
          {{ item.label }}
        </div>
        <i class="el-icon-check"></i>
      </div>
    </div>

    <RightBototmData
      v-show="bottomDataShow"
      :class="{ classShow: !bottomDataShow }"
      ref="RightBototmData"
      :list="rightBototmData"
    />
    <CreateWork
      ref="CreateWork"
      :open="createWorkOpen"
      @callback="CreateWorkCallBack"
    />
  </div>
</template>
<script>
// import  from "utils/gaodeMapView.js";
import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
import gaodeMap, {
  map,
  DEVICE_TYPE,
  mapOperateType,
} from "utils/gaodeMapView.js";
import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import RightBototmData from "./components/RightBototmData.vue";
import CreateWork from "./components/CreateWork.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location";

export default {
  components: {
    RightBototmData,
    CreateWork,
  },
  data() {
    return {
      gaoMap: null,
      deviceType: false,
      value: "",
      operateType: "",
      radio1: "",
      // 1新建，2编辑，3删除,点按钮变色
      targetNum: 0,
      // 左边的bar的active判定
      leftBarNum: [1, 2, 3, 4, 7, 8, 9],
      // 新建里的值
      iconClass: "icon-create",
      createValue: 0,
      createLabel: "新增",
      changeBtnData: [
        {
          value: 1,
          icon: "icon-gd",
          label: "管道",
        },
        {
          value: 2,
          icon: "icon-tyx",
          label: "调压箱",
        },
        {
          value: 3,
          icon: "icon-fmj",
          label: "阀门井",
        },
        {
          value: 4,
          icon: "icon-llj",
          label: "流量计",
        },
        {
          value: 7,
          icon: "icon-ylb",
          label: "压力表",
        },
        {
          value: 8,
          icon: "icon-yh",
          label: "隐患",
        },
        {
          value: 9,
          icon: "icon-zhibanrenyuan",
          label: "值班人员",
        },
      ],
      keyWord: "",
      // 右下角的数据data
      rightBototmData: [],
      bottomDataShow: true,
      // 是否显示生成工单弹框
      createWorkOpen: false,
      // 查询用的
      alarmId: "",
    };
  },
  created() {
    // 让左边的框隐藏
    this.$store.dispatch("app/toggleDevice", "mobile");
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let gaoMap = new gaodeMap("石家庄");
      this.gaoMap = gaoMap;
      window.addEventListener("mousedown", this.barClose);
      gaoMap.addMouseTool();
      gaoMap.searchTips("tipinput");
      // 获取地图上设备资源
      this.getResource();
      // 把组件this传入类

      this.gaoMap.view = this;

      // 右下角数据 跟值班人员
      this.rightBottomData();
    },
    // 获取地图上的资源
    getResource() {
      this.getDeviceInfo()
        .then((res) => {
          if (res == 200) {
            console.log(res);
            return this.getPipeList();
          }
        })
        .then((res) => {
          if (res == 200) {
            console.log("管道", res);
            // 获取报警资源
            this.getSelectAlarmDevice();
            // selectAlarmDevice
          }
        });
    },
    // 右下角数据
    async rightBottomData() {
      await countPipeLength().then((res) => {
        // console.log("管道管道管道管道管道管道", res);
        if (res.code == 200) {
          let obj;
          if (res.data > 0) {
            obj = { number: res.data, type: "99" };
          } else {
            obj = { number: 0, type: "99" };
          }
          this.rightBototmData.push(obj);
        }
      });
      await countDeviceByType().then((res) => {
        console.log("markerresresresresresresresresresresresres", res);
        if (res.code == 200) {
          let obj = [
            {
              number: 0,
              type: "1",
            },
            {
              number: 0,
              type: "2",
            },
            {
              number: 0,
              type: "3",
            },
            {
              number: 0,
              type: "4",
            },
          ];
          res.data.forEach((item, index) => {
            for (let i = 0; i < obj.length; i++) {
              let objItem = obj[i];
              if (item.type == objItem.type) {
                objItem.number = item.number;
              }
            }
          });

          this.rightBototmData.push(...obj);
        }
      });
      // 值班人员
      this.getInspectorLocations();
    },
    // 左边的Bar修改值
    leftBarChange(item) {
      // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
      const index = this.leftBarNum.indexOf(item.value);
      if (index >= 0) {
        this.leftBarNum.splice(index, 1);
      } else {
        this.leftBarNum.push(item.value);
      }
      // 1,2,3,4,7分别对应数据库type5，1，2，3，4
      console.log(this.leftBarNum);

      if (this.leftBarNum.includes(1)) {
        this.gaoMap.lineShow(true);
      } else {
        this.gaoMap.lineShow(false);
      }

      // console.log("marks",this.gaoMap.markers)
      // this.gaoMap.markerShow();
      if (this.leftBarNum.includes(2)) {
        this.gaoMap.markerShow(1, true);
      } else {
        this.gaoMap.markerShow(1, false);
      }

      if (this.leftBarNum.includes(3)) {
        this.gaoMap.markerShow(2, true);
      } else {
        this.gaoMap.markerShow(2, false);
      }

      if (this.leftBarNum.includes(4)) {
        this.gaoMap.markerShow(3, true);
      } else {
        this.gaoMap.markerShow(3, false);
      }

      if (this.leftBarNum.includes(7)) {
        this.gaoMap.markerShow(4, true);
      } else {
        this.gaoMap.markerShow(4, false);
      }

      if (this.leftBarNum.includes(9)) {
        this.gaoMap.markerShow(9, true);
      } else {
        this.gaoMap.markerShow(9, false);
      }
    },
    addDevice() {
      if (this.iconClass == "icon-create") {
        this.targetNum = this.targetNum != 1 ? 1 : 0;
      } else {
        if (this.deviceType) {
          this.targetNum = 0;
          this.createReset();
          this.gaoMap.newLineReset();
        }
      }
      if (this.targetNum == 1 && this.createValue == 1) {
        this.gaoMap.lineType = 1;
      } else {
        this.gaoMap.lineType = 0;
        this.gaoMap.mouseTool.close();
      }
      // 关闭当前的infowindow
      this.gaoMap.closeInfoWindow();

      this.deviceType = !this.deviceType;
      this.gaoMap.mapOperateType = "add";
      this.gaoMap.removeMarkerDragg();
    },
    // 获取报警资源，并且改变图上的状态
    getSelectAlarmDevice() {
      selectAlarmDevice().then((res) => {
        if (res.length > 0) {
        }
        console.log("报警设备", res);
        this.statusChange(res);
      });
    },
    // 遍历设备改变状态 polyLines markers
    statusChange(list) {
      // 过滤报警管道
      const polyLineArr = list.filter((item) => {
        return item.deviceType == "0";
      });
      // 过滤报警的其它设备
      const deviceArr = list.filter((item) => {
        return item.deviceType != "0";
      });
      // 管道
      if (polyLineArr.length > 0) {
        polyLineArr.forEach((item) => {
          // 获取循报警设备的id
          const { deviceId, orderId, alarmId, alarmType, alarmValue, endTime } =
            item;
          console.log("endTime", endTime);
          // 获取polyLine
          const polyline = this.gaoMap.polyLines.filter((item) => {
            const pipeId = item.getExtData().lineData.pipeId;
            return deviceId == pipeId;
          })[0];
          let options = polyline.getExtData();
          // 增加一个报警状态
          // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
          options.lineData.view = this;
          options.lineData.alarmId = alarmId;
          options.lineData.orderId = orderId;
          if (endTime) {
            polyline.setOptions({ strokeColor: "#F7FE38" });
            options.lineData.alarmState = 0;
            // 报警类型
            options.lineData.alarmType = null;
            // 报警信息
            options.lineData.alarmValue = null;
            console.log("管道回复");
          } else {
            polyline.setOptions({ strokeColor: "#ff0000" });
            options.lineData.alarmState = 1;
            // 报警类型
            options.lineData.alarmType = alarmType;
            // 报警信息
            options.lineData.alarmValue = alarmValue;

            console.log("管道报警");
          }
          polyline.setExtData(options);
        });
      }

      // 其他设备
      if (deviceArr.length > 0) {
        deviceArr.forEach((item) => {
          // 获取循报警设备的id
          const { deviceId, alarmId, alarmType, alarmValue, endTime, orderId } =
            item;
          console.log("endTime", endTime);
          // 获取polyLine
          const device = this.gaoMap.markers.filter((item) => {
            const id = item.getExtData().deviceId;
            return deviceId == id;
          })[0];
          const options = device.getExtData();
          console.log(options);

          // 增加一个报警状态
          // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
          options.view = this;
          options.alarmId = alarmId;
          options.orderId = orderId;
          if (endTime) {
            console.log("设备恢复");
            options.alarmState = 0;
            // 报警类型
            options.alarmType = null;
            // 报警信息
            options.alarmValue = null;
          } else {
            console.log("设备报警");
            options.alarmState = 1;
            // 报警类型
            options.alarmType = alarmType;
            // 报警信息
            options.alarmValue = alarmValue;
          }
          device.setExtData(options);
          // const imageName = device.getExtData()
          // console.log(imageName)

          // 3是流量计 4是压力表
          if (device.getExtData().deviceType == 3) {
            // 如果有endtime说明已经维护好了
            if (endTime) {
              this.gaoMap.changeMarkIcon(
                device,
                require(`@/assets/images/liuliangji.png`)
              );
            } else {
              this.gaoMap.changeMarkIcon(
                device,
                require(`@/assets/images/lljWran.png`)
              );
            }
          } else if (device.getExtData().deviceType == 4) {
            if (endTime) {
              this.gaoMap.changeMarkIcon(
                device,
                require(`@/assets/images/yalibiao.png`)
              );
            } else {
              this.gaoMap.changeMarkIcon(
                device,
                require(`@/assets/images/ylbWran.png`)
              );
            }
          }
        });
      }
      if (this.ws) return;
      this.socket();
    },
    socket() {
      console.log("socket执行");
      // this.ws = new WebSocket(
      //   "ws://36.148.23.59:8901/gassafety/websocketServer"
      // );
      this.ws = new WebSocket(
        "ws://192.168.2.23:8903/gassafety/websocketServer"
      );
      this.ws.onopen = (evt) => {
        console.log("WebSockets=======gogogog");
        // this.ws.send("WebSockets!=========================");
      };
      this.ws.onmessage = (evt) => {
        console.log("推送", evt);

        // console.log("Received Message: " + evt.data);
        // ws.close();
        const obj = JSON.parse(evt.data);
        this.statusChange([obj]);
      };
      this.ws.onclose = () => {
        console.log("ws协议关闭");
      };
      this.ws.onclose = function (evt) {
        console.log("关闭");
      };
    },

    // 选择新建项目哪个
    createChange(e, item) {
      // e.stopPropagation();
      this.deviceType = false;
      this.iconClass = item.icon;
      this.createValue = item.value;
      this.createLabel = item.label;

      if (this.targetNum == 1 && this.createValue == 1) {
        // 0是初始，1是新建 2是编辑 3删除
        this.gaoMap.lineType = 1;
        if (this.gaoMap.newLineObj == null) {
          this.gaoMap.createNewLine();
        }
      } else {
        // 如果不是管道，就归位
        this.gaoMap.lineType = 0;
        // 如果不是管道了，把之前的管道清空
        this.gaoMap.newLineReset();

        // this.createReset();
        // 其他
        this.gaoMap.draw(this.createValue.toString());
      }
      // 清空所有正在编辑状态的线
      this.gaoMap.linePolyEditorAllClose();
    },

    // 新建按钮还原
    createReset() {
      this.iconClass = "icon-create";
      this.createValue = 0;
      this.createLabel = "新建";
      this.gaoMap.closeAddMarker();
    },
    editDevice() {
      this.targetNum = this.targetNum != 2 ? 2 : 0;
      this.gaoMap.lineType = this.targetNum;
      if (this.targetNum != 2) {
        this.gaoMap.linePolyEditorAllClose();
        this.gaoMap.removeMarkerDragg();
        this.gaoMap.mapOperateType = "normal";
      } else {
        // 如果正在新建线条，则清空
        this.gaoMap.newLineReset();
        this.deviceType = false;
        this.gaoMap.mapOperateType = "edit";
        this.gaoMap.addMarkerDragg();
        // this.gaoMap.placeSearch.clear();
        this.gaoMap.closeAddMarker();
      }
      // 关闭当前的infowindow
      this.gaoMap.closeInfoWindow();
      this.createReset();
    },
    deleteDevice() {
      this.targetNum = this.targetNum != 3 ? 3 : 0;
      this.gaoMap.lineType = this.targetNum;
      if (this.targetNum != 3) {
        this.gaoMap.removeMarkerDragg();
        this.gaoMap.mapOperateType = "normal";
      } else {
        // 如果正在新建线条，则清空
        this.gaoMap.newLineReset();
        // 清空所有正在编辑状态的线
        this.gaoMap.linePolyEditorAllClose();
        this.deviceType = false;
        this.gaoMap.mapOperateType = "delete";
        this.gaoMap.removeMarkerDragg();
        //this.gaoMap.placeSearch.clear();
        this.gaoMap.closeAddMarker();
      }
      // 关闭当前的infowindow
      this.gaoMap.closeInfoWindow();
      this.createReset();
    },
    selectDeviceType(val) {
      // if("add" == this.operationType){
      this.gaoMap.draw(val);
      // }
      this.deviceType = false;
      this.value = "";
      // 如果选择的是新建管道
      if (val == 1) {
        this.gaoMap.lineType = 1;
        this.gaoMap.createNewLine();
      }
    },
    getDeviceInfo(queryParams) {
      this.loading = true;
      return getAllDeviceInfo(queryParams).then((response) => {
        if (response.code == 200) {
          for (var i = 0; i < response.data.length; i++) {
            if ("1" == response.data[i].deviceType) {
              this.gaoMap.addMarker(
                DEVICE_TYPE.REGEULATORBOX,
                response.data[i]
              );
            }
            if ("2" == response.data[i].deviceType) {
              this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, response.data[i]);
            }
            if ("3" == response.data[i].deviceType) {
              this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, response.data[i]);
            }
            if ("4" == response.data[i].deviceType) {
              this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, response.data[i]);
            }
          }
        }
        this.loading = false;
        return response.code;
      });
    },
    getPipeList(queryParams) {
      return pipeAllInfoList(queryParams).then((res) => {
        console.log("管道", res);
        if (res.code == 200) {
          this.gaoMap.addPolyline(res.data);
        }
        return res.code;
      });
    },
    //值班人员
    getInspectorLocations() {
      getInspectorLocations().then((res) => {
        if (res.code == 200) {
          console.log(" 值班人员", res);
          // 把值班人员传进类里
          this.gaoMap.workerManArr = res.data;
          for (var i = 0; i < res.data.length; i++) {
            let options = res.data[i];
            options.type = 9;
            this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, options);
          }
        }
      });
    },
    searchClear() {
      this.iconClass = "icon-create";
      this.createValue = 0;
      this.createLabel = "新建";
      this.targetNum = 0;
      this.gaoMap.lineType = 0;
      this.gaoMap.newLineReset();
      this.gaoMap.linePolyEditorAllClose();
      this.gaoMap.closeAddMarker();
      this.gaoMap.removeMarkerDragg();
      this.gaoMap.mapOperateType = "normal";
      // map.remove(this.gaodeMap.markerOverlays);
    },
    // 搜索
    search() {
      this.searchClear();
      map.clearMap();
      this.gaoMap.placeSearch.clear();
      if (!(!this.gaoMap.searchSelectAdcode && !this.gaoMap.searchSelectName)) {
        this.gaoMap.placeSearch.setCity(this.gaoMap.searchSelectAdcode);
        this.gaoMap.placeSearch.search(this.gaoMap.searchSelectName);
        this.getDeviceInfo({ deviceName: this.gaoMap.searchSelectName });
        this.gaoMap.polyLines = [];
        this.getPipeList({ pipeName: this.gaoMap.searchSelectName });
        this.gaoMap.searchSelectAdcode = undefined;
        this.gaoMap.searchSelectName = undefined;
      } else {
        this.gaoMap.placeSearch.search(this.keyWord);
        this.getDeviceInfo({ deviceName: this.keyWord });
        this.gaoMap.polyLines = [];
        this.getPipeList({ pipeName: this.keyWord });
        // 值班人员
        this.getInspectorLocations();
      }
    },
    // 新建下拉列表关闭 window点击事件
    barClose() {
      // 一点windowbottomData显示
      this.bottomDataShow = true;
      // return;
      console.log("window");
      this.deviceType = false;
      // 关闭当前线条的infowindow
      this.gaoMap.closeInfoWindow();
      // 如果没有选择的时候点window 则高亮消失
      if (this.targetNum == 1 && this.iconClass == "icon-create") {
        this.targetNum = 0;
      }
      // 辅助新建重新画线
      // if (!this.gaoMap.lineFlag || this.gaoMap.lineType != 1) return;
      // console.log("利用window把lineFlagh恢复");
      this.gaoMap.lineFlag = false;
      // this.gaoMap.createNewLine();
    },
    refreshMap() {
      this.iconClass = "icon-create";
      this.createValue = 0;
      this.createLabel = "新建";
      this.targetNum = 0;
      map.clearMap();
      this.initMap();
      this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
    },
    // 改变弹框状态
    openChange(bool) {
      this.createWorkOpen = bool;
    },
    CreateWorkCallBack() {
      if (!this.alarmId) return;
      // 工单弹框生成之后执行的方法
      const marker = this.gaoMap.markers.filter((item) => {
        return item.getExtData().alarmId == this.alarmId;
      })[0];
      console.log("marer.getExtData()", marker.getExtData());
      let options = marker.getExtData();
      // 暂时传值，到时候回重新刷新
      options.orderId = "1";
      marker.setExtData(options);
    },
    alarmIdChange(alarmId) {
      this.alarmId = alarmId;
      console.log(alarmId);
    },
  },

  beforeDestroy() {
    console.log("移除window事件");
    map.clearMap();

    window.removeEventListener("mousedown", this.barClose);
    // 关闭scoket
    if (this.ws) {
      this.ws.close();
      this.ws = null;
    }
  },
};
</script>


<style lang="scss" scoped>
#container {
  position: fixed;
  top: 80px;
  bottom: 0;
  width: 100%;
}
// 左边的bar
.leftBar-wrapper {
  position: fixed;
  left: 10px;
  top: 150px;
  .box {
    width: 180px;
    height: 48px;
    display: flex;
    background-color: #ffffff;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    cursor: pointer;
    position: relative;
    > i {
      position: absolute;
      line-height: 48px;
      right: 20px;
      color: #fff;
    }
    &:hover {
      // background-color: #053b6a;
      // color: #ffffff;
      // > i {
      //   color:#fff;
      // }
    }
    &:hover .left,
    &:hover .right {
      // color: #ffffff;
    }
    &.active {
      // background-color: #053b6a;
      .left,
      .right {
        color: #053b6a;
      }
      > i {
        color: #053b6a;
      }
    }
    .left {
      color: #053b6a;
      line-height: 48px;
      margin-left: 40px;
    }
    .right {
      color: #1d1d1d;
      line-height: 48px;
      margin-left: 20px;
    }
  }
}

.btn-wrapper {
  position: fixed;
  right: 32px;
  top: 100px;
  .myBtn {
    display: flex;
    justify-content: space-between;
    .el-btn {
      width: 144px;
      height: 44px;
      background-color: #053b6a;
      margin-right: 22px;
      border-radius: 4px;
      text-align: center;
      line-height: 44px;
      color: #fff;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      &.active {
        background: #31eaea;
        color: #053b6a !important;
      }
      .left {
        padding-left: 38px;
        i {
          font-size: 18px;
        }
      }
      .right {
        padding-right: 38px;
      }

      .newLetf {
        margin-left: 20px;
      }
      .newRight {
        margin-right: 20px;
        position: relative;
        i {
          position: absolute;
          right: 0px;
          top: 1px;
          font-size: 30px;
        }
      }
    }
  }
  .animate {
    .option {
      .op-btn {
        width: 144px;
        height: 38px;
        border-radius: 0;
        color: #053b6a;
        line-height: 38px;
        background-color: #fff;
        cursor: pointer;
        position: relative;
        border: 1px solid #cccccc;
        border-top: 0;
        &.active {
          background-image: url("../../../assets/images/bac1.png");
        }
        .left {
          position: relative;
          margin-right: 30px;
          margin-left: 22px;
          i {
            position: absolute;
            top: -7px;
            font-size: 20px;
          }
        }
        .right {
          display: inline-block;
          font-size: 14px;
          line-height: 38px;
        }

        &:hover {
          background-image: url("../../../assets/images/bac1.png");
        }
      }
    }
  }
}
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.input-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 2.2rem;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0.5rem 0 0;
}
// .btn {
//   display: inline-block;
//   font-weight: 400;
//   text-align: center;
//   white-space: nowrap;
//   vertical-align: middle;
//   -webkit-user-select: none;
//   -moz-user-select: none;
//   -ms-user-select: none;
//   user-select: none;
//   border: 1px solid transparent;
//   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
//     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
//   background-color: transparent;
//   background-image: none;
//   color: #25a5f7;
//   border-color: #25a5f7;
//   padding: 0.25rem 0.5rem;
//   line-height: 1.5;
//   border-radius: 1rem;
//   -webkit-appearance: button;
//   cursor: pointer;
//   width: 6rem;
//   margin: 0 1rem 0 2rem;
// }

// .btn:hover {
//   color: #fff;
//   background-color: #25a5f7;
//   border-color: #25a5f7;
// }
.input-text {
  width: 4rem;
  margin-right: 1rem;
}
.search-input {
  position: fixed;
  top: 100px;
  left: 10px;
  width: 240px;
}
.search-but {
  position: fixed;
  top: 100px;
  left: 260px;
  width: 85px;
  color: white;
  background-color: #053b6a;
}

.refresh-but {
  position: fixed;
  top: 100px;
  left: 345px;
  width: 85px;
  color: white;
  background-color: #053b6a;
}
.classShow {
  opacity: 0;
}
</style>