<template>
  <div id="safecap">
    <div class="side-area">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="设备编号/佩戴人员名称"
        style="margin-bottom: 20px"
      ></el-input>
      <ShadowContainer>
        <div id="cap-list">
          <div
            class="device-user"
            v-for="(device, index) in deviceList"
            :key="index"
          >
            <div>
              <img
                :src="
                  device.online
                    ? require('@/assets/safecap/cap-online.png')
                    : require('@/assets/safecap/cap-offline.png')
                "
                alt=""
              />
            </div>
            <div class="device-description">
              <div>{{ device.occupation }} / {{ device.name }}</div>
              <div>绑定设备：{{ device.deviceCode }}</div>
            </div>
            <div :class="['status', device.online ? 'online' : 'offline']">
              {{ device.status }}
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div id="map-area">
      <div class="swagger-container">
        <img class="lt" src="@/assets/lt.png" alt="" />
        <img class="rt" src="@/assets/rt.png" alt="" />
        <img class="rb" src="@/assets/rb.png" alt="" />
        <img class="lb" src="@/assets/lb.png" alt="" />
        <div id="amap-container"></div>
        <div class="cap-window" v-if="capWindowVisible">
          <div class="cap-description">
            <img
              :src="
                windowData.online
                  ? require('@/assets/safecap/cap-online.png')
                  : require('@/assets/safecap/cap-offline.png')
              "
              alt=""
            />
            SBBH-38436 /
            <span
              :class="[
                'online-status',
                windowData.online ? 'online' : 'offline',
              ]"
              >在线</span
            >
            <span class="name">经理 / 王一</span>
          </div>
          <div class="recent-open">最近使用:2023-03-12</div>
          <div class="cap-operation">
            <div
              :class="['cap-button', windowData.online ? 'active' : 'disabled']"
            >
              <img
                :src="
                  windowData.online
                    ? require('@/assets/safecap/watch-visory.png')
                    : require('@/assets/safecap/watch-visory-disabled.png')
                "
                alt=""
              />
              <div class="cap-text">查看监控</div>
            </div>
            <div
              :class="['cap-button', windowData.online ? 'active' : 'disabled']"
            >
              <img
                :src="
                  windowData.online
                    ? require('@/assets/safecap/phone.png')
                    : require('@/assets/safecap/phone-disabled.png')
                "
                alt=""
              />
              <div class="cap-text">语音通话</div>
            </div>
            <div
              :class="['cap-button', windowData.online ? 'active' : 'disabled']"
            >
              <img
                :src="
                  windowData.online
                    ? require('@/assets/safecap/current-route.png')
                    : require('@/assets/safecap/current-route-disabled.png')
                "
                alt=""
              />
              <div class="cap-text">当前轨迹</div>
            </div>
            <div class="cap-button active">
              <img src="@/assets/safecap/history-route.png" alt="" />
              <div class="cap-text">历史轨迹</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="historyRouteVisible"
      append-to-body
      title="历史使用记录"
    >
      <el-form inline :model="searchForm">
        <el-form-item label="使用日期">
          <el-date-picker
            v-model="searchForm.useDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.deviceName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <el-table :data="tableData" height="550px" stripe>
        <el-table-column
          label="设备编号"
          prop="deviceNo"
          align="center"
        ></el-table-column>
        <el-table-column
          label="使用职位"
          prop="use"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column
          label="开机时间"
          prop="online_time"
          align="center"
        ></el-table-column>
        <el-table-column
          label="关机时间"
          prop="offline_time"
          align="center"
        ></el-table-column>
        <el-table-column
          label="设备绑定人员"
          prop="bind_user"
          align="center"
          width="110"
        ></el-table-column>
        <el-table-column label="巡查轨迹" align="center" width="90">
          <template slot-scope="scope">
            <img
              @click="showRoute(scope)"
              src="@/assets/safecap/current-route.png"
              style="width: 20px; cursor: pointer"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import onlineIcon from "@/assets/safecap/online.png";
import offlineIcon from "@/assets/safecap/offline.png";
export default {
  name: "Safecap",
  data() {
    return {
      markers: [
        {
          position: [116.377809, 39.878726],
          online: true,
        },
        {
          position: [116.376809, 39.878726],
          online: false,
        },
      ],
      map: null,
      Amap: null, //高德地图amap方法实例
      capWindowVisible: true,
      windowData: {
        online: true,
      },
      deviceList: [
        {
          name: "王一",
          status: "在线",
          online: true,
          deviceCode: "SBBH-38436",
          occupation: "监理员",
        },
        {
          name: "王一",
          status: "离线",
          online: false,
          deviceCode: "SBBH-38436",
          occupation: "监理员",
        },
      ],
      searchForm: {
        useDate: [],
        deviceName: "",
      },
      historyRouteVisible: false,
      total: 100,
      pageSize: 10,
      currentPage: 1,
      tableData: [
        {
          deviceNo: "SBBH-383476",
          use: "监理人员",
          online_time: "2023-03-12 00:00:00",
          offline_time: "2023-03-12 00:00:00",
          bind_user: "王一",
        },
        {
          deviceNo: "SBBH-383476",
          use: "监理人员",
          online_time: "2023-03-12 00:00:00",
          offline_time: "2023-03-12 00:00:00",
          bind_user: "王一",
        },
        {
          deviceNo: "SBBH-383476",
          use: "监理人员",
          online_time: "2023-03-12 00:00:00",
          offline_time: "2023-03-12 00:00:00",
          bind_user: "王一",
        },
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "fc00c5b70f67a8414344682f217d4b6e",
        version: "1.4.15",
        plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
      })
        .then((AMap) => {
          // 初始化地图
          this.AMap = AMap;
          this.map = new AMap.Map("amap-container", {
            viewMode: "2D",
            zoom: 20,
            center: [116.377809, 39.878726],
            resizeEnable: true,
            mapStyle: "amap://styles/darkblue",
          });
          this.map.on("click", (e) => {
            console.log(e);
            this.capWindowVisible = false;
          });
          this.setMarker();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    setMarker() {
      this.markers.map((marker) => {
        const mapMarkers = new this.AMap.Marker({
          icon: marker.online ? onlineIcon : offlineIcon,
          position: marker.position,
          offset: new this.AMap.Pixel(-25, -25),
          extData: {
            markerData: marker,
          },
        });
        mapMarkers.setMap(this.map);
        mapMarkers.on("click", (e) => {
          // 获取当前marker绑定data
          console.log(e.target.getExtData());
          this.map.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
          this.showCapWindow();
        });
      });
    },
    showCapWindow() {
      this.capWindowVisible = true;
    },
    handleCurrentChange(current) {
      console.log(current);
    },
    handleSizeChange(size) {
      console.log(size);
    },
    showRoute(row) {
      console.log(row);
    },
  },
};
</script>
<style lang="less" scoped>
#safecap {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  .side-area {
    width: 20%;
  }
  #map-area {
    width: calc(80% - 20px);
  }
}
::v-deep .el-input__inner {
  background: rgba(40, 137, 195, 0.2);
  border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.swagger-container {
  position: relative;
  .container-img {
    width: 100%;
    height: 520px;
    vertical-align: top;
  }
  .lt,
  .lb,
  .rb,
  .rt {
    position: absolute;
    width: 20px;
    height: 20px;
  }
  .lt {
    top: -2px;
    left: -2px;
  }
  .lb {
    left: -2px;
    bottom: -2px;
  }
  .rb {
    right: -2px;
    bottom: -2px;
  }
  .rt {
    right: -2px;
    top: -2px;
  }
}
#cap-list {
  height: 850px;
  overflow-y: scroll;
}

.swagger-container {
  width: 100%;
  height: 950px;
}
#amap-container {
  width: 100%;
  height: 100%;
}
::v-deep .amap-icon {
  img {
    width: 50px;
    height: 50px;
  }
}
.cap-window {
  width: 460px;
  height: 170px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-120%);
  background: url("@/assets/safecap/cap-window-bg.png") no-repeat;
  background-size: 100% 100%;
}
.recent-open {
  font-size: 16px;
  color: #c6def9;
  line-height: 60px;
}
.cap-window {
  padding: 24px;
  .cap-operation {
    display: flex;
    justify-content: space-between;
  }
  .cap-button.disabled {
    background: rgba(99, 108, 117, 0.4);
    color: #8a939c;
    border-color: #8a939c;
    cursor: not-allowed;
  }
  .cap-button {
    img {
      display: inline;
      width: 20px;
    }
    cursor: pointer;
    min-width: 66px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #80a1c6;
    padding: 9px 12px;
    border: 1px solid #0f5da6;
    border-radius: 4px;
    line-height: 16px;
    font-size: 14px;
    background-image: linear-gradient(#0d3353, #183e75);
    &.active:hover {
      color: #fff;
      border-color: #27acfb;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        border-right: solid 6px transparent;
        border-left: solid 6px transparent;
        border-bottom: solid 6px #22c3ed;
        filter: drop-shadow(0px -1px 3px rgba(0, 234, 255, 0.8));
      }
    }
  }
  .router-link-exact-active.router-link-active {
    color: #fff;
    border-color: #27acfb;
    position: relative;
  }

  .cap-button.active > div:hover {
    &::after {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      border-right: solid 6px transparent;
      border-left: solid 6px transparent;
      border-bottom: solid 6px #22c3ed;
      filter: drop-shadow(0px -1px 3px rgba(0, 234, 255, 0.8));
    }
  }
}
.cap-description {
  line-height: 32px;
  font-size: 18px;
  color: #c6def9;
  padding-bottom: 16px;
  border-bottom: 1px solid #7a8fad;
  img {
    width: 32px;
    vertical-align: top;
  }
  .name {
    float: right;
  }
  .online-status.online {
    color: rgba(62, 236, 111, 1);
  }
}
::v-deep .el-pagination {
  text-align: right;
  background: rgba(14, 60, 117, 0.99);
  padding: 12px;
  .el-pagination__total,
  .el-pagination__jump {
    color: #fff;
  }
  .el-input__inner {
    color: #fff;
  }
  button {
    background: transparent !important;
  }
  .el-pagination button:disabled {
    background: transparent !important;
  }
  .el-pager li {
    background: transparent;
    color: #fff;
  }
  .el-pager li.active {
    color: #409eff;
  }
  .btn-next,
  .btn-prev {
    color: #fff !important;
  }
  button:disabled {
    color: #c0c4cc !important;
  }
}

::v-deep .el-dialog__header {
  text-align: center;
  padding: 20px;

  background: #2268bf;
  .el-dialog__title {
    color: #fff !important;
  }
  .el-dialog__headerbtn {
    font-size: 24px;
    right: 20px;
    top: 20px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
  }
}
::v-deep .el-dialog__body {
  background: #164b8e;
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background: rgba(14, 60, 117, 0.2);
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
  background-color: transparent;
}
::v-deep .el-table tr {
  background: transparent;
}
::v-deep .el-table th.el-table__cell {
  background: #0e3c75;
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-color: transparent;
}
::v-deep .el-table__empty-text {
  color: #fff;
}
::v-deep .el-table thead {
  color: #fff;
}
::v-deep .el-table {
  color: #fff;
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: rgba(39, 172, 251, 0.2) !important;
}
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: rgba(14, 60, 117, 0.4);
}
::v-deep .el-range-input {
  background: transparent;
}
::v-deep .el-date-editor .el-range-input {
  color: #fff;
}
::v-deep .el-range-separator {
  color: #fff !important;
}
::v-deep .el-input__inner {
  color: #fff;
}
.device-user {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #c6def9;
  line-height: 72px;
  background: rgba(44, 96, 162, 0.05);
  padding: 0 12px;
  margin-bottom: 12px;
  cursor: pointer;
  &:last-child {
    margin-bottom: 0;
  }
  &:hover {
    color: #27acfb;
    background: rgba(44, 96, 162, 0.2);
  }
  img {
    width: 20px;
  }
  .device-description {
    line-height: 36px;
    width: 70%;
  }
  .online {
    color: #3eec6f;
  }
}
</style>