<template>
  <div class="qr-code">
    <section class="flex">
      <div class="form">
        <div class="label-wrapper">
          <p></p>
          <label>输入参数</label>
        </div>
        <el-form
          ref="form"
          label-width="120px"
          label-position="left"
          :model="formData"
          :rules="rules"
        >
          <el-form-item label="算子名称">
            <el-input
              class="input-wrapper"
              v-model="formData.text"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="输入图像">
            <p class="upload-group">
              <el-button type="primary" @click="handlePreNodes"
                >上一节点图像</el-button
              >
              <el-upload
                class="upload-demo"
                :action="action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <el-button type="primary" plain>手动选择</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </p>
          </el-form-item>
          <el-form-item label="ROI" :required="true" prop="points">
            <p class="input-wrapper roi">
              {{
                formData.points && formData.points.length > 0
                  ? formData.points
                  : ""
              }}
            </p>
          </el-form-item>
          <el-form-item label="编码格式">
            <el-input
              class="input-wrapper"
              v-model="formData.format"
            ></el-input>
          </el-form-item>
          <el-form-item label="判定标准">
            <el-input
              class="input-wrapper"
              v-model="formData.algCriterion"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="距离" >
            <el-input class="input-wrapper" v-model="formData.roi"></el-input>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="drawboard">
        <div class="help">
          <span>帮 助</span>
        </div>
        <div class="wrapper">
          <div class="drawboard-content">
            <drawboard
              :url="imageUrl"
              :width="550"
              :height="500"
              @updateData="updateData"
              @clearAllCb="clearAllCb"
              :labelDataOrigin="labelDataOrigin"
            ></drawboard>
          </div>
          <div class="text-content">
            <ul>
              <li>输出参数和实际值:</li>
              <li v-for="item in algResultList" :key="item.key">
                {{ item.key }}: {{ item.value }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <div class="footer">
      <el-button style="margin: 0 80px" type="primary" @click="onSubmit">
        <i class="el-icon-video-play el-icon--left"></i>
        <span>运行一次</span>
      </el-button>
      <!-- <el-button style="margin:0 80px" type="primary" @click="onHandleSave" plain>
        <i class="el-icon-s-order el-icon--left"></i>
        <span>保存设置</span>
      </el-button> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    nodeData: Object,
    lf: Object || String,
    socketResponse: Object,
  },
  mounted() {
    const { properties, text } = this.$props.nodeData;

    if (properties) {
      this.$data.formData = Object.assign({}, this.$data.formData, properties);
      this.$data.formData.algType = properties.breif;
      this.$data.formData.text = properties.algName;
    }
    this.formData.algParam =
      properties.algParam && JSON.parse(properties.algParam);
    if (text && text.value) {
      this.$data.formData.text = text.value;
    }
    if (text && text.value) {
      this.$data.text = text.value;
    }
  },
  inject: ["provObj"],
  data() {
    // const validatePass = (rule, value, callback) => {
    //   if (this.points.length<1) {
    //     callback(new Error('请标记图片'));
    //   } else {
    //     callback();
    //   }
    // }
    return {
      action: process.env.VUE_APP_BASE_API + "/file/saveFile",
      imageUrl: "",
      labelDataOrigin: [],
      loadingData: false,
      text: "",
      formData: {
        isTest: false,
        algCriterion: "",
        points: [],
      },
      NGINX_IMG: process.env.VUE_APP_NGINX_IMG,
      rules: {
        points: { required: true, message: "请标记图片", trigger: "change" },
      },
      preNodes: null,
      algResult: "",
      img: "",
      algResultList: [],
    };
  },
  computed: {
    imgTypeList() {
      return JSON.parse(window.sessionStorage.getItem("imgType"));
    },
    triggerTypeList() {
      return JSON.parse(window.sessionStorage.getItem("triggerType"));
    },
  },
  methods: {
    splitContent(content) {
      let len = content.split("/");
      let index = len.length - 1;
      return len[index];
    },
    // 获取前一个节点信息
    handlePreNodes() {
      this.preNodes = this.provObj.preNode;
      this.imageUrl = this.preNodes.properties.imageUrl;
      this.img = this.preNodes.properties.img;
      this.labelDataOrigin = this.preNodes.properties.pointsObj;
    },
    handleAvatarSuccess(res, file) {
      this.img = res.data;
      this.imageUrl = `http://${this.NGINX_IMG}/saveImage/${this.splitContent(
        res.data
      )}`;
      // this.clearAllCb()
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 200;
      const isJPG = file.type.includes("image");
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 20MB!");
      }
      if (!isJPG) {
        this.$message.error("只能上传图片格式!");
      }
      return isLt2M && isJPG;
    },
    /**
     * 接口算法只需要截图的左上右下坐标
     * 取points的第0个第2个
     */
    updateData(data) {
      if (!data[0]) {
        return;
      }
      const points = data[0].points;
      this.formData.points = points;
      this.formData.pointsObj = data;
      console.log(this.formData.pointsObj);
    },
    clearAllCb() {
      this.formData.points = [];
    },
    onSubmit() {
      const { id } = this.$props.nodeData;
      const points = this.formData.points;
      this.formData.isTest = true;
      this.formData.imgPath = this.img;
      this.formData.imageUrl = this.imageUrl;

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formData.algParam.roi.value = [
            points[0].x,
            points[0].y,
            points[2].x,
            points[2].y,
          ];
          this.$emit(
            "onClose",
            { id, formData: this.$data.formData },
            (res) => {
              this.algResultList = [];
              for (let i in res) {
                this.algResultList.push({ key: i, value: res[i] });
              }
              this.labelDataOrigin = res.roi;
              // 获取结果后再次更新JSON,保证数据正确
              this.lf.setProperties(id, {
                ...this.formData,
              });
            }
          );
        }
      });
    },
    onHandleSave() {
      this.formData.isTest = false;
      const { id } = this.$props.nodeData;
      this.$emit("onClose", { id, formData: this.$data.formData });
    },
    onHandleBack() {
      window.history.go(-1);
    },
  },
};
</script>
<style lang="scss"></style>
<style scoped lang="scss">
.qr-code {
  .label-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 37px;
    p {
      width: 4px;
      height: 20px;
      margin: 0;
      background: #0201bf;
    }
    label {
      font-size: 18px;
      font-weight: bold;
      color: #363636;
      margin-left: 10px;
    }
  }
  .help {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    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;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    .el-icon--left {
      font-size: 18px;
    }
  }
}
.flex {
  display: flex;
  .form {
    padding: 0 30px;
    .input-wrapper {
      width: 361px;
    }
    .upload-group {
      display: flex;
      justify-content: flex-start;
      .upload-demo {
        margin-left: 40px;
      }
    }
    .col {
      span {
        display: inline-block;
        width: 80px;
        text-align: left;
      }
    }
    .roi {
      height: 200px;
      overflow: auto;
      border: 1px solid #eee;
      border-radius: 10px;
      word-break: break-all;
    }
  }
  .drawboard {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .wrapper {
      display: flex;
      .drawboard-content {
        overflow: hidden;
      }
      .text-content {
        ul {
          margin: 0;
          padding: 0 20px;
          li {
            overflow: scroll;
            padding-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>