<template>
  <div>
    <el-form
      id="customerForm"
      ref="checkForm"
      label-width="100px"
      :model="checkForm"
    >
      <el-row>
        <el-col
          v-for="(item, $index) in formData"
          v-show="filterBlock(item.parent,item.display_expression)"
          :key="$index"
          :span="12"
          style="position: relative"
          :class="item.need_judge&&item.is_testok===true?'adopt':item.need_judge&&item.is_testok===false?'fail':''"
        >
          <el-form-item
            v-if="item.field_type === 'string'"
            :label="item.field_name"
          >
            <el-input
              disabled
              class="halfWidth originBlock"
              v-model="originForm[item.field_key]"
              placeholder="请输入"
              @input="keyChange($index,item.field_key)"
            />
            <el-input
              class="halfWidth"
              v-model="checkForm[item.field_key]"
              placeholder="请输入"
              @input="keyChange($index,item.field_key)"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.field_type === 'int'"
            :label="item.field_name"
          >
            <el-input
              disabled
              class="halfWidth originBlock"
              v-model="originForm[item.field_key]"
              type="number"
              placeholder="请输入"
              @input="keyChange($index,item.field_key)"
            />
            <el-input
              class="halfWidth"
              v-model="checkForm[item.field_key]"
              type="number"
              placeholder="请输入"
              @input="keyChange($index,item.field_key)"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.field_type === 'float'"
            :label="item.field_name"
          >
            <el-input
              disabled
              class="halfWidth originBlock"
              v-model="originForm[item.field_key]"
              type="number"
              placeholder="请输入"
              @input="keyChange($index,item.field_key)"
            />
            <el-input
              class="halfWidth"
              v-model="checkForm[item.field_key]"
              type="number"
              placeholder="请输入"
              @input="keyChange($index,item.field_key)"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.field_type === 'date'"
            :label="item.field_name"
          >
            <el-date-picker
              disabled
              v-model="originForm[item.field_key]"
              class="halfWidth originBlock"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              @change="keyChange($index,item.field_key)"
            />
            <el-date-picker
              v-model="checkForm[item.field_key]"
              class="halfWidth"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              @change="keyChange($index,item.field_key)"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.field_type === 'datetime'"
            :label="item.field_name"
          >
            <el-date-picker
              disabled
              v-model="originForm[item.field_key]"
              class="halfWidth originBlock"
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="keyChange($index,item.field_key)"
            />
            <el-date-picker
              v-model="checkForm[item.field_key]"
              class="halfWidth"
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="keyChange($index,item.field_key)"
            />
          </el-form-item>
          <el-form-item
            v-else-if="item.field_type === 'select'"
            :label="item.field_name"
          >
            <el-select
              disabled
              v-model="originForm[item.field_key]"
              class="halfWidth originBlock"
              placeholder="请选择"
              @change="keyChange($index,item.field_key)"
            >
              <el-option
                v-for="item1 in item.field_choice"
                :key="item1"
                :label="item1"
                :value="item1"
              />
            </el-select>
            <el-select
              v-model="checkForm[item.field_key]"
              class="halfWidth"
              placeholder="请选择"
              @change="keyChange($index,item.field_key)"
            >
              <el-option
                v-for="item1 in item.field_choice"
                :key="item1"
                :label="item1"
                :value="item1"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-else-if="item.field_type === 'selects'"
            :label="item.field_name"
          >
            <el-select
              disabled
              v-model="originForm[item.field_key]"
              class="halfWidth originBlock"
              multiple
              placeholder="请选择"
              @change="keyChange($index,item.field_key)"
            >
              <el-option
                v-for="item1 in item.field_choice"
                :key="item1"
                :label="item1"
                :value="item1"
                @change="keyChange($index,item.field_key)"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="checkForm[item.field_key]"
              class="halfWidth"
              multiple
              placeholder="请选择"
              @change="keyChange($index,item.field_key)"
            >
              <el-option
                v-for="item1 in item.field_choice"
                :key="item1"
                :label="item1"
                :value="item1"
                @change="keyChange($index,item.field_key)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <span v-show="item.help_text" class="helpText">说明：{{item.help_text}}</span>
          <span v-if="item.need_judge&&item.is_testok===true" class="adoptTip">合格</span>
          <span v-if="item.need_judge&&item.is_testok===false" class="failTip">不合格</span>
        </el-col>
      </el-row>
      <el-row v-show="hasPicture">

        <el-form-item label="图表">
          <div class="halfWidth">
            <img :src="originImg">
          </div>
          <div class="halfWidth">
            <img id="canvasImg" :src="img" style="width:500px;height: 300px;display: none">
            <div style="position: relative;display: flex;flex-direction: column;
                 border: 1px solid #DCDFE6;">
              <canvas id="canvas" width="500" height="300">
                您的浏览器不支持绘图，请升级或更换浏览器！
              </canvas>
              <input type="text" value="" class="hide" id="txt" placeholder="请输入文字">
              <textarea class="hide" id="word" cols="15" rows="5" placeholder="请输入文字" autofocus></textarea>
              <input id="inputV" type="hidden" value="1">
              <div class="canvasBtnWrap">
                <div class="canvasBtn" @click="error1">标记</div>
                <div class="canvasBtn" @click="word1()">文字</div>
                <div class="canvasBtn" @click="back()">回退</div>
              </div>
              <div id="res"></div>
            </div>
          </div>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="是否合格">
          <el-radio v-model="is_testok" :label="testokTrue">检查合格</el-radio>
          <el-radio v-model="is_testok" :label="testokFalse">检查不合格</el-radio>
        </el-form-item>
        <div class="dialog-footer" style="text-align: right">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitfield">提交检查项目</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { upFile } from "@/api/file";
  let preDrawAry = [];
  export default {
    name: "review",
    props: {
      results:{
        type:Array,
        default: () => {
          return []
        }} ,
      originList:{
        type:Array,
        default: () => {
          return []
        }} ,
      formID: {
        type:Number,
        default:0
      },
      wproduct: {
        type:Number,
        default:0
      },
      origintest: {
        type:Number,
        default:0
      },
      hasPicture:{
        type:Boolean,
        default:false
      }
    },
    mounted() {
      let that = this;
      this.form = this.formID;
      let formData=this.results;
      this.origins=this.originList;
      that.wproductId=this.wproduct;
      that.origin_test=this.origintest;
      formData.forEach(item => {
        let obj = new Object();
        obj = item;
        obj.is_testok = null;//是否合格
        that.formData.push(obj)
      });
      that.formData=[...that.formData];
      //当前表的数据存储
      for(let i=0;i<this.results.length;i++){
        let key = this.results[i].field_key;
        //checkForm接收表单数据的对象
        that.checkForm[key]='';
        that.$set(that.checkForm,key,'')
      }
      //判定项
      let listJudge = this.formData.filter(item => {
        return item.need_judge === true;
      });
      listJudge.forEach(item => {
        let obj = new Object();
        obj = item;
        that.judgeList.push(obj)
      });
      //原始表的数据
      for(let i=0;i<this.origins.length;i++){
        let key = this.origins[i].field_key;
        that.originForm[key]=this.origins[i].field_key;
        that.$set(that.originForm,key,this.origins[i].field_value)
      }
      //图片地址
      let  imag= this.formData.filter(item => {
        return item.field_type === 'draw';
      });
      that.img = 'http://47.95.0.242:2222'+imag[0].draw_template;

      let  originImag= this.origins.filter(item => {
        return item.field_type === 'draw';
      });
      that.originImg = new Image();
      that.originImg.crossOrigin = '';
      that.originImg = originImag[0].field_value;

      listJudge.forEach(item => {
        let obj = new Object();
        obj = item;
        that.judgeList.push(obj)
      });
      setTimeout(function(){
        that.canvasInit();
      },500);
    },
    data(){
      return{
        field:[],
        origins:[],
        checkForm:{},
        originForm:{},
        testrecord:{
          form:this.formID,
          record_data:[],
          is_testok:true,
          wproduct:null,
        },
        origin_test:null,
        canvas:null,
        wproductId:null,
        ctx:null,
        myCanvas_rect:null,
        Txt:null,
        word:null,
        img:null,
        originImg:null,
        widths:0,
        heights:0,
        lineW:3,
        colorF:"#e42343",
        imgUrl:'',
        imgData:'',
        canvasImg:'',
        checkType:'',
        formData:[],//表单数组
        judgeList:[],//判定数组
        is_testok:true,
        testokTrue:true,
        testokFalse:false,
      }
    },
    methods:{
      filterBlock(parent,rule){
        // debugger;
        let that = this;
        if(parent!==''&&parent!==null&&parent!==undefined){
          if(rule!==''&&rule!==null&&rule!==undefined){
            let reg = /\{(.+?)\}/g;
            if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
              let tam = '', arr = [];
              if(rule.indexOf('||')>-1){
                arr = rule.split('||');
              }else{
                arr = rule.split('&&');
              }
              for (let i = 0;i<arr.length;i++){
                //获取判断依据
                let a = '';
                a = arr[i].replace(/`/g,'');
                a = '`'+ a+'`';
                let tem =a.match(reg)[0];
                let ky = tem.replace(/\{|\}/g, '');//qipao
                if(that.checkForm[ky]){
                  //替换变量
                  a = a.replace(ky, 'yyy');
                  let yyy = "'"+that.checkForm[ky]+"'";
                  if(eval(eval( a))){
                    tam += 'true';
                  }else{
                    tam += 'false';
                  }
                }else{
                  tam += 'false';
                }
              }
              let rea = true;
              if(rule.indexOf('||')>-1){
                if( tam.indexOf('true')>-1){
                  rea = true;
                }else{
                  rea = false;
                }
              }else{
                if( tam.indexOf('false')>-1){
                  rea = false;
                }else{
                  rea = true;
                }
              }
              return rea;
            }else{
              let temp =rule.match(reg)[0];
              let key = temp.replace(/\{|\}/g, '');//qipao
              let  a = rule.replace(key, 'yy');
              a = a.replace(key, 'yy');
              let yy = "'"+that.checkForm[key]+"'";
              return eval(eval(a));
              // return eval("'"+y+"'"+str);
            }
          }else{
            return false;
          }
        }else{
          return true;
        }
      },
      keyChange(index,key){
        let that = this;
        let reg = /\{(.+?)\}/g;
        that.$forceUpdate();
        that.$nextTick(()=>{
          if(that.formData[index].need_judge===true){
            let arr = [],str = '';
            let item = that.formData[index].rule_expression.replace(/`/g,'');
            if(item.indexOf('||')>-1){
              arr = item.split('||');
            }else if(item.indexOf('&&')>-1){
              arr = item.split('&&');
            }else{
              arr.push(item);
            }
            //对每个条件进行判定，如果符合，
            for (let i = 0;i<arr.length;i++){
              //获取判断依据
              let a = '`'+ arr[i]+'`';
              let tem =a.match(reg)[0];
              let ky = tem.replace(/\{|\}/g, '');//qipao
              //有值时进行判断
              if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
                //替换变量
                a = a.replace(ky, 'yyy');
                let yyy = "'"+that.checkForm[ky]+"'";
                if(eval(eval( a))){
                  str += 'true';
                }else{
                  str += 'false';
                }
              }
            }
            if(item.indexOf('&&')>-1){
              if(str.indexOf('false')>-1){
                that.formData[index].is_testok = true;
                that.$set(that.formData[index],'is_testok',true)
              }else{
                that.formData[index].is_testok = false;
                that.$set(that.formData[index],'is_testok',false)
              }
            }else{
              if(str.indexOf('true')>-1){
                that.formData[index].is_testok = false;
                that.$set(that.formData[index],'is_testok',false)
              }else{
                that.formData[index].is_testok = true;
                that.$set(that.formData[index],'is_testok',true)
              }
            }
            that.$forceUpdate();
          }
          that.$forceUpdate();
          that.judgeList = that.formData.filter(item => {
            return item.need_judge === true;
          });
          that.judgeForm();
        })
      },
      /*  图片保存  */
      //初始化canvas
      canvasInit(){
        let that = this;
        preDrawAry = [];
        that.canvas = document.getElementById('canvas');
        that.ctx = that.canvas.getContext('2d');
        that.myCanvas_rect = that.canvas.getBoundingClientRect();
        that.Txt = document.getElementById('txt');
        that.word = document.getElementById('word');
        that.widths = that.myCanvas_rect.width;
        that.heights = that.myCanvas_rect.height;
        setTimeout(function(){
          that.draw();
        },500);
      },
      //画布添加背景模板图
      draw(){
        let canvasImg = document.getElementById("canvasImg");
        canvasImg.setAttribute("crossOrigin",'anonymous');
        canvasImg.style.width = '500px';
        canvasImg.style.height = '300px';
        this.ctx.drawImage(canvasImg,0,0,500,300);
      },
      // 叉号
      error1(){
        let canvas1 = document.getElementById('canvas');
        let ctx1 = canvas1.getContext('2d');
        this.Txt.style.display="none";
        document.getElementById('word').style.display="none";
        ctx1.closePath();
        canvas1.onmousedown=function () {
          this.imgData= ctx1.getImageData(0,0,canvas1.width,canvas1.height);
          preDrawAry.push(this.imgData);
          ctx1.beginPath();
          ctx1.strokeStyle = "#e42343";
          ctx1.lineWidth = "3";
          ctx1.lineJoin="round";
        };
        //鼠标按下的位置
        canvas1.onmouseup=function (ev) {
          let oldX = ev.offsetX;
          let oldY = ev.offsetY;
          ctx1.moveTo(oldX,oldY);
          ctx1.lineTo(ev.offsetX+10,ev.offsetY+10);
          ctx1.moveTo(ev.offsetX+10,ev.offsetY);
          ctx1.lineTo(ev.offsetX,ev.offsetY+10);
          ctx1.stroke();
        };
        this.ctx.closePath();
      },
      // 文字先写字
      text(){
        let canvas2 = document.getElementById('canvas');
        let ctx2 = canvas2.getContext('2d');
        let Txt2 = document.getElementById('txt');
        Txt2.style.display="block";
        document.getElementById('word').style.display="none";
        ctx2.font="16px Microsoft Yahei";
        canvas2.onmousedown=function (ev) {
          this.imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
          preDrawAry.push(this.imgData);
          var v = Txt2.value;
          //            console.log(v);
          if (v != '') {
            var oldX = ev.offsetX;
            var oldY = ev.offsetY;
            // console.log(oldX,oldY);
            ctx2.moveTo(oldX,oldY);
            canvas2.onmouseup=function () {
              ctx2.fillStyle=this.colorF;
              ctx2.fillText(v,oldX,oldY);
              canvas2.TextAutoLine(v,canvas2,oldX,oldY,20);
              // Txt.value = "";
              Txt2.style.display="none";
            }
          }
        }
      },
      // 文字
      word1(){
        let canvas3 = document.getElementById('canvas');
        let ctx3 = canvas3.getContext('2d');
        let Txt3 = document.getElementById('txt');
        let word3 = document.getElementById('word');
        Txt3.style.display="none";
        ctx3.font="16px Microsoft Yahei";
        canvas3.onmousedown=function () {
          ctx3.closePath();
        }
        canvas3.onmouseup=function (ev) {
          var inputV= document.getElementById('inputV').value;
          if(inputV == 1){
            document.getElementById('word').focus();
            //               console.log(ev.offsetX,ev.offsetY);
            var oldX = ev.offsetX;
            var oldY = ev.offsetY;
            word3.style.display="block";
            word3.style.left=oldX+'px';
            word3.style.top =oldY+'px';

            word3.onblur=function () {
              let v = word3.value;
              if(v != '' && v != ' '){
                this.imgData=ctx3.getImageData(0,0,canvas3.width,canvas3.height);
                let img = ctx3.getImageData(0,0,canvas3.width,canvas3.height);
                // debugger;
                preDrawAry.push(img);
                ctx3.moveTo(oldX,oldY);
                ctx3.fillStyle="#e42343";
                let lineWidth = 0;
                let canvasWidth = canvas3.width;
                let lastSubStrIndex= 0;
                for(let i=0;i<v.length;i++){
                  lineWidth+=ctx3.measureText(v[i]).width;
                  if(lineWidth>canvasWidth-oldX){
                    ctx3.fillText(v.substring(lastSubStrIndex,i),oldX,(oldY+10));
                    oldY+=20;
                    lineWidth=0;
                    lastSubStrIndex=i;
                  }
                  if(i==v.length-1){
                    ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
                  }
                }
                inputV ="2";
                word3.value = "";
              }
            }
          }
        }
      },
      // 文字过长超出换行toDataURL()
      canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
        let ctx = canvas.getContext("2d");
        let lineWidth = 0;
        let canvasWidth = canvas.width;
        let lastSubStrIndex= 0;
        for(let i=0;i<str.length;i++){
          lineWidth+=ctx.measureText(str[i]).width;
          if(lineWidth>canvasWidth-initX){
            ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
            initY+=lineHeight;
            lineWidth=0;
            lastSubStrIndex=i;
          }
          if(i==str.length-1){
            ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
          }
        }
      },
      // 撤销
      back(){
        this.word.style.display="none";
        this.Txt.style.display="none";
        if(preDrawAry.length>0) {
          var popData = preDrawAry.pop();
          this.ctx.putImageData(popData, 0, 0);
        }
      },
      // 回退一次
      put(){
        this.ctx.putImageData(this.imgData,0,0);
      },
      //保存
      saveTu(){
        let that = this;
        this.word.style.display="none";
        this.Txt.style.display="none";
        let canvas = document.getElementById('canvas');
        let image = new Image();
        image = canvas.toDataURL('image/png');
        this.canvasImg = image;
        let file = this.base64ToFile(image);
        let formData = new FormData();
        formData.append('file', file);
        upFile(formData).then((res) => {
          debugger;
          console.log(res);
          that.imgUrl=res.data.field;
          // console.log(res);
        })
      },
      //base64ToFile
      base64ToFile(baseUrl) {
        let arr = baseUrl.split(',');
        // let type = arr[0].match(/:(.*?);/)[1];   // 解锁图片类型
        let bytes = atob(arr[1]); // 解码base64
        let n = bytes .length;
        let bufferArray = new Uint8Array(n);
        while (n--) {
          bufferArray[n] = bytes.charCodeAt(n);
        }
        // let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
        return new File([bufferArray ],'draw.jpg');
      },
      /*  图片保存  */
      //最终表格判定
      judgeForm(){
        let that = this ,
          reg = /\{(.+?)\}/g,
          judgeList = this.judgeList;
        for(let i=0;i<judgeList.length;i++){
          let arr = [],str = '';
          let item = judgeList[i].rule_expression.replace(/`/g,'');
          if(item.indexOf('||')>-1){
            arr = item.split('||');
          }else if(item.indexOf('&&')>-1){
            arr = item.split('&&');
          }else{
            arr.push(item);
          }
          //对每个条件进行判定，如果符合，
          for (let i = 0;i<arr.length;i++){
            //获取判断依据
            let a = '`'+ arr[i]+'`';
            let tem =a.match(reg)[0];
            let ky = tem.replace(/\{|\}/g, '');//qipao
            //有值时进行判断
            if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
              //替换变量
              a = a.replace(ky, 'yyy');
              let yyy = "'"+that.checkForm[ky]+"'";
              // debugger;
              if(eval(eval( a))){
                str += 'true';
              }else{
                str += 'false';
              }
            }
          }
          if(item.indexOf('&&')>-1){
            if(str.indexOf('false')>-1){
              that.judgeList[i].is_testok = true;
            }else{
              that.judgeList[i].is_testok = false;
            }
          }else{
            if(str.indexOf('true')>-1){
              that.judgeList[i].is_testok = false;
            }else{
              that.judgeList[i].is_testok = true;
            }
          }
        }
        let real = that.judgeList.filter(item=>{
          return item.is_testok===false;
        });
        if(real.length>0){
          that.is_testok = false;
          // alert("检验不合格！")
        }else{
          that.is_testok = true;
          // alert("检验合格！")
        }
      },
      //提交检查项目
      submitfield() {
        let that = this;
        let drawArr = that.formData.filter(item=>{
          return item.field_type==='draw';
        });
        if(drawArr.length>0){
          that.word.style.display="none";
          that.Txt.style.display="none";
          let canvas = document.getElementById('canvas');
          let image = new Image();
          image = canvas.toDataURL('image/png');
          that.canvasImg = image;
          let file = that.base64ToFile(image);
          let formData = new FormData();
          formData.append('file', file);
          upFile(formData).then((res) => {
            if(res){
              let key = drawArr[0].field_key;
              that.imgUrl=res.data.file;
              that.checkForm[key] = that.imgUrl;
              that.fieldData();
            }
          });
        }else{
          that.fieldData();
        }
      },
      fieldData(){
        let that = this;
        that.field = []; //检查项目
        that.formData.forEach((item) => {
          that.field.push({
            form_field: item.id,
            field_value: that.checkForm[item.field_key],
            is_testok: item.is_testok//单项检查结果
          });
        });
        that.testrecord.form = that.formID;//检查表
        that.testrecord.record_data = that.field;//检查项列表
        that.testrecord.is_testok = that.is_testok;//检查表检查结果
        that.testrecord.wproduct = that.wproductId;//半成品ID
        this.$emit('formFunc',that.testrecord);
      },
    }
  }
</script>

<style scoped>
  canvas {
    width:500px!important;
    /*border: 1px solid #000000;*/
    cursor: crosshair;
    margin: auto;
  }

  .canvasBtnWrap {
    display: flex;
    /*flex-direction: column;*/
    /*width: 80px;*/
    /*padding-left: 20px;*/
    justify-content: flex-end;
  }

  .canvasBtn {
    width: 70px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #aaaaaa;
    text-align: center;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .hide {
    display: none;
  }

  #txt {
    position: absolute;
    top: 1%;
    left: 1%;
    width: 150px;
    height: 30px;
    border: 1px solid #e42343;
  }

  #word {
    position: absolute;
    width: 200px;
    height: 70px;
    padding: 0 2px;
    background: none;
    color: #e42343;
    border: 1px dashed #b9b9b9;
  }

  #word::-webkit-input-placeholder {
    color: #e42343;
  }

  #word::-moz-placeholder {
    color: #e42343;
  }

  #word::placeholder {
    color: #e42343;
  }

  #res {
    display: inline-block;
  }
  .helpText{
    position: absolute;
    top: 40px;
    left: 100px;
  }
  .adoptTip{
    position: absolute;
    top: 38px;
    right: 0;
    font-size: 12px;
    color: #46ce7a;
  }
  .failTip{
    position: absolute;
    top: 38px;
    right: 0;
    font-size: 12px;
    color: #ff0000;
  }
  .halfWidth{
    width: 49%!important;
    display: inline-block!important;
  }
</style>
