<template>
  <div class="app-container" style="padding-top:15px;height:calc(100vh - 50px);"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row>
      <el-col :span="6" class="jsleft">
       <div class="jsltop mb12">
          <div class="flexc jslta">
            <img src="../../../assets/images/search/icon_aijs_jgy_ss@2x.png" alt="" class="secimg">
            <el-input
              v-model="searchtxt"
              placeholder="请输入外貌特征"
              clearable
              class="no-border"
              @keyup.enter.native="handleQuery"
            />
           <!-- <el-input
              v-model="searchtxt"
              placeholder="请输入车牌号或车辆特征"
              clearable
              class="no-border"
              @keyup.enter.native="handleQuery"
            /> -->
            <el-button style="background: #00B278;font-weight: bold;font-size: 14px;" type="success" size="small">检索</el-button>
          </div>
          <div class="jsltb flex">
            <img src="../../../assets/images/profile.jpg" class="headimg flex0"/>
            <div class="flex1">
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>检索日期</p>：</div>
                <p class="txt">今日(2025-06-12)</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>检索时段</p>：</div>
                <p class="txt">09:27 至 11:54</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>检索类型</p>：</div>
                <p class="txt">图片检索</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>目标类型</p>：</div>
                <p class="txt">人员寻找</p>
              </div>
              <div class="jstlist flext">
                <div class="tit flexc flex0"><p>相似度</p>：</div>
                <p class="txt">≥87%</p>
              </div>
            </div>
          </div>

       </div>
       <div class="jslfot">
         <div class="flexc flex0 mb10">
           <div class="line"></div>
           <!-- 机动车轨迹 -->
           <div class="f16 co3 flex1 fw">人员轨迹</div>
           <div @click='reverse=!reverse'>
             <img src="../../../assets/images/search/sorta.png"  v-if="reverse" class="sortimg flex0"/>
             <img src="../../../assets/images/search/sortb.png" v-else class="sortimg flex0"/>
           </div>
         </div>
         <!-- 有数据 轨迹-->
         <trackBox :list="list" :reverse="reverse" @getDetail="getDetail"></trackBox>
       </div>
      </el-col>
        <el-col :span="18" class="jsright">
          <div class="jsbox flex1">
            <div  id="container" style="width:100%;height: 100%;">
            </div>
          </div>
          <div class="jsswbox flex0">
            <el-carousel indicator-position="outside" height="140px" :autoplay="false" arrow="always">
                <el-carousel-item v-for="item in 2" :key="item">
                  <div class="flexc swiper">
                    <div class="imgs act">
                      <img src="../../../assets/images/pic_gjgl_lt.png"/>
                      <!-- <div class="tit over">园区鸟瞰</div> -->
                      <div class="tit over">1号轨迹</div>
                    </div>
                    <div class="zhantit">到底啦</div>
                  </div>

                </el-carousel-item>
              </el-carousel>
          </div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
  //引入缺德地图
  import AMapLoader from '@amap/amap-jsapi-loader'
  window._AMapSecurityConfig = {
      securityJsCode: 'b06df55c66884ce2c9a3f3281c2c5ca9'  //填写你的安全密钥
  }
  import trackBox from "@/components/jiansuo"
  export default{
    components:{
      trackBox
    },
    data() {
      return{
        loading:false,
        searchtxt:'',
        reverse:true,
        list:[{tit:1},{tit:1},{tit:1}],
        //标记点的位置信息
              mapData: [
                {
                  longitude: '117.211954',
                  latitude: '31.839676',
                  type:1,
                },
                {
                  longitude: '117.211021',
                  latitude: '31.839374',
                  type:2
                },
                {
                  longitude: '117.211649',
                  latitude: '31.842398',
                  type:3
                },
              ],
      }
    },
    mounted() {
      this.initMap()
    },
    methods:{
      getDetail(item){
        this.$router.push({
          path: '/jiansuodetail',
          query: {
          	'id':2,
          }
        })
      },
      initMap() {
      		AMapLoader.reset()
            AMapLoader.load({
              key: "fba818d626f91cf5a13cd61943a7667e",             // 申请好的Web端开发者Key，首次调用 load 时必填
              version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
              plugins: ['AMap.AutoComplete', 'AMap.Marker', 'AMap.PlaceSearch', 'AMap.Geolocation',"AMap.Driving","AMap.Walking"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
              console.log(AMap)
              this.map = new AMap.Map("container", {  //设置地图容器id
                // mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
                viewMode: "3D",    //是否为3D地图模式
                zoom: 18,           //初始化地图级别
                center: [117.211954, 31.839676], //初始化地图中心点位置
                // center: [116.310791, 40.003419], //初始化地图中心点位置
                pitch: 40, // 地图俯仰角度，有效范围 0 度- 83 度
                terrain: true, // 开启地形图
                resizeEnable: true,
                // buildingAnimation: true,//楼块出现是否带动画
              });
      		// this.getCenter()
              this.markPoints()
              this.latitude()
              this.getpoints()
            }).catch(e => {
              console.log(e);
            })
      },
      // 途径点
      getpoints(){
        var that=this;
        // var driving = new AMap.Driving({
        //   map:that.map,
        //   // policy: 0, //驾车路线规划策略，0是速度优先的策略
        // });
        var driving = new AMap.Walking({
          map:that.map,
          // policy: 0, //驾车路线规划策略，0是速度优先的策略
        });
        // 地址
        // var points = [
        //   { keyword: "合肥市蜀山区时代数码港", city: "合肥" }, //起始点
        //   { keyword: "合肥市蜀山区大溪地", city: "合肥" }, //设置途经点参数，最多支持传入16个途经点
        //   { keyword: "合肥市蜀山区十里庙地铁站b口", city: "合肥" }, //终点
        // ];
        // driving.search(points, function (status, result) {
        //   console.log(status)
        //   //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //   //查询成功时，result 即为对应的驾车导航信息
        // });
        // 经纬度
        var startLngLat = [117.211954, 31.839676]; //起始点坐标
          var endLngLat = [117.211182,31.841098]; //终点坐标
          var opts = {
            waypoints: [[117.208859,31.840713]], //途经点参数，最多支持传入16个途经点
          };
          driving.search(startLngLat, endLngLat, function (status, result) {
            //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
            //查询成功时，result 即为对应的驾车导航信息
          });
      },
      //遍历显示标记点
      markPoints() {
      	const icona = new AMap.Icon({
      	       image: require('@/assets/images/search/gjicoa.png'), // 确保路径正确，根据实际情况调整
      	});
      	const iconb = new AMap.Icon({
      	      image: require('@/assets/images/search/gjicob.png'), // 确保路径正确，根据实际情况调整
      	});
        const iconc = new AMap.Icon({
              image: require('@/assets/images/search/gjicoc.png'), // 确保路径正确，根据实际情况调整
        });
      var xya=new AMap.Pixel(-51, -28)//103,215
      var xyb=new AMap.Pixel(-51, -190)//105,217
      var xyc=new AMap.Pixel(-188, -54)//216,104
        this.mapData.forEach(item => {
          // 创建一个 Marker 实例：
          const marker = new AMap.Marker({
            position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
            icon: item.type == 1 ? icona : item.type == 2 ? iconb : item.type == 3 ? iconc : icona,
            offset: item.type == 1 ? xya : item.type == 2 ? xyb : item.type == 3 ? xyc : xya,

          });
          // 将创建的点标记添加到已有的地图实例：
          this.map.add(marker);

          //给标记点添加事件
      	marker.on('click', (e) => {
      	  this.setInfoWindows(e, item)
      	})
        });
      },
      //点击获取经纬度
      latitude() {
        this.map.on('click', function (ev) {
          // console.log(ev)
          // 触发事件的对象
          let target = ev.target;
          // 触发事件的地理坐标，AMap.LngLat 类型
          let lnglat = ev.lnglat;
          // 触发事件的像素坐标，AMap.Pixel 类型
          let pixel = ev.pixel;
          // 触发事件类型
          let type = ev.type;
          console.log(target, lnglat, pixel, type)
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    border: none !important;font-size: 14px;padding: 0;padding-right: 5px;
  }
  .el-carousel__arrow{color: #a8a8a8;background: transparent;font-size: 16px;font-weight: bold;}
  .el-carousel__arrow--right{right: 5px;}
  .el-carousel__arrow--left{left:5px}
  .el-icon-arrow-left:before{font-weight: bold;}
  .el-icon-arrow-right:before{font-weight: bold;}
}
p{margin: 0;padding: 0;}
.mb12{margin-bottom: 12px;}
.flex{display: flex;}
.flext{display: flex;align-items: flex-start;}
.flexc{display: flex;align-items: center;}
.flex0{flex: 0 0 auto;}
.flex1{flex: 1;}
.f16{font-size: 16px;}
.co3{color: #333333;}
.fw{font-weight: bold;}
.el-row{height: 100%;}
.over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.jsleft{padding-right:12px;height: 100%;display: flex;flex-direction: column;
  .jsltop{background: #FFFFFF;border-radius: 10px;padding:0 14px;flex: 0 0 auto;
    .jslta{padding: 10px 0;border-bottom: 1px solid #E6E6E6;}
    .jsltb{padding: 14px 0;
      .headimg{width: 80px;height: 114px;margin-right: 10px;}
      .jstlist{margin-bottom: 5px;
          .tit{font-size: 14px;color: #AAAAAA;
            p{text-align: justify;width:58px;display: block;text-align-last: justify;}
          }
          .txt{font-size: 14px;color: #3D455B;}
      }
    }
    .secimg{width: 18px;height: 18px;margin-right: 12px;}

  }
  .jslfot{background: #FFFFFF;border-radius: 10px;padding:14px 15px 15px 0;flex: 1;display: flex;flex-direction: column;overflow: hidden;min-height: 260px;
    .line{width: 6px;height: 20px;background-color: #03BF8A;margin-right: 10px;}
    .sortimg{width: 14px;height: 15px;}

  }
}
.jsright{height: 100%;display: flex;flex-direction: column;overflow: hidden;
  .jsbox{background: #FFFFFF;border-radius: 10px;}
    .jsswbox{background: #FFFFFF;margin-top: 10px;
border-radius: 10px;height: 146px;padding: 12px 0px;box-sizing: border-box;}
    .swiper{padding: 0 44px;}
    .imgs{position: relative;width: 20%;height: 120px;border-radius: 8px;overflow: hidden;
      &.act{border: 2px solid #00B278;}
      img{width: 100%;height: 100%;}
      .tit{background: rgba(0, 0, 0, 0.5);font-size: 14px;color: #FFFFFF;text-align: center;height: 28px;line-height: 28px;position: absolute;right: 0;left: 0;bottom: 0;
border-radius:0 0 8px 8px;}
    }
    .zhantit{font-weight: 500;font-size: 12px;color: #AAAAAA;width: 12px;margin-left: 16px;}

}
</style>
