<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="24">
        <!--表格-->
        <el-col :span="6">
          <el-card>
            <div
              slot="header"
              class="clearfix"
            >
              <span style="font-size: 16px; font-weight: 700">物料检验记录表</span>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handleCreate"
            >
              新增
            </el-button>
            <!--表格列表-->
            <el-table
              v-el-height-adaptive-table="{ bottomOffset: 50 }"
              :data="recordformList.results"
              border
              fit
              stripe
              highlight-current-row
              height="100"
              @current-change="handleCurrentChange"
            >
              <el-table-column type="index" width="50"/>
              <el-table-column label="表名称">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-link
                    v-if="checkPermission(['material_update'])"
                    @click="handleLook(scope)"
                  >查看
                  </el-link
                  >
                  <el-link
                    v-if="checkPermission(['material_update'])"
                    @click="handleEdit(scope)"
                  >编辑
                  </el-link
                  >
                  <el-link
                    v-if="checkPermission(['material_delete'])"
                    type="danger"
                    @click="handleDelete(scope)"
                  >删除
                  </el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <!--新增、编辑记录表格-->
            <el-dialog
              :visible.sync="dialogVisible"
              :title="dialogType === 'edit' ? '编辑记录表格' : '新增记录表格'"
            >
              <el-form
                ref="Forms"
                :model="recordform"
                label-width="80px"
                label-position="right"
              >
                <el-form-item label="表格名称" prop="name">
                  <el-input v-model="recordform.name" placeholder="表格名称"/>
                </el-form-item>
              </el-form>
              <div style="text-align: right">
                <el-button type="danger" @click="dialogVisible = false"
                >取消
                </el-button>
                <el-button type="primary" @click="recordformconfirm('Forms')"
                >确认
                </el-button>
              </div>
            </el-dialog>
            <!--表格展示-->
            <el-dialog
              :visible.sync="dialogVisibleForm"
              :title="tableForm.name"
            >
              <el-form ref="Forms" label-width="80px" :model="checkForm">
                <el-row>
                  <!--canvas 不能与v-if同用-->
                  <el-form-item label="图表">
                    <div>
                      <img id="canvasImg" src="./../../assets/glass.png" style="width:300px;height: 200px;display: none">
                      <div style="position: relative;display: flex">
                        <canvas id="canvas" width="300" height="200">
                          您的浏览器不支持绘图，请升级或更换浏览器！
                        </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>
                          <!--<button @click="restuya()">清除批注</button>-->
                          <div class="canvasBtn" @click="back()">回退</div>
                          <div class="canvasBtn" @click="saveTu()">保存</div>
                          <!--<p>保存的图片</p>-->
                        </div>
                        <div id="res"></div>
                      </div>
                    </div>
                  </el-form-item>

                </el-row>
                <el-row
                  v-for="(item, $index) in fieldList.results"
                  v-show="filterBlock(item.parent,item.rule_expression,item.need_judge)"
                  :key="$index"
                >
                  <!--<div v-if="item.field_type === 'img'">-->
                  <el-form-item v-if="item.field_type === 'string'" :label="item.field_name">
                    <el-input
                      v-model="checkForm[item.field_key]"
                      placeholder="请输入"
                      @input="keyChange(item.field_key)"
                    />
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.field_type === 'int'"
                    :label="item.field_name"
                  >
                    <el-input
                      v-model="checkForm[item.field_key]"
                      type="number"
                      placeholder="请输入"
                      @input="keyChange(item.field_key)"
                    />
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.field_type === 'float'"
                    :label="item.field_name"
                  >
                    <el-input
                      v-model="checkForm[item.field_key]"
                      type="number"
                      placeholder="请输入"
                      @input="keyChange(item.field_key)"
                    />
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.field_type === 'date'"
                    :label="item.field_name"
                  >
                    <el-date-picker
                      v-model="checkForm[item.field_key]"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      style="width: 100%"
                      @change="keyChange(item.field_key)"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.field_type === 'datetime'"
                    :label="item.field_name"
                  >
                    <el-date-picker
                      v-model="checkForm[item.field_key]"
                      type="datetime"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%"
                      @change="keyChange(item.field_key)"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.field_type === 'select'"
                    :label="item.field_name"
                  >
                    <el-select
                      v-model="checkForm[item.field_key]"
                      style="width: 100%"
                      placeholder="请选择"
                      @change="keyChange(item.field_key)"
                    >
                      <el-option
                        v-for="item1 in item.field_choice"
                        :key="item1"
                        :label="item1"
                        :value="item1"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    v-else-if="item.field_type === 'selects'"
                    :label="item.field_name"
                  >
                    <el-select
                      v-model="checkForm[item.field_key]"
                      style="width: 100%"
                      multiple
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item1 in item.field_choice"
                        :key="item1"
                        :label="item1"
                        :value="item1"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
              </el-form>
            </el-dialog>
          </el-card>
        </el-col>
        <!--表格字段-->
        <el-col :span="18">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: 300">记录字段</span>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handlefieldCreate"
            >新增
            </el-button
            >
            <!--表格字段列表-->
            <el-table
              :data="fieldList.results"
              border
              fit
              stripe
              highlight-current-row
              height="100"
              v-el-height-adaptive-table="{ bottomOffset: 50 }"
            >
              <el-table-column type="index" width="50"/>
              <el-table-column label="字段名称">
                <template slot-scope="scope">{{
                  scope.row.field_name
                  }}
                </template>
              </el-table-column>

              <el-table-column label="字段类型">
                <template slot-scope="scope">{{
                  options_[scope.row.field_type]
                  }}
                </template>
              </el-table-column>

              <el-table-column label="字段标识">
                <template slot-scope="scope">{{
                  scope.row.field_key
                  }}
                </template>
              </el-table-column>
              <!--
              <el-table-column label="上限值">
                <template slot-scope="scope">{{
                  scope.row.high_limit
                }}</template>
              </el-table-column>
              <el-table-column label="上限规则">
                <template slot-scope="scope">{{
                  highoptionss_[scope.row.high_rule]
                }}</template>
              </el-table-column>
              <el-table-column label="下限值">
                <template slot-scope="scope">{{
                  scope.row.low_limit
                }}</template>
              </el-table-column>
              <el-table-column label="下限规则">
                <template slot-scope="scope">
                  {{ lowoptionss_[scope.row.low_rule] }}</template
                >
              </el-table-column>
              !-->
              <el-table-column label="是否判定">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.need_judge == true">是</el-tag>
                  <el-tag v-else>否</el-tag>
                </template>
              </el-table-column>

              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-link
                    v-if="checkPermission(['material_update'])"
                    @click="handlefieldEdit(scope)"
                  >编辑
                  </el-link
                  >
                  <el-link
                    v-if="checkPermission(['material_delete'])"
                    type="danger"
                    @click="handlefieldDelete(scope)"
                  >删除
                  </el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="fieldList.count > 0"
              :total="fieldList.count"
              :page.sync="listQueryfield.page"
              :limit.sync="listQueryfield.page_size"
              @pagination="fieldLists"
            />
            <!--表格字段新增编辑-->
            <el-dialog
              :visible.sync="dialogVisible1"
              :title="dialogType1 === 'edit' ? '编辑表格字段' : '新增表格字段'"
            >
              <el-form
                ref="Form"
                :model="field"
                label-width="100px"
                label-position="right"
              >
                <el-form-item label="字段类型" prop="field_type">
                  <el-select
                    style="width: 100%"
                    v-model="field.field_type"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in fieldtypeoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="字段标识" prop="field_key">
                  <el-input v-model="field.field_key" placeholder="字段标识" @input="checkValue"/>
                </el-form-item>
                <el-form-item label="字段名称" prop="field_name">
                  <el-input v-model="field.field_name" placeholder="字段名称"/>
                </el-form-item>
                <el-form-item
                  label="选项"
                  v-show="
                    field.field_type == 'radio' ||
                    field.field_type == 'checkbox' ||
                    field.field_type == 'select' ||
                    field.field_type == 'selects'
                  "
                >
                  <el-button @click.prevent="addDomain" style="border: none">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span style="font-size: 14px">添加</span>
                  </el-button>
                  <el-row
                    v-for="(domain, $index) in field_choice"
                    :key="domain + $index"
                    style="margin-bottom: 10px"
                  >
                    <el-col :span="20">
                      <el-input
                        v-model="field_choice[$index]"
                        auto-complete="off"
                      ></el-input>
                    </el-col>
                    <el-col
                      :span="3"
                      style="text-align: center"
                      v-if="$index !== 0"
                    >
                      <i
                        class="el-icon-remove-outline"
                        @click.prevent="removeDomain($index, '1')"
                        style="color: red; font-size: 16px"
                      ></i>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="字段父级">
                  <treeselect v-model="field.parent" :multiple="false" :options="treeDate" placeholder="字段父级"/>
                </el-form-item>
                <el-form-item label="是否需要判定" prop="need_judge">
                  <el-switch v-model="field.need_judge"></el-switch>
                </el-form-item>
                <!--
                              <el-form-item
                                label="上限值"
                                v-if="field.need_judge == true"
                                prop="high_limit"
                              >
                                <el-input-number
                                  v-model="field.high_limit"
                                  :precision="2"
                                  :min="0"
                                ></el-input-number>
                              </el-form-item>
                              <el-form-item
                                label="上限规则"
                                v-if="field.need_judge == true"
                                prop="high_rule"
                              >
                                <el-select
                                  style="width: 100%"
                                  v-model="field.high_rule"
                                  placeholder="请选择"
                                >
                                  <el-option
                                    v-for="item in highoptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                  >
                                  </el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item
                                label="下限值"
                                v-if="field.need_judge == true"
                                prop="low_limit"
                              >
                                <el-input-number
                                  v-model="field.low_limit"
                                  :precision="2"
                                  :min="0"
                                ></el-input-number>
                              </el-form-item>
                              <el-form-item
                                label="下限规则"
                                v-if="field.need_judge == true"
                                prop="low_rule"
                              >
                                <el-select
                                  style="width: 100%"
                                  v-model="field.low_rule"
                                  placeholder="请选择"
                                >
                                  <el-option
                                    v-for="item in lowoptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                  >
                                  </el-option>
                                </el-select>
                              </el-form-item>

              !-->
                <el-form-item label="表达式" v-if="field.need_judge === true">
                  <el-input v-model="field.rule_expression" type="textarea"/>
                </el-form-item>
                <el-form-item label="头像" v-if="field.field_type === 'img'">
                  <el-upload
                    class="avatar-uploader"
                    :action="upUrl"
                    accept="image/jpeg, image/gif, image/png, image/bmp"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :headers="upHeaders"
                  >
                    <img v-if="field.TempPicture" :src="field.TempPicture" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                  <el-input-number
                    v-model="field.sort"
                    :min="1"
                    placeholder="排序"
                  ></el-input-number>
                </el-form-item>
              </el-form>
              <div style="text-align: right">
                <el-button type="danger" @click="dialogVisible1 = false"
                >取消
                </el-button
                >
                <el-button type="primary" @click="fieldconfirm('Form')"
                >确认
                </el-button
                >
              </div>
            </el-dialog>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import checkPermission from "@/utils/permission";
  import {getEquipmentAll} from "@/api/equipment";
  import vueJsonEditor from "vue-json-editor";
  import {upUrl, upHeaders} from "@/api/file";
  import {
    getrecordformList,
    createrecordform,
    updaterecordform,
    deleterecordform,
    getrffieldList,
    createrffield,
    updaterffield,
    deleterffield,
  } from "@/api/mtm";
  import {genTree} from "@/utils";
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  const defaultstep = {
    name: "",
    number: "",
  };

  const defaultrecordform = {};
  const defaultfield = {};
  let preDrawAry = [];
  export default {
    components: {Pagination, vueJsonEditor, Treeselect},
    data() {
      return {
        step: defaultstep,
        stepList: [],
        upHeaders: upHeaders(),
        upUrl: upUrl(),
        fileList: [],
        listLoading: true,
        need_judge: false,
        dialogVisibles: false,
        dialogVisibleForm: false,
        dialogTypes: "new",
        field: {
          field_type: "",
          field_key: "",
          field_name: "",
          sort: "",
          parent: "",
          TempPicture: "",
          field_choice: [""],
        },
        field_choice: [""],
        options: [],
        optio: [],
        rule1: {
          name: [{required: true, message: "请输入", trigger: "blur"}],
          number: [{required: true, message: "请输入", trigger: "blur"}],
        },
        recordform: defaultrecordform,
        dialogType: "new",
        dialogVisible: false,
        dialogType1: "new",
        dialogVisible1: false,
        tableForm: defaultrecordform,
        checkForm:{
          hhh:'',
        },
        listQueryrecordform: {
          page: 1,
          page_size: 20,
        },
        recordformList: {
          count: 0,
        },
        fieldList: {
          count: 0,
        },
        treeDate: [],
        listQueryfield: {
          page: 1,
          page_size: 20,
        },
        highoptions: [
          {value: 1, label: "<"},
          {value: 2, label: "<="},
        ],
        lowoptions: [
          {value: 1, label: ">"},
          {value: 2, label: ">="},
        ],
        highoptionss_: {
          1: "<",
          2: "<=",
        },
        lowoptionss_: {
          1: ">",
          2: ">=",
        },
        options_: {
          string: "文本",
          int: "整数",
          float: "小数",
          date: "日期",
          datetime: "日期时间",
          select: "单选",
          selects: "多选",
          img: "图片",
        },
        fieldtypeoptions: [
          {
            value: "string",
            label: "文本",
          },
          {
            value: "int",
            label: "整数",
          },
          {
            value: "float",
            label: "小数",
          },
          {
            value: "date",
            label: "日期",
          },
          {
            value: "time",
            label: "时间",
          },
          {
            value: "datetime",
            label: "日期时间",
          },
          {
            value: "select",
            label: "单选",
          },
          {
            value: "selects",
            label: "多选",
          },
          {
            value: "img",
            label: "图片",
          },
        ],
        typeoptions: [
          {
            value: 1,
            label: "生产记录",
          },
        ],
        canvas:null,
        ctx:null,
        myCanvas_rect:null,
        Txt:null,
        word:null,
        widths:0,
        heights:0,
        lineW:3,
        colorF:"#e42343",
        imgData:'',
        canvasImg:'',
      };
    },
    computed: {},
    watch: {},
    created() {
      this.material = this.$route.params.id;
      this.recordformLists();
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.field.TempPicture = res.data.path;

      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isLt2M;
      },
      keyChange(key){
        let y = this.checkForm[key];
        this.$set(this.checkForm,key,y);
        this.fieldList.results=[...this.fieldList.results];
        this.filterBlock();
      },
      filterBlock(parent,rule,judge){
        let that = this;
          if(parent!==''&&parent!==null&&parent!==undefined){
                if(judge){
                      if(rule!==''&&rule!==null&&rule!==undefined){
                            let reg = /\{(.+?)\}/g;
                            //let str = rule.replace(temp,'').replace('$','');//=='有'
                            //let y = that.checkForm[key];
                            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);
                            }
                            debugger;
                      }else{
                        return false;
                      }
                }else{
                  return true;
                }
          }else{
            return true;
          }
      },
      checkValue() {
        this.field.field_key = this.field.field_key.replace(/[^a-zA-Z]/g, '');
      },
      //添加字段选项
      addDomain() {
        this.field_choice.push("");
      },
      //删除字段选项
      removeDomain(index) {
        this.field_choice.splice(index, 1);
      },
      handleLook(scope) {
        let that = this;
        that.tableForm = Object.assign({}, scope.row); // copy obj
        that.formID = that.tableForm.id;
        that.listQueryfield.form = that.formID;
        getrffieldList(that.listQueryfield).then((response) => {
          if (response.data) {
            debugger;
            that.fieldList = response.data;
            let list = response.data.results;
            for(let i=0;i<list.length;i++){
              let key = list[i].field_key;
              that.checkForm[key]='';
              that.$set(that.checkForm,key,'')
            }
            that.dialogVisibleForm = true;
            setTimeout(function(){
              that.canvasInit();
            },500);
          }
        });
        that.fieldLists();
      },
      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);
      },
      checkPermission,

      handleCurrentChange(row) {
        this.formID = row.id;
        this.fieldLists();
        this.fieldLists1();
      },
      recordformLists() {
        this.listQueryrecordform.material = this.material;
        this.listQueryrecordform.type = 2;
        getrecordformList(this.listQueryrecordform).then((response) => {
          if (response.data) {
            this.recordformList = response.data;
          }
        });
      },
      fieldLists() {
        let that = this;
        that.listQueryfield.form = that.formID;
        getrffieldList(that.listQueryfield).then((response) => {
          if (response.data) {
            that.fieldList = response.data;
            that.fieldList.results=[...that.fieldList.results]
          }
        });
      },
      fieldLists1() {
        let params = new Object();
        let that = this;
        params.page = 0;
        params.form = this.formID;
        getrffieldList(params).then((response) => {
          if (response.data) {
            let data = response.data;
            data.forEach(item => {
              item.name = item.field_name;
            });
            that.treeDate = genTree(data);
          }
        });
      },
      draw(){
        let canvasImg = document.getElementById("canvasImg");
        canvasImg.style.width = '300px';
        canvasImg.style.height = '200px';
        this.ctx.drawImage(canvasImg,0,0,300,200);
      },
      // 叉号
      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);
          }
        }
      },

     /* // 删除批注
      restuya(){
        this.word.style.display="none";
        this.Txt.style.display="none";
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
        window.location.reload();
      },*/

      // 撤销
      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 canvas = document.getElementById('canvas');
        let image = new Image();
        image = canvas.toDataURL('image/png');
        this.canvasImg = image;
        // document.getElementById('res').innerHTML = '<img style="border: 1px solid #666666;" src="'+image+'">';
      },


      //新增记录表
      handleCreate() {
        this.recordform = Object.assign({}, defaultrecordform);
        this.dialogType = "new";
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["Forms"].clearValidate();
        });
      },
      //新增字段
      handlefieldCreate() {
        this.field_choice = [""];
        // this.field = Object.assign({}, defaultfield);
        this.dialogType1 = "new";
        this.dialogVisible1 = true;
        this.$nextTick(() => {
          this.$refs["Form"].clearValidate();
        });
      },
      handleEdit(scope) {
        this.recordform = Object.assign({}, scope.row); // copy obj
        this.dialogType = "edit";
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["Forms"].clearValidate();
        });
      },
      handlefieldEdit(scope) {
        this.field = Object.assign({}, scope.row); // copy obj
        this.field_choice = this.field.field_choice;
        this.dialogType1 = "edit";
        this.dialogVisible1 = true;
        this.$nextTick(() => {
          this.$refs["Form"].clearValidate();
        });
      },
      handleDelete(scope) {
        this.$confirm("确认删除?", "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "error",
        })
          .then(async () => {
            await deleterecordform(scope.row.id);
            this.recordformLists();
            this.$message.success("成功");
          })
          .catch((err) => {
            console.error(err);
          });
      },
      handlefieldDelete(scope) {
        this.$confirm("确认删除?", "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "error",
        })
          .then(async () => {
            await deleterffield(scope.row.id);
            this.fieldLists();
            this.fieldLists1();
            this.$message.success("成功");
          })
          .catch((err) => {
            console.error(err);
          });
      },
      async recordformconfirm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            const isEdit = this.dialogType === "edit";
            if (isEdit) {
              this.recordform.material = this.material;
              this.recordform.type = 2;
              updaterecordform(this.recordform.id, this.recordform).then(
                (res) => {
                  if (res.code >= 200) {
                    this.recordformLists();
                    this.dialogVisible = false;
                    this.$message.success("成功");
                  }
                }
              );
            } else {
              this.recordform.material = this.material;
              this.recordform.type = 2;
              createrecordform(this.recordform).then((res) => {
                if (res.code >= 200) {
                  this.recordformLists();
                  this.dialogVisible = false;
                  this.$message.success("成功");
                }
              });
            }
          } else {
            return false;
          }
        });
      },
      async fieldconfirm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            const isEdit = this.dialogType1 === "edit";
            if (isEdit) {
              this.field.form = this.formID;
              this.field.field_choice = this.field_choice;
              updaterffield(this.field.id, this.field).then((res) => {
                if (res.code >= 200) {
                  this.fieldLists();
                  this.fieldLists1();
                  this.dialogVisible1 = false;
                  this.$message.success("成功");
                }
              });
            } else {
              this.field.form = this.formID;
              this.field.field_choice = this.field_choice;
              debugger;
              console.log(this.field);
              createrffield(this.field).then((res) => {
                if (res.code >= 200) {
                  this.fieldLists();
                  this.fieldLists1();
                  this.dialogVisible1 = false;
                  this.$message.success("成功");
                }
              });
            }
          } else {
            return false;
          }
        });
      },
    },
  };
</script>
<style>
  .my-label {
    background: #e1f3d8;
  }

  .my-content {
    background: #fde2e2;
  }
  canvas{
    border:1px solid #000000;
    cursor: crosshair;
  }
  .canvasBtnWrap{
    display: flex;
    flex-direction: column;
    width: 80px;
    padding-left: 20px;
    justify-content: space-between;
  }
  .canvasBtn{
    width: 70px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #aaaaaa;
    text-align: center;
    border-radius: 15px;
  }
  .hide{
    display: none;
  }
  #txt{
    position: absolute;
    top: 1%;
    left: 1%;
    width: 150px;
    height: 30px;
    border:1px solid #e42343;
  }
  #word{
    position: absolute;
    width: 150px;
    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;
  }
</style>
