<template>
  <div class="FeedingToushi" id="FeedingToushi">
    <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>上合经济创业园</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="body">
      <div class="title">手动模式</div>
      <div class="title2">
        <span> 投料速度</span>
        <div class="radio-group">
          <el-radio v-model="FeedingForm.radio1" label="0" border
            >低速</el-radio
          >
          <el-radio v-model="FeedingForm.radio1" label="1" border
            >中速</el-radio
          >
          <el-radio v-model="FeedingForm.radio1" label="2" border
            >高速</el-radio
          >
          <el-radio v-model="FeedingForm.radio1" label="3" border
            >自动模式</el-radio
          >
        </div>
      </div>
      <div class="title3">
        <span>定时定量投食</span>

        <el-form class="time-box" ref="FeedingForm" :model="FeedingForm">
          <el-form-item>
            <el-time-picker
              class="time-picker"
              v-model="FeedingForm.value1"
              :picker-options="{
                selectableRange: '18:30:00 - 20:30:00',
              }"
              placeholder="请选择时间"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="FeedingForm.weight"
              placeholder="请输入投食重量"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="FeedingForm.value" placeholder="请选择历史路线">
              <el-option
                v-for="item in FeedingForm.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import apiServe from "@/utils/api";

export default {
  data() {
    return {
      FeedingForm: {
        radio1: "1",
        value1: new Date(2016, 9, 10, 18, 40),
        weight: "",
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        value: "",
      },
    };
  },
  mounted() {},

  methods: {
    handleBack() {
      this.$router.push({
        name: "deviceDetails",
      });
    },
    onSubmit() {
      // 如果是自动传递type为0,手动还需要传递速度
      let data = {
        // 当radio1为0、1、2时，type赋值为1；其他情况type赋值为0
        type: [0, 1, 2].includes(parseInt(this.FeedingForm.radio1)) ? 1 : 0,
        speed: this.FeedingForm.radio1,
        mode: 1,
        shipId: 1,
      };
      apiServe.FeedingMode("post", data).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.FeedingToushi::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;
        }
      }
    }
  }
  .body {
    position: fixed;
    top: 237px;
    width: 1594px;
    height: 800px;
    background: #ffffff;
    border-radius: 20px;
    margin-top: 10px;
    .title {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 36px;
      color: #000000;
      line-height: 50px;
      display: flex;
      margin-left: 50px;
    }
    .title2 {
      > span {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 32px;
        color: #000000;
        line-height: 50px;
        display: flex;
        margin-left: 50px;
        margin-top: 30px;
      }
      .radio-group {
        display: flex;
        margin-left: 150px;
        margin-top: 30px;
      }
    }
    .title3 {
      > span {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 36px;
        color: #000000;
        line-height: 50px;
        display: flex;
        margin-left: 50px;
        margin-top: 30px;
      }
      .time-box {
        margin-left: 150px;
        display: flex;
        margin-top: 30px;
      }
      .el-form-item:nth-child(2),
      .el-form-item:nth-child(3) {
        margin-left: 20px;
      }
      .el-form-item:last-child {
        position: fixed;
        bottom: 119px;
        right: 152px;
      }
    }
  }
}
</style>
