<template>
  <div class="FixedPoint" id="FixedPoint">
    <div class="Header">
      <img
        @click="handleBack"
        src="../../assets/img/FixedPoint/back.png"
        alt=""
      />
      <div class="mode">
        <img src="../../assets/img/FixedPoint/weizhi.png" alt="" />
        <span>上合经济创业园</span>
        <img src="../../assets/img/FixedPoint/FixedPoint.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/FixedPoint/sayao.png"
        alt=""
      />
      <img
        v-if="Sayao == false"
        @click="handleSayao()"
        src="../../assets/img/FixedPoint/sayaohover.png"
        alt=""
      />
      <!-- <img
        v-if="Shexiangtou"
        @click="handleShexiangtou()"
        src="../../assets/img/FixedPoint/shexiangtou.png"
        alt=""
      />
      <img
        v-if="Shexiangtou == false"
        @click="handleShexiangtou()"
        src="../../assets/img/FixedPoint/shexiangtouhover.png"
        alt=""
      /> -->
    </div>

    <!-- 摄像头 -->
    <!-- <div class="video" v-if="Shexiangtou == false">
      <iframe
        width="100%"
        height="100%"
        frameborder="0"
        id="ysOpenDevice"
        :src="iframeSrc"
        allowfullscreen
      >
      </iframe>
    </div> -->
    <div class="Left-Bottom">
      <img
        v-if="Xuandian"
        src="../../assets/img/FixedPoint/xuandian.png"
        alt=""
        @click="handleXuandian()"
      />
      <img
        v-if="Xuandian == false"
        src="../../assets/img/FixedPoint/queding.png"
        alt=""
        @click="handleQueding()"
      />
      <img
        v-if="Xuandian == false"
        src="../../assets/img/FixedPoint/qingchu.png"
        alt=""
        @click="handleQingchu()"
      />
    </div>

    <div class="button">
      <img
        v-if="Start"
        src="../../assets/img/FixedPoint/kaishi.png"
        alt=""
        @click="handleStart()"
      />
      <img
        v-if="Start == false"
        src="../../assets/img/FixedPoint/jieshu.png"
        alt=""
        @click="handleEnd()"
      />
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
export default {
  data() {
    return {
      Sayao: true,
      Start: true,
      Xuandian: true,
      Shexiangtou: true,
      token: "",
      dialogFormVisible: false,
      Sayaoform: {
        radio1: "",
      },
    };
  },
  mounted() {
    this.initAMap();
    this.GetToken();
  },
  computed: {
    iframeSrc() {
      return `https://open.ys7.com/console/jssdk/pc.html?accessToken=${this.token}&url=ezopen://open.ys7.com/FC9834568/1.live&themeId=pcLive`;
    },
  },
  beforeDestroy() {
    this.map?.destroy();
  },
  methods: {
    // 摄像头
    GetToken() {
      axios
        .post(
          "https://open.ys7.com/api/lapp/token/get",
          {
            appKey: "1e0fd35277444a3986f4984788a0ee82",
            appSecret: "4bc97fa347f130fa3f0180f53c71edfd",
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
              Accept: "application/json",
            },
          }
        )
        .then((res) => {
          this.token = res.data.data.accessToken;
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "93bceef67b80451f0817024a81dc6170",
      };
      AMapLoader.load({
        key: "f470b3bf9c52d2514824bc38ca6383b9", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("FixedPoint", {
            // 设置地图容器id
            viewMode: "2D", //地图模式
            zoom: 16, //初始化地图层级
            center: [120.072896, 36.155971], //初始地图中心经纬度
            terrain: true, //开启地形图
            mapStyle: "amap://styles/normal", //设置地图的显示样式
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleToushi() {
      this.dialogFormVisible = true;
    },
    handleBack() {
      this.$router.push({
        name: "deviceDetails",
      });
    },
    handleXuandian() {
      this.Xuandian = false;
    },
    handleQueding() {
      this.Xuandian = true;
    },
    handleQingchu() {},
    handleSayao() {
      this.Sayao = !this.Sayao;
    },
    handleShexiangtou() {
      this.Shexiangtou = !this.Shexiangtou;
    },
    // 开始按钮
    handleStart() {
      this.Start = false;
    },
    // 结束按钮
    handleEnd() {
      this.Start = true;
    },
  },
};
</script>
<style lang="scss" scoped>
#FixedPoint {
  width: 100%;
  height: 900px;
  z-index: 1;
  position: relative;
}
.FixedPoint::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: 325px;
    cursor: pointer;
  }
  .Left-Bottom {
    z-index: 1;
    position: fixed;
    bottom: 0px;
    width: 250px;
    height: 156px;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  .button {
    z-index: 1;
    position: fixed;
    bottom: 0px;
    display: flex;
    right: 55px;
    width: 250px;
    height: 156px;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
  }
  .video {
    z-index: 1;
    width: 640px;
    height: 360px;
    position: fixed;
    left: 485px;
    top: 259px;
  }
}
</style>
