<template>
  <div class="bigScreen-wrap">
    <div v-if="trackPositions.length > 0" id="map"></div>
    <div v-else class="map-box">
      <div></div>
    </div>
    <div class="content-right">
      <div class="content-right_main">
        <div class="content-right_time">
          <div @click="onDayUp">前一天</div>
          <el-date-picker
            v-model="punchCardTime"
            @change="getSafeHatPayDataPage"
            :clearable="false"
            value-format="yyyy-MM-dd"
            type="date"
            size="medium"
            placeholder="选择日期"
          >
          </el-date-picker>
          <div @click="onDayNext">后一天</div>
        </div>
      </div>
      <div v-if="trackPositions.length > 0">
        <el-table
          :data="dataList"
          row-key="id"
          class="tables"
          height="calc(610px - 64px - 64px)"
        >
          <el-table-column
            type="selection"
            align="center"
            width="55"
          ></el-table-column>
          <el-table-column
            prop="detailPlace"
            align="center"
            label="当前位置"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              经度:{{ scope.row.latitude }} 纬度:{{ scope.row.longitude }}
            </template>
          </el-table-column>
          <el-table-column
            prop="uploadTime"
            align="center"
            label="上传时间"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <pagination
          :total="Number(printInfo.total)"
          :page.sync="printInfo.pageNo"
          :limit.sync="printInfo.pageSize"
          @pagination="getSafeHatPayDataPage"
          :pageSizes="[...$store.state.PAGESIZRS]"
          layout="total,sizes, prev, pager, next, jumper"
        />
      </div>
      <div v-else class="nodata-box">
        <div class="new-nodata">
          <div></div>
          <span>暂无数据...</span>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { getSafeHatPayDataPageApi } from "@/assets/js/api/smartSafeHat/smartSafeHat.js";
import dayjs from "dayjs";
// 时间插件
import duration from "dayjs/plugin/duration";
dayjs.extend(duration);
export default {
  props: {
    courseWriterInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      myMap: Object,
      marker: Object,
      markerIp: [],
      infoWindow: "",
      footerIndex: 1,
      projectSn: "",
      allProjectData: [],
      mapDialogData: {},
      nowProjectSn: "",
      showRight: true,
      punchCardTime: dayjs().format("YYYY-MM-DD"),
      trackPositions: [],
      printInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0, //总条数
        workTicketId: "",
      },
      dataList: [],
      workerInfo: {},
      workingHour: "",
    };
  },
  mounted() {
    this.projectSn = this.$store.state.projectSn;
  },
  methods: {
    onDayUp() {
      this.punchCardTime = dayjs(this.punchCardTime)
        .subtract(1, "day")
        .format("YYYY-MM-DD");
      this.getSafeHatPayDataPage();
      this.getSafeHatPayDataList();
    },
    onDayNext() {
      this.punchCardTime = dayjs(this.punchCardTime)
        .add(1, "day")
        .format("YYYY-MM-DD");
      this.getSafeHatPayDataPage();
      this.getSafeHatPayDataList();
    },
    // 获取列表信息
    getSafeHatPayDataPage() {
      let data = {
        projectSn: this.projectSn,
        pageNo: this.printInfo.pageNo,
        pageSize: this.printInfo.pageSize,
        // devSn: this.courseWriterInfo.devSn,
        workerInfoId: this.courseWriterInfo.workerId,
        mockDesc: 1,
        uploadTime_begin: dayjs(this.punchCardTime).format(
          "YYYY-MM-DD 00:00:00"
        ),
        uploadTime_end: dayjs(this.punchCardTime).format("YYYY-MM-DD 23:59:59"),
      };
      getSafeHatPayDataPageApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.dataList = res.result.records.map((item) => {
            return {
              ...item,
            };
          });
          this.printInfo.total = res.result.total;
        }
      });
    },
    // 获取列表信息
    getSafeHatPayDataList() {
      let data = {
        projectSn: this.projectSn,
        pageNo: 1,
        pageSize: -1,
        // devSn: this.courseWriterInfo.devSn,
        workerInfoId: this.courseWriterInfo.workerId,
        mockDesc: 1,
        uploadTime_begin: dayjs(this.punchCardTime).format(
          "YYYY-MM-DD 00:00:00"
        ),
        uploadTime_end: dayjs(this.punchCardTime).format("YYYY-MM-DD 23:59:59"),
      };
      getSafeHatPayDataPageApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.trackPositions = res.result.records.map((item) => {
            return {
              uploadTime: item.uploadTime,
              longitude: item.longitude,
              latitude: item.latitude,
            };
          });
          if (this.trackPositions.length > 0) {
            this.$nextTick(() => {
              this.initMap();
            });
          } else {
            if (this.myMap) {
              this.myMap.destroy(); // 销毁地图实例
            }
          }
        }
      });
    },
    initMap() {
      this.myMap = new AMap.Map("map", {
        resizeEnable: true,
        // zoom: 5,
        // mapStyle: "amap://styles/blue",
        // rotateEnable: true,
        // pitchEnable: true,
        // pitch: 45,
        // rotation: -15,
        // viewMode: "3D", //开启3D视图,默认为关闭
        // buildingAnimation: true, //楼块出现是否带动画
        // expandZoomRange: true,
        zooms: [3, 20],
        center: [116.333926, 39.997245],
        // layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
      });
      let map = this.myMap;
      let path = [
        //每个弧线段有两种描述方式
        [123.436473, 41.819122, 123.436473, 41.819122], //起点
        //第一段弧线
        [123.614055, 41.868599, 123.614055, 41.868599], //控制点，途经点
        //第二段弧线
        [123.920285, 41.888785, 123.920285, 41.888785], //控制点，途经点//弧线段有两种描述方式1
        //第三段弧线
        [124.002702, 41.900995, 124.002702, 41.900995],
        [124.831792, 41.710475, 124.831792, 41.710475],
        [125.024809, 41.74509, 125.024809, 41.74509],
        [125.83533, 41.791955, 125.83533, 41.791955],
        [126.582963, 42.089846, 126.582963, 42.089846],

        [126.58693, 42.049219, 126.58693, 42.049219],
        [126.90803, 42.061164, 126.90803, 42.061164],
        [127.236139, 42.174976, 127.236139, 42.174976],
        [127.483509, 42.188401, 127.483509, 42.188401],
        [128.155148, 42.473778, 128.155148, 42.473778],
      ];
      this.getMapApi();
      //   var bezierCurve = new AMap.BezierCurve({
      //     path: path,
      //     isOutline: true,
      //     outlineColor: "#ffeeff",
      //     borderWeight: 3,
      //     strokeColor: "#3366FF",
      //     strokeOpacity: 1,
      //     strokeWeight: 6,
      //     // 线样式还支持 'dashed'
      //     strokeStyle: "solid",
      //     // strokeStyle是dashed时有效
      //     strokeDasharray: [10, 10],
      //     lineJoin: "round",
      //     lineCap: "round",
      //     zIndex: 50,
      //   });

      //   bezierCurve.setMap(map);
      //   // 缩放地图到合适的视野级别
      //   map.setFitView([bezierCurve]);
    },
    async getMapApi() {
      if (this.trackPositions && this.trackPositions.length) {
        this.createMap(this.trackPositions);
      }
    },
    createMap(data = []) {
      // 清空地图上的轨迹点
      this.myMap.clearMap();
      const paths = data.map((item) => {
        return [item.longitude, item.latitude];
      });
      // 起始地
      const startPosition = paths[0];
      const startIcon = new AMap.Icon({
        size: new AMap.Size(40, 40),
        // image: require("@/assets/images/start-point.png"),
        image: require("@/assets/images/addr_green.png"),
        imageSize: new AMap.Size(40, 40),
      });
      const startMarker = new AMap.Marker({
        position: new AMap.LngLat(
          startPosition[0],
          startPosition[startPosition.length - 1]
        ),
        icon: startIcon,
        offset: new AMap.Pixel(-20, -35),
      });
      this.myMap.add([startMarker]);

      // 目的地
      const endPosition = paths[paths.length - 1];
      const endIcon = new AMap.Icon({
        size: new AMap.Size(40, 40),
        // image: require("@/assets/images/end-point.png"),
        image: require("@/assets/images/addr_red.png"),
        imageSize: new AMap.Size(40, 40),
      });
      const endMarker = new AMap.Marker({
        position: new AMap.LngLat(
          endPosition[0],
          endPosition[endPosition.length - 1]
        ),
        icon: endIcon,
        offset: new AMap.Pixel(-20, -35),
      });

      this.myMap.add([endMarker]);
      const polyline = new AMap.Polyline({
        path: paths,
        strokeColor: "rgb(0, 0, 0)", // 线颜色
        strokeWeight: 5, // 线宽
        strokeOpacity: 0.25, // 线透明度
      });
      this.myMap.add(polyline);
      this.myMap.setFitView(); // 根据地图上添加的轨迹点分布情况，自动缩放地图到合适的视野级别
    },
  },
  watch: {
    courseWriterInfo: {
      handler(val, oldVal) {
        this.getSafeHatPayDataPage();
        this.getSafeHatPayDataList();
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    differenceTime() {
      if (this.trackPositions == 0) return "--";
      const dataList = this.trackPositions.sort((a, b) => {
        return dayjs(a.uploadTime).valueOf() - dayjs(b.uploadTime).valueOf();
      });
      const date1 = dayjs(dataList[0].uploadTime);
      const date2 = dayjs(dataList[dataList.length - 1].uploadTime);
      let date = date2.diff(date1, "seconds", true);
      return dayjs.duration(date, "seconds").format("HH小时mm分钟ss秒");
    },
  },
};
</script>
    
<style lang="less" scoped>
/deep/ .pagination-container{
  padding: 16px;
}
.nodata-box {
  position: relative;
  height: 400px;
}
.tables {
  min-height: initial;
  width: 100%;
}
/deep/ .el-table__body {
  width: 100% !important;
}
.bigScreen-wrap {
  width: calc(100% - 32px);
  height: 610px;
  position: relative;
  // overflow: hidden;
  display: flex;
  #map {
    width: 714px;
    height: 100%;
  }
  .map-box {
    width: 714px;
    height: 100%;
    background-color: #eff3f7 !important;
    position: relative;
    > div {
      width: 402px;
      height: 402px;
      background-image: url("~@/assets/images/laborManage/nodata-map.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .content-right {
    width: calc(100% - 714px);
    .content-right_main {
      padding: 0 20px;
      .content-right_time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0 10px;
        .el-date-editor {
          width: 247px;
        }
        > div:first-child,
        > div:last-child {
          font-weight: 800;
          font-size: 14px;
          color: #2f6bef;
          cursor: pointer;
        }
      }
      .content-right_user {
        display: flex;
        margin-top: 20px;
        > div:last-child {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > div {
            font-size: 14px;
            color: #272d45;
            > span {
              color: #a2a4af;
              margin-right: 12px;
            }
          }
          > div:nth-child(1) {
            font-size: 16px;
            display: flex;
            .is-success {
              padding: 3px 12px;
              background: rgba(52, 199, 89, 0.1);
              border-radius: 3px;
              border: 1px solid #34c759;
              font-size: 12px;
              color: #34c759;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 12px;
            }
            .is-error {
              padding: 3px 12px;
              background: rgba(0, 0, 0, 0.03);
              border-radius: 3px;
              border: 1px solid #b3b3b3;
              font-size: 12px;
              color: #808080;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 12px;
            }
          }
        }
        > img {
          width: 79px;
          height: 91px;
        }
      }
    }

    .content-right_title {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #272d45;
      position: relative;
      padding-left: 10px;
    }
    .content-right_title::after {
      content: "";
      width: 3px;
      height: 15px;
      background: #4181fe;
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>