<template>
  <div style="display: flex; flex-direction: column">
    <div class="device-container">
      <div class="left-container">
        <div class="form">
          <div class="tip-container">
            <div class="tip-line"></div>
            <span class="tip-text">输入参数</span>
          </div>

          <el-form
            ref="form"
            style="margin-top: 37px"
            :rules="rules"
            label-width="145px"
            :model="formData"
            label-position="left"
          >
            <el-form-item label="算子名称:">
              <el-input v-model="formData.text" disabled></el-input>
            </el-form-item>
            <el-form-item label="输入图像:">
              <div style="display: flex" @click="onGetPreImgClick">
                <div class="btn-pre">
                  <span class="btn-text">上一节点图像</span>
                </div>

                <el-upload
                  :action="action"
                  :show-file-list="false"
                  accept=".jpg,.png,.jpeg"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  class="avatar-uploader"
                >
                  <div class="btn-choose">
                    <span class="btn-text">手工选择</span>
                  </div>
                </el-upload>
              </div>
            </el-form-item>

            <el-form-item v-if="false" label="卷积核:">
              <el-input v-model="formData.protocol"></el-input>
            </el-form-item>

            <el-form-item label="ROI:" prop="points">
              <p class="input-wrapper roi">
                {{
                  formData.points && formData.points.length > 0
                    ? formData.points
                    : ""
                }}
              </p>
            </el-form-item>

            <div v-if="false" v-for="(item, index) in judgeList" :key="index">
              <el-form-item :label="item.label">
                <div style="display: flex">
                  <div v-for="(data, idx) in item.value" :key="idx">
                    <span v-if="idx === 0" class="check-text">{{
                      data || ""
                    }}</span>
                    <span v-else class="check-text" style="margin-left: 81px">{{
                      data || ""
                    }}</span>
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>

      <div class="right-container">
        <drawboard
          :url="imageUrl"
          :width="550"
          :height="500"
          @clearAllCb="clearAllCb"
          @updateData="updateData"
          :labelDataOrigin="labelDataOrigin"
        ></drawboard>
      </div>

      <div class="result-container">
        <div class="io-value result-text">输出参数和实际值:</div>
        <li
          v-for="item in algResultList"
          style="margin-top: 16px"
          :key="item.key"
        >
          {{ item.key }}: {{ item.value }}
        </li>
        <div v-if="false" v-for="index in 3">
          <div class="result-text" style="margin-top: 19px">{{ index }}</div>
        </div>
        <div v-if="false" class="judge-result result-text">判定结果:</div>
        <div v-if="false" class="user-select-io result-text">
          用户选定输出变量:
        </div>
      </div>
    </div>

    <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="onSaveClick" plain>
        <i class="el-icon-s-order el-icon--left"></i>
        <span>保存设置</span>
      </el-button> -->
      <!-- <el-button style="margin:0 80px" type="primary" @click="onHandleBack">返回</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;
    }
    console.log("xcx check: ", JSON.stringify(this.formData));
  },
  inject: ["provObj"],
  data() {
    return {
      algResultList: [],
      resultResponse: {},
      action: process.env.VUE_APP_BASE_API + "/file/saveFile",
      imageUrl: "",
      labelDataOrigin: [],
      loadingData: false,
      text: "",
      formData: {
        text: "",
        name: "",
        region: "",
        type: "",
        formatType: "1",
        points: [],
        isTest: false,
      },
      NGINX_IMG: process.env.VUE_APP_NGINX_IMG,
      rules: {
        points: { required: true, message: "请标记图片", trigger: "change" },
      },
      preNodes: null,
      img: "",
      judgeList: [
        {
          label: "判定标准:",
          value: ["OK", "NG"],
        },
        {
          label: "划伤个数:",
          value: ["23", "<23"],
        },
        {
          label: "划痕个数:",
          value: ["10", "<10"],
        },
      ],
    };
  },
  methods: {
    onGetPreImgClick() {
      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.clearAllCb()
      this.img = res.data;
      this.imageUrl = `http://${this.NGINX_IMG}/saveImage/${this.splitContent(
        res.data
      )}`;
    },
    splitContent(content) {
      let len = content.split("/");
      let index = len.length - 1;
      return len[index];
    },
    clearAllCb() {
      this.formData.points = [];
    },
    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;
    },
    updateData(data) {
      if (!data || data.length <= 0) {
        this.formData.points = [];
        return;
      }
      this.formData.points = data[0].points;
    },
    onSubmit() {
      const { id } = this.$props.nodeData;
      const points = this.formData.points;
      if (!points || points.length <= 0) {
        this.$message.error("请绘制检测区域!");
        return;
      }
      this.formData.isTest = true;
      console.log("xcx form: ", this.formData);
      this.formData.imgPath = this.img;
      this.formData.imageUrl = this.imageUrl;
      this.formData.algParam.roi.value = [
        points[0].x,
        points[0].y,
        points[2].x,
        points[2].y,
      ];
      this.$refs.form.validate((valid) => {
        console.log("xcx valid");
        if (valid) {
          this.$emit(
            "onClose",
            { id, formData: this.$data.formData },
            (data) => {
              this.algResultList = [];
              this.resultResponse = data;
              this.labelDataOrigin = data.roi;
              for (let i in data) {
                this.algResultList.push({ key: i, value: data[i] });
              }
              this.lf.setProperties(id, {
                ...this.formData,
              });
            }
          );
        } else {
          this.$message.error("请绘制检测区域!");
        }
      });
    },
    onSaveClick() {
      this.formData.isTest = false;
      const { id } = this.$props.nodeData;
      this.$emit("onClose", { id, formData: this.$data.formData });
    },
    onHandleBack() {
      window.history.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;

  .form {
    flex: 1;
  }
}

.input-wrapper {
}

.roi {
  height: 200px;
  overflow: auto;
  border: 1px solid rgba(208, 208, 208, 0.75);
  border-radius: 10px;
  word-break: break-all;
}

.btn-pre {
  width: 141px;
  height: 42px;
  display: flex;
  justify-content: center;
  background: #0073e5;
  border-radius: 5px;
  cursor: pointer;

  .btn-text {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
  }
}

.btn-choose {
  width: 141px;
  height: 42px;
  display: flex;
  justify-content: center;
  border: 1px solid rgba(0, 115, 229, 0.75);
  border-radius: 5px;
  cursor: pointer;
  margin-left: 40px;

  .btn-text {
    font-size: 16px;
    font-weight: 400;
    color: #0073e5;
  }
}

.check-text {
  font-size: 16px;
  font-weight: 400;
  color: #363636;
}

.result-container {
  margin-left: 52px;
  margin-right: 52px;

  .io-value {
    margin-top: 21px;
  }

  .judge-result {
    margin-top: 29px;
  }
  .user-select-io {
    margin-top: 29px;
  }

  .result-text {
    font-size: 16px;
    font-weight: 400;
    color: #363636;
  }
}

.btn-pre:hover {
  background: #3994ef;
}

.btn-choose:hover {
  background: #ecf5ff;
}

.el-button--primary {
  background: #0073e5;
  border-radius: 10px;
}

.el-button--primary:focus,
.el-button--primary:hover {
  background: #3994ef;
}

.el-button--primary.is-plain {
  color: #0073e5;
  background: #fff;
  border-color: #0073e5;
  border-radius: 10px;
}

.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  background: #ecf5ff;
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 50px;

  .el-icon--left {
    font-size: 18px;
  }
}

.device-container {
  display: flex;
  margin-top: 33px;
  margin-left: 36px;

  .left-container {
    flex: 1;
    margin-right: 35px;
  }

  .right-container {
    flex: 1;
  }
}

.tip-container {
  display: flex;
  align-items: center;

  .tip-line {
    width: 4px;
    height: 19px;
    background: #0073e5;
  }

  .tip-text {
    margin-left: 9px;
    font-size: 18px;
    color: #363636;
    font-weight: bold;
  }
}

.btn-help {
  margin-right: 70px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 37px;
  border: 2px solid #0073e5;
  border-radius: 8px;

  .btn-text {
    color: #0073e5;
    font-size: 18px;
    font-weight: 400;
  }
}

.code-text {
  margin-top: 55px;
  color: #363636;
  font-size: 23px;
  font-weight: bold;
}
</style>