<template>
  <div class="PathPlan" id="PathPlan">
    <div class="Header">
      <img
        @click="handleBack"
        src="../../assets/img/PathPlan/back.png"
        alt=""
      />
      <div class="mode">
        <img src="../../assets/img/PathPlan/weizhi.png" alt="" />
        <span>{{ locationName }}</span>
        <img src="../../assets/img/PathPlan/pathplan.png" alt="" />
        <span>路径规划模式</span>
      </div>
      <div class="data">
        <div class="name">
          饲料
          <span>54 kg</span>
        </div>
        <div class="name">
          船速
          <span>2.8 m/s</span>
        </div>
        <div class="name">
          电量
          <span>61%</span>
        </div>
      </div>
    </div>

    <div class="Left">
      <img
        @click="handleToushi"
        v-if="Sayaoform.radio1 == ''"
        src="../../assets/img/PathPlan/toushi.png"
        alt=""
      />
      <img
        @click="handleToushi"
        v-if="Sayaoform.radio1 == '高速'"
        src="../../assets/img/PathPlan/toushigao.png"
        alt=""
      />
      <img
        @click="handleToushi"
        v-if="Sayaoform.radio1 == '中速'"
        src="../../assets/img/PathPlan/toushizhong.png"
        alt=""
      />
      <img
        @click="handleToushi"
        v-if="Sayaoform.radio1 == '低速'"
        src="../../assets/img/PathPlan/toushidi.png"
        alt=""
      />
      <img
        @click="handleToushi"
        v-if="Sayaoform.radio1 == '自动投食(根据鱼群密度自动投食)'"
        src="../../assets/img/PathPlan/toushizidong.png"
        alt=""
      />

      <!-- 撒药模式 -->
      <el-dialog
        title="撒药模式"
        :modal-append-to-body="false"
        :visible.sync="dialogFormVisible"
        style="margin-top: 25vh"
        width="30%"
      >
        <el-form ref="form" :model="Sayaoform" label-width="80px">
          <el-form-item label="投食速度">
            <el-radio-group v-model="Sayaoform.radio1">
              <el-radio-button label="低速"></el-radio-button>
              <el-radio-button label="中速"></el-radio-button>
              <el-radio-button label="高速"></el-radio-button>
              <el-radio-button
                label="自动投食(根据鱼群密度自动投食)"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <img
        v-if="Sayao"
        @click="handleSayao()"
        src="../../assets/img/PathPlan/sayao.png"
        alt=""
      />
      <img
        v-if="Sayao == false"
        @click="handleSayao()"
        src="../../assets/img/PathPlan/sayaohover.png"
        alt=""
      />
      <!-- <img src="../../assets/img/PathPlan/shexiangtou.png" alt="" /> -->
    </div>

    <div class="button">
      <img
        v-if="Start"
        src="../../assets/img/PathPlan/kaishi.png"
        alt=""
        @click="handleStart()"
      />
      <img
        v-if="Start == false"
        src="../../assets/img/PathPlan/jieshu.png"
        alt=""
        @click="handleEnd()"
      />
    </div>
  </div>
</template>
<script>
import apiServe from "@/utils/api";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
      locationName: "", // 存储获取到的地点名称
      // 模拟后端传递的经纬度数据（实际从API获取）
      backendLocation: {
        longitude: 120.072896,
        latitude: 36.155971,
      },
      Start: true,
      Sayao: true,
      dialogFormVisible: false,
      Sayaoform: {
        radio1: "",
      },
    };
  },
  mounted() {
    this.initAMap();
  },
  beforeDestroy() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      // 1. 安全配置（必须在load之前）
      window._AMapSecurityConfig = {
        securityJsCode: "93bceef67b80451f0817024a81dc6170",
      };

      // 2. 加载地图（添加Geocoder插件）
      AMapLoader.load({
        key: "f470b3bf9c52d2514824bc38ca6383b9",
        version: "2.0",
        plugins: ["AMap.Geocoder", "AMap.Scale"], // 添加Geocoder插件
      })
        .then((AMap) => {
          // 3. 初始化地图
          this.map = new AMap.Map("PathPlan", {
            viewMode: "2D",
            zoom: 16,
            center: [
              this.backendLocation.longitude,
              this.backendLocation.latitude,
            ],
            terrain: true,
            mapStyle: "amap://styles/normal",
          });

          // 4. 创建地理编码器实例
          const geocoder = new AMap.Geocoder({
            radius: 1000, // 搜索半径（米）
            extensions: "all", // 返回详细信息
          });

          // 5. 执行逆地理编码
          geocoder.getAddress(
            [this.backendLocation.longitude, this.backendLocation.latitude],
            (status, result) => {
              if (status === "complete" && result.info === "OK") {
                // 成功获取地址信息
                const address = result.regeocode;
                this.locationName = address.formattedAddress; // 完整地址

                // 如果需要更精确的名称（如POI名称）
                if (address.pois && address.pois.length > 0) {
                  this.locationName = address.pois[0].name; // 最近POI的名称
                }

                console.log("地点名称:", this.locationName);
              } else {
                console.error("逆地理编码失败:", result);
              }
            }
          );
        })
        .catch((e) => {
          console.error("地图初始化失败:", e);
        });
    },
    handleToushi() {
      this.dialogFormVisible = true;
    },
    handleSayao() {
      this.Sayao = !this.Sayao;
      apiServe
        .SetShipFeedingMode("post", {
          shipId: 123456789,
          mode: this.Sayao === true ? "1" : "0",
        })
        .then((res) => {
          console.log(res);
        });
    },
    // 开始按钮
    handleStart() {
      this.Start = false;
    },
    // 结束按钮
    handleEnd() {
      this.Start = true;
    },
    handleBack() {
      this.$router.push({
        name: "deviceDetails",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#PathPlan {
  width: 100%;
  height: 900px;
  z-index: 1;
  position: relative;
}
.PathPlan::v-deep {
  .Header {
    z-index: 2;
    position: fixed;
    top: 137px;
    width: 1594px;
    height: 100px;
    background: #f8fbff;
    display: flex;
    border-radius: 12px;
    > img {
      cursor: pointer;
    }
    .mode {
      display: flex;
      align-items: center;
      margin-left: 5px;
      > img:first-child {
        margin-right: 10px;
      }
      > img:nth-child(3) {
        margin-left: 45px;
        margin-right: 10px;
      }
      > span:nth-child(2) {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28px;
        color: #000000;
        line-height: 50px;
      }
      > span:nth-child(4) {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 36px;
        color: #000000;
        line-height: 50px;
      }
    }

    .data {
      display: flex;
      align-items: center;
      margin-left: 200px;

      .name {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28px;
        color: #626262;
        line-height: 50px;
        margin-right: 50px;
        > span {
          margin-left: 25px;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 36px;
          color: #000000;
          line-height: 50px;
        }
      }
    }
  }
  .Left {
    z-index: 2;
    position: fixed;
    top: 247px;
    width: 250px;
    height: 625px;
    cursor: pointer;
  }
  .button {
    z-index: 1;
    position: fixed;
    bottom: 0px;
    display: flex;
    right: 55px;
    width: 250px;
    height: 156px;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
  }
}
</style>
