<template>
  <div class="camera">
    <section class="flex">
      <drawboard
        :url="url"
        :width="600"
        :height="400"
        :sidbarShow="false"
        @updateData="updateData"
        :labelDataOrigin="polyline"
        :selectedWithBlock="false"
        path_strokeStyle="#000"
      ></drawboard>
      <div class="form">
        <el-form label-width="100px" label-position="left" :model="formData">
          <el-form-item label="检测目标">
            <el-select
              class="input-wrapper"
              v-model="formData.detectTarget"
              placeholder="请选择检测目标"
            >
              <el-option
                :label="item.dictValue"
                :value="item.dictValue"
                v-for="(item, index) in imgTypeList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跨域方向">
            <el-select
              class="input-wrapper"
              v-model="formData.direction"
              @change="handleDirectionChange"
              placeholder="请选择触发模式"
            >
              <el-option
                :label="item.dictValue"
                :value="item.dictValue"
                v-for="(item, index) in triggerTypeList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="置信度过滤">
            <el-input-number
              class="input-wrapper"
              v-model="formData.confidence"
              :min="0.1"
              :step="0.1"
              step-strictly
              :max="1"
            />
          </el-form-item>
        </el-form>
      </div>
    </section>
    <div class="footer">
      <el-button type="primary" @click="onSubmit">
        <span>确定</span>
      </el-button>
      <el-button type="primary" @click="onHandleSave" plain>
        <span>取消</span>
      </el-button>
    </div>
  </div>
</template>
<script>
import line from "../../assets/line.jpg";
export default {
  name: "",
  watch: {},
  props: {
    nodeData: Object,
    lf: Object,
    socketResponse: Object,
  },
  mounted() {
    const { properties, text } = this.$props.nodeData;
    if (properties) {
      this.$data.formData = Object.assign({}, this.$data.formData, properties);
      this.$data.formData.text = properties.deviceName;
    }
    if (text && text.value) {
      this.$data.formData.text = text.value;
      this.$data.text = text.value;
    }
    this.initAlgorithmEdit();
    this.$emit("capturePic", { ip: properties.ip }, (res) => {
      this.url = res.data && res.data;
    });
  },
  data() {
    return {
      line,
      updateDataRecord: "",
      polyline: [
        {
          type: "polyline",
          points: [
            { x: 1000, y: 1000 },
            { x: 1000, y: 100 },
          ],
          direction: "A->B",
          options: {
            path_lineWidth: 3,
            path_strokeStyle: "yellow",
            point_radis: 7, // Judge whether to select the point when clicking
            point_lineWidth: 100,
            point_strokeStyle: "#999", // The color of the point when selected
          },
        },
        {
          type: "rectangle",
          points: [
            { x: 700, y: 386 },
            { x: 1300, y: 386 },
            { x: 1300, y: 680 },
            { x: 700, y: 680 },
          ],
          options: {
            path_lineWidth: 1,
            path_strokeStyle: "#f00",
            point_radis: 5, // Judge whether to select the point when clicking
            point_lineWidth: 2,
            point_strokeStyle: "#999", // The color of the point when selected
          },
        },
      ],
      url: "",
      labelDataOrigin: [],
      loadingData: false,
      text: "",
      formData: {
        detectTarget: "冰箱",
        direction: "A->B",
        confidence: 10,
        text: "",
        name: "",
        region: "",
        type: "",
        isTest: false, //true运行一次false保存
      },
      NGINX_IMG: process.env.VUE_APP_NGINX_IMG,
      triggerTypeList: [
        {
          dictValue: "A->B",
        },
        {
          dictValue: "B->A",
        },
      ],
      imgTypeList: [
        {
          dictValue: "冰箱",
        },
      ],
    };
  },
  methods: {
    initAlgorithmEdit() {
      // roi 由两个点推出四个点,坐标不存在不组合
      if (
        !this.$data.formData.leftUpper ||
        !this.$data.formData.rightButtom ||
        !this.$data.formData.directionA ||
        !this.$data.formData.directionB
      ) {
        return;
      }
      this.polyline[0].points[0] = JSON.parse(this.$data.formData.directionA);
      this.polyline[0].points[1] = JSON.parse(this.$data.formData.directionB);
      this.polyline[0].direction = this.$data.formData.direction;

      let aioPoints = [];
      let leftUpper = JSON.parse(this.$data.formData.leftUpper);
      let rightButtom = JSON.parse(this.$data.formData.rightButtom);
      aioPoints.push(leftUpper);
      aioPoints.push({
        x: rightButtom.x,
        y: leftUpper.y,
      });
      aioPoints.push(rightButtom);
      aioPoints.push({ x: leftUpper.x, y: rightButtom.y });

      this.polyline[1].points = aioPoints;
    },
    handleDirectionChange(value) {
      this.$set(this.polyline, 0, {
        ...this.polyline[0],
        direction: value,
      });
    },
    splitContent(content) {
      let len = content.split("/");
      let index = len.length - 1;
      return len[index];
    },
    updateData(data) {
      this.polyline = data;
      this.polyline[0].direction = this.formData.direction;
      this.updateDataRecord = data;
    },
    onSubmit() {
      const { id } = this.$props.nodeData;
      this.formData.isTest = true;
      if (this.updateDataRecord) {
        this.$data.formData.directionA = JSON.stringify(
          this.updateDataRecord[0].points[0]
        );
        this.$data.formData.directionB = JSON.stringify(
          this.updateDataRecord[0].points[1]
        );
        this.$data.formData.leftUpper = JSON.stringify(
          this.updateDataRecord[1].points[0]
        );
        this.$data.formData.rightButtom = JSON.stringify(
          this.updateDataRecord[1].points[2]
        );
      } else {
        this.$data.formData.directionA = JSON.stringify(
          this.polyline[0].points[0]
        );
        this.$data.formData.directionB = JSON.stringify(
          this.polyline[0].points[1]
        );
        this.$data.formData.leftUpper = JSON.stringify(
          this.polyline[1].points[0]
        );
        this.$data.formData.rightButtom = JSON.stringify(
          this.polyline[1].points[2]
        );
      }
      this.$emit("onClose", { id, formData: this.$data.formData }, (res) => {});
    },
    onHandleSave() {
      const { id } = this.$props.nodeData;
      this.formData.isTest = false;
      this.$emit("onClose", { id, formData: this.$data.formData }, (res) => {
        console.log("父组件的返回结果：", res); //由父组件调用
      });
    },
    onHandleBack() {
      window.history.go(-1);
    },
  },
};
</script>
<style lang="scss"></style>
<style scoped lang="scss">
.camera {
  .label-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 0px;
    p {
      width: 4px;
      height: 20px;
      margin: 0;
      background: #0201bf;
    }
    label {
      font-size: 18px;
      font-weight: bold;
      color: #363636;
      margin-left: 10px;
    }
  }

  .footer {
    display: flex;
    width: 70%;
    justify-content: space-evenly;
    margin-top: 20px;
  }
}
.flex {
  display: flex;
  .form {
    padding: 0 30px;
    .input-wrapper {
      width: 161px;
    }
  }
  .drawboard {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    .help {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 40vw;
      max-width: 100%;
      padding-bottom: 23px;
      span {
        width: 80px;
        padding: 5px 0;
        font-size: 18px;
        color: #0201bf;
        border: 2px solid #0f56af;
        border-radius: 8px;
        text-align: center;
      }
    }
    .img {
      max-width: 100%;
      width: 40vw;
      img {
        width: 100%;
      }
    }
  }
}
</style>
