<template>
    <div>
        <div style="width:500px;height:300px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;">
            <img src="@/assets/logo-3.png" alt="" style="width:300px;margin:0 100px 30px">
            <div style="background:white;height:150px;padding:20px;">
                <p>请输入识别码：</p>
                <div class="input">
                    <p class="code" style="display:inline-block;width:80%">
                        <el-input v-model="code" placeholder="请输入识别码" @input="change"></el-input>
                        <span v-if="show">{{ content }}</span>
                    </p>
                    <el-button type="primary" @click="submit"
                        style="display:inline-block;margin-left:20px">提交</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            show: false,
            content: "",
            code: '',
            btnLoading: "",
            coordination:true,
        }
    },
    methods: {
      submit() {
       
        if (this.code) {
          this.$api.getTaskByCode({ code: this.code }).then(res => {
            if (res.code == 200) {
              let a=this.$router.resolve({
                path: '/Incompletes',
                query: {
                  taskId:res.data.id,
                  reportId:res.data.reportId,
                  type:res.data.type,
                  reportType:res.data.reportType,
                  coordination:this.coordination
                }
                // path: '/Incomplete'+`taskId=470&reportId=350&type=3&reportType=${}`,
                      // path: '/customer_review',
              })
              this.$store.commit("COORDINATION",this.coordination)
              window.open(a.href,"_blank")
            } else {
              document.getElementsByClassName("el-input__inner")[0].style.border("1px solid red")
              this.show = true;
              this.content = "识别码错误"
            }
          })
              // if (this.code == "111") {
              //     this.$router.push({
              //         path: ' http://192.168.1.9:8086/Incomplete?taskId=470&reportId=350&type=3&reportType=3',
              //         // path: '/customer_review',
              //     })
              //   } else {
              //       document.getElementsByClassName("el-input__inner")[0].style.border("1px solid red")
              //       this.show = true;
              //       this.content = "识别码错误"
              //   }

            } else {
                document.getElementsByClassName("el-input__inner")[0].style.border("1px solid red")
                this.show = true;
                this.content = "请输入识别码"
            }
        },
        change() {
            document.getElementsByClassName("el-input__inner")[0].style.border("1px solid #DCDFE6")
            this.show = false;
        },
    }
}
</script>
<style>
.code {
    position: relative;
}

.code span {
    position: absolute;
    top: calc(100%+10px);
    left: 0px;
    color: red;
    font-size: 12px;
}
</style>