<template>
  <div id="safecap">
    <div class="side-area">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="设备编号/佩戴人员名称"
        style="margin-bottom: 20px"
        v-model="keywords"
        @input="searchDevice"
      ></el-input>
      <ShadowContainer>
        <div id="cap-list">
          <div
            class="device-user"
            v-for="(device, index) in deviceList"
            :key="index"
            @click="moveToDevice(device)"
          >
            <div>
              <img
                :src="
                  device.is_online == 1
                    ? require('@/assets/safecap/cap-online.png')
                    : require('@/assets/safecap/cap-offline.png')
                "
                alt=""
              />
            </div>
            <div class="device-description">
              <div>{{ device.person_type }} / {{ device.person_name }}</div>
              <div>绑定设备：{{ device.name }}</div>
            </div>
            <div
              :class="['status', device.is_online == 1 ? 'online' : 'offline']"
            >
              {{ device.is_online_text }}
            </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.is_online == 1
                  ? require('@/assets/safecap/cap-online.png')
                  : require('@/assets/safecap/cap-offline.png')
              "
              alt=""
            />
            {{ windowData.name }} /
            <span
              :class="[
                'online-status',
                windowData.is_online == 1 ? 'online' : 'offline',
              ]"
              >{{ windowData.is_online_text }}</span
            >
            <span class="name"
              >{{ windowData.person_type }} / {{ windowData.person_name }}</span
            >
          </div>
          <div class="recent-open">最近使用:{{ windowData.last_use_time }}</div>
          <div class="cap-operation">
            <div
              :class="[
                'cap-button',
                windowData.is_online == 1 ? 'active' : 'disabled',
              ]"
            >
              <img
                :src="
                  windowData.is_online == 1
                    ? 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.is_online == 1 ? 'active' : 'disabled',
              ]"
            >
              <img
                :src="
                  windowData.is_online == 1
                    ? require('@/assets/safecap/phone.png')
                    : require('@/assets/safecap/phone-disabled.png')
                "
                alt=""
              />
              <div class="cap-text">语音通话</div>
            </div> -->
            <div
              :class="[
                'cap-button',
                windowData.is_online == 1 ? 'active' : 'disabled',
              ]"
              @click="showCurrentRoute"
            >
              <img
                :src="
                  windowData.is_online == 1
                    ? 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" @click="showHistory">
              <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.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="searchRecords"
            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="use_job"
          align="center"
        ></el-table-column>
        <el-table-column
          label="最近使用时间"
          prop="use_time"
          align="center"
        ></el-table-column>
        <el-table-column
          label="设备绑定人员"
          prop="bind_person"
          align="center"
        ></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>
    <map-dialog
      :userId="currentUserId"
      :visible="mapVisible"
      @changeVisible="(val) => (mapVisible = val)"
    ></map-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";
import {
  getBaseInfo,
  getSafeCapDeviceList,
  getSafeCapArea,
  getSafeCapUseRecords,
} from "@/api/index";
import mapDialog from "./mapDialog.vue";
import _ from "lodash";
export default {
  name: "Safecap",
  components: { mapDialog },
  data() {
    return {
      keywords: "",
      markers: [],
      map: null,
      Amap: null, //高德地图amap方法实例
      capWindowVisible: false,
      windowData: {
        online: true,
      },
      deviceList: [],
      searchForm: {
        dateRange: ["", ""],
      },
      historyRouteVisible: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      mapCenter: [],
      currentUserId: "",
      mapVisible: false,
    };
  },
  mounted() {
    getBaseInfo().then((res) => {
      this.mapCenter = [res.data.longitude, res.data.latitude];
      this.$nextTick(() => {
        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: this.mapCenter,
            resizeEnable: true,
            mapStyle: "amap://styles/darkblue",
          });
          this.map.on("click", (e) => {
            console.log(e);
            this.capWindowVisible = false;
          });
          this.getSafeCapDeviceList();
          this.getSafeCapArea();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    setMarker() {
      this.deviceList.map((marker) => {
        const mapMarkers = new this.AMap.Marker({
          icon: marker.is_online == 1 ? onlineIcon : offlineIcon,
          position: [marker.longitude, marker.latitude],
          offset: new this.AMap.Pixel(-25, -25),
          extData: {
            markerData: marker,
          },
        });
        mapMarkers.setMap(this.map);
        mapMarkers.on("click", (e) => {
          const markData = e.target.getExtData().markerData;
          this.map.setCenter([markData.longitude, markData.latitude]);
          this.windowData = markData;
          this.$nextTick(() => {
            this.showCapWindow();
          });
        });
      });
    },
    showCapWindow() {
      this.capWindowVisible = true;
    },
    handleCurrentChange(current) {
      getSafeCapUseRecords({
        device_id: this.windowData.id,
        start_time: this.searchForm.dateRange[0],
        end_time: this.searchForm.dateRange[1],
        limit: this.pageSize,
        page: current,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = current;
      });
    },
    handleSizeChange(size) {
      console.log(size);
      getSafeCapUseRecords({
        device_id: this.windowData.id,
        start_time: this.searchForm.dateRange[0],
        end_time: this.searchForm.dateRange[1],
        limit: size,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
    showRoute(scope) {
      this.historyRouteVisible = false;
      this.currentUserId = scope.row.person_device_bind_id;
      this.mapVisible = true;
    },
    getSafeCapDeviceList() {
      getSafeCapDeviceList().then((res) => {
        this.deviceList = res.data;
        this.setMarker();
      });
    },
    getSafeCapArea() {
      getSafeCapArea().then((res) => {
        res.data.map((area) => {
          area.points.map((item) => {
            new this.AMap.Polyline({
              path: item.points.map((point) => {
                return [Number(point.lng), Number(point.lat)];
              }),
              map: this.map,
              strokeColor: item.color,
              strokeStyle: item.lineStyle,
              strokeWeight: item.weight,
            });
          });
        });
      });
    },
    moveToDevice(device) {
      this.windowData = device;
      this.capWindowVisible = true;
      this.map.setCenter([device.longitude, device.latitude]);
    },
    searchDevice: _.debounce(function () {
      getSafeCapDeviceList({ keywords: this.keywords }).then((res) => {
        this.deviceList = res.data;
        this.setMarker();
      });
    }, 2000),
    showCurrentRoute() {
      if (this.windowData.is_online != 1) {
        return;
      }
      this.currentUserId = this.windowData.id;
      this.mapVisible = true;
    },
    showHistory() {
      this.historyRouteVisible = true;
      this.searchForm.dateRange = ["", ""];
      getSafeCapUseRecords({ device_id: this.windowData.id }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
    searchRecords() {
      getSafeCapUseRecords({
        device_id: this.windowData.id,
        start_time: this.searchForm.dateRange[0],
        end_time: this.searchForm.dateRange[1],
        limit: this.pageSize,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
  },
};
</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>