<template>
  <div class="service-form" v-if="pageShow">
    <div class="step">
      <div class="step-item" :class="[currIndex > 0 ? 'active' : '']">
        <i class="line" :class="[currIndex > 1 ? 'line-active' : '']"></i>
        <span>1</span>
        <div>办理须知</div>
      </div>
      <div class="step-item" :class="[currIndex > 1 ? 'active' : '']">
        <i class="line" :class="[currIndex > 2 ? 'line-active' : '']"></i>
        <span>2</span>
        <div>资料上传</div>
      </div>
      <div class="step-item" :class="[currIndex > 2 ? 'active' : '']">
        <i class="line" :class="[currIndex > 3 ? 'line-active' : '']"></i>
        <span>3</span>
        <div>表单填写</div>
      </div>
      <div class="step-item" :class="[currIndex > 3 ? 'active' : '']">
        <span>4</span>
        <div>完成提交</div>
      </div>
    </div>
    <div class="step-item" v-if="currIndex === 2">
      <div class="service-upload">
        <div class="upload-item" v-for="(item, index) in info.processAnnexDefs" :key="index">
          <div class="upload-item__title">
            <i :style="{opacity: item.mustFill === '1' ? 1 : 0}">*</i>
            <h2>请上传{{ item.annexName }}</h2>
          </div>
          <AiUploader :def="[{url:item.src}]" preview @list="imgs=>handleImage(item,imgs)" :limit="1"/>
        </div>
      </div>
      <div class="service-example" v-if="exampleList.length">
        <h2>上传样例</h2>
        <div class="service-example__list">
          <div class="service-example__item" v-for="(item, index) in exampleList" :key="index">
            <image :src="item.exampleFile.url" mode="aspectFill" @click="preview(exampleList, item.exampleFile.url)"/>
            <h2>{{ item.annexName }}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="step-item" v-if="currIndex === 3">
      <div class="step-item__form">
        <h2>{{ info.tableInfo.tableName }}</h2>
        <div class="step-item__form--group" :style="{'margin-top': index === 0 ? '20px' : '50px'}"
             v-for="(item, index) in tableForm" :key="index">
          <div class="group-title">
            <span></span>
            <h3>{{ item[0].groupName }}</h3>
          </div>
          <view v-for="(field, i) in item" :key="i">
            <div class="form-item" v-if="field.fieldDataType === '1' || field.fieldDataType === '0'">
              <div class="form-title">
                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
              </div>
              <div class="form-item__wrapper">
                <input placeholder="请输入" :maxlength="field.fieldLength ? field.fieldLength : -1"
                       v-model="field.fieldValue" :type="field.fieldDataType === '0' ? 'number' : 'text'">
              </div>
            </div>
            <div class="form-item" v-if="field.fieldDataType === '4'">
              <div class="form-title">
                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
                <span>{{ field.fieldName }}</span>
              </div>
              <div class="form-check">
                <u-radio-group v-model="field.fieldValue">
                  <u-radio
                      v-for="(dict, j) in $dict.getDict(field.dictionaryCode)" :key="j"
                      :name="dict.dictValue">
                    {{ dict.dictName }}
                  </u-radio>
                </u-radio-group>
              </div>
            </div>
            <div class="form-item" v-if="field.fieldDataType === '5'">
              <div class="form-title">
                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
              </div>
              <div class="form-check">
                <u-checkbox-group>
                  <u-checkbox
                      @change="e => checkChange(e, index, i, j)"
                      :data-index="index"
                      :data-i="i"
                      :data-j="j"
                      v-for="(dict, j) in field.dictionaryList"
                      :key="j"
                      v-model="dict.checked"
                      :name="dict.dictValue">
                    {{ dict.dictName }}
                  </u-checkbox>
                </u-checkbox-group>
              </div>
            </div>
            <div class="form-item" v-if="field.fieldDataType === '8' || field.fieldDataType === '3'">
              <div class="form-title">
                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
              </div>
              <div class="form-item__wrapper">
                <input placeholder="请选择" disabled :value="field.fieldValue || ''">
                <picker
                    mode="date"
                    :data-index="index"
                    :data-i="i"
                    @change="onDateChange">
                  <div class="form-item__choose" hover-class="text-hover">选择</div>
                </picker>
              </div>
            </div>
            <div class="form-item" v-if="field.fieldDataType === '9'">
              <div class="form-title">
                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
              </div>
              <div class="form-item__wrapper">
                <input placeholder="请选择" disabled :value="field.fieldDictName || ''">
                <picker
                    range-key="dictName"
                    :range="$dict.getDict(field.dictionaryCode)"
                    :data-index="index"
                    :data-i="i"
                    :data-dict="field.dictionaryCode"
                    @change="onPickerChange">
                  <div class="form-item__choose" hover-class="text-hover">选择</div>
                </picker>
              </div>
            </div>
          </view>
        </div>
      </div>
    </div>
    <div class="service-btn" @click="next">{{ currIndex === 3 ? '签名并提交' : '下一步' }}</div>
    <u-popup v-model="isShow" mode="bottom" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.2)'}" @close="clear">
      <div class="signature">
        <div class="signature-header">
          <div hover-class="text-hover" :hover-stay-time="100" @click="isShow = false, clear()">取消</div>
        </div>
        <div class="signature-canvas">
          <canvas
              class="handWriting"
              disable-scroll="true"
              @touchstart="uploadScaleStart"
              @touchmove="uploadScaleMove"
              @touchend="uploadScaleEnd"
              canvas-id="handWriting">
          </canvas>
        </div>
        <div class="signature-footer">
          <div class="signature-footer__left" @click="clear" hover-class="text-hover" :hover-stay-time="100">
            <i class="iconfont">&#xe72e;</i>
            <span>重新签名</span>
          </div>
          <div class="signature-btn" hover-class="text-hover" :hover-stay-time="100" @click="submitSignature">提交</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "serviceForm",
  data() {
    return {
      pageShow: false,
      currIndex: 2,
      isShow: false,
      id: '',
      list: [],
      handwriting: '',
      isHasSignature: false,
      tableForm: [],
      info: {},
      isTouch: false,
      fileManage: null
    }
  },

  computed: {
    ...mapState(['user']),

    exampleList() {
      if (!this.info.processAnnexDefs) {
        return []
      }

      return JSON.parse(JSON.stringify(this.info.processAnnexDefs)).filter(v => v.exampleFileId)
    }
  },

  onLoad(query) {
    this.id = query.id
    this.getInfo(query.id)
  },

  onReady() {
  },

  methods: {
    clear() {
      this.isTouch = false
      this.handwriting.retDraw()
    },

    uploadScaleStart(event) {
      this.handwriting.uploadScaleStart(event)
    },

    uploadScaleMove(event) {
      this.isTouch = true
      this.handwriting.uploadScaleMove(event)
    },

    uploadScaleEnd(event) {
      this.handwriting.uploadScaleEnd(event)
    },

    submitSignature() {
      if (!this.isTouch) {
        return this.$toast('签名不能为空')
      }

      this.handwriting.saveCanvas().then(res => {
        uni.getFileSystemManager().readFile({
          filePath: res,
          encoding: 'base64',
          success: res => {
            this.$loading()
            this.$instance.post(`/app/syssignaccount/xcx-draw-sign?openId=${this.user.openId}`, res.data, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res => {
              if (res.code === 0) {
                this.signatureId = res.data
                this.isShow = false
                this.$toast('签名成功')

                this.$nextTick(() => {
                  this.submitForm()
                })
              }
            })
          },
          fail: () => {
            this.$toast('签名生成失败')
          }
        })
      }).catch(() => {
        this.$toast('签名绘制失败')
      })
    },

    IdCard(UUserCard, num) {
      if (num == 1) {
        return UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
      }
      if (num == 2) {
        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
          return '1'
        } else {
          return '0'
        }
      }
      if (num == 3) {
        var myDate = new Date()
        var month = myDate.getMonth() + 1
        var day = myDate.getDate()
        var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
        if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
          age++
        }

        return age
      }
    },

    getInfo(id) {
      this.$loading()
      this.$instance.post(`/app/approval-process-def/info-id?id=${id}`,).then(res => {
        if (res.code === 0) {
          this.$hideLoading()
          this.info = res.data
          uni.setNavigationBarTitle({
            title: res.data.processName
          })
          this.isHasSignature = !!res.data.tableInfo.tableFieldInfos.filter(v => v.fieldType === '1').length
          const groupFormIds = this.unique(res.data.tableInfo.tableFieldInfos.filter(v => v.fieldType !== '1').map(v => v.groupIndex))
          const dictKeys = res.data.tableInfo.tableFieldInfos.filter(v => !!v.dictionaryCode).map(v => v.dictionaryCode)
          this.$dict.load(dictKeys).then(() => {
            this.tableForm = groupFormIds.map(index => {
              return res.data.tableInfo.tableFieldInfos.filter(v => v.fieldType !== '1' && v.groupIndex === index).map(item => {
                if (item.dictionaryCode) {
                  item.dictionaryList = this.$dict.getDict(item.dictionaryCode)
                }

                if (item.fieldDbName === 'name') {
                  item.fieldValue = this.user.realName || ''
                }

                if (item.fieldDbName === 'phone') {
                  item.fieldValue = this.user.phone || ''
                }

                // if (item.fieldDbName === 'sex') {
                //   item.fieldValue = this.IdCard(this.user.idNumber, 2)
                // }

                if (item.fieldDbName === 'id_number') {
                  item.fieldValue = this.user.idNumber || ''
                }

                if (item.fieldDbName === 'age') {
                  item.fieldValue = this.IdCard(this.user.idNumber, 3)
                }

                if (item.fieldDbName === 'birthday') {
                  item.fieldValue = this.IdCard(this.user.idNumber, 1)
                }

                return item
              })
            })
          })
          this.pageShow = true
        }
      })
    },

    checkChange(e, index, i) {
      this.$forceUpdate()

      this.$nextTick(() => {
        const value = this.tableForm[index][i].dictionaryList.filter(v => v.checked).map(v => v.dictValue).join(',')

        this.$set(this.tableForm[index][i], 'fieldValue', value)
      })
    },

    onDateChange(e) {
      const index = e.target.dataset.index
      const i = e.target.dataset.i
      const value = e.detail.value.split('-')

      this.$set(this.tableForm[index][i], 'fieldValue', `${value[0]}年${value[1]}月${value[2]}日`)
    },

    onPickerChange(e) {
      const index = e.target.dataset.index
      const i = e.target.dataset.i
      const dict = e.target.dataset.dict
      const value = e.detail.value
      const key = this.$dict.getLabel(dict, value)

      this.$set(this.tableForm[index][i], 'fieldValue', value)
      this.$set(this.tableForm[index][i], 'fieldDictName', key)
    },

    preview(list, url) {
      const imgs = list.map(v => v.exampleFile.url)
      uni.previewImage({
        current: url,
        urls: imgs
      })
    },

    /**
     * 数组去重
     */
    unique(arr) {
      return arr.filter((item, index) => {
        return arr.indexOf(item, 0) === index
      })
    },

    /**
     * 图片上传
     */
    handleImage(item, imgs) {
      item.src = imgs?.[0]?.url
      item.annexFileId = imgs?.[0]?.id
    },
    next() {
      if (this.currIndex === 2) {
        for (let item of this.info.processAnnexDefs) {
          if (item.mustFill === '1' && !item.annexFileId) {
            return this.$toast(`请上传${item.annexName}`)
          }
        }
        this.currIndex = 3
      } else if (this.currIndex === 3) {
        this.submitForm()
      }
    },

    submitForm() {
      let list = []
      let signature = ''

      if (this.isHasSignature) {
        signature = {
          ...this.info.tableInfo.tableFieldInfos.filter(v => v.fieldType === '1')[0],
          fieldValue: this.signatureId
        }
      }

      this.tableForm.forEach(item => {
        item.forEach(form => {
          list.push(form)
        })
      })

      for (let item of list) {
        if (item.mustFill === '1' && !item.fieldValue) {
          return this.$toast(`${item.fieldDataType === '0' || item.fieldDataType === '1' ? '请输入' : '请选择'}${item.fieldName}`)
        }

        if (item.mustFill === '1' && item.verifyType) {
          // const reg = item.verifyType === '0' ? new RegExp('(^\d{15}$)|(^\d{17}(\d|X|x)$)')  : new RegExp('^1[0-9]{10,10}$')
          const reg = item.verifyType === '0' ? /(^\d{15}$)|(^\d{17}(\d|X|x)$)/ : /^1[0-9]{10,10}$/

          if (!reg.test(item.fieldValue)) {
            return this.$toast(`请输入正确的${item.fieldName}`)
          }
        }
      }

      if (signature) {
        list.push(signature)
      }

      if (this.isHasSignature && !this.signatureId) {
        class Handwriting {
          // 内置数据
          ctx = '';
          canvasWidth = 300;
          canvasHeight = 900;
          linePrack = []; //划线轨迹 ; 生成线条的实际点
          currentLine = [];
          transparent = 1; // 透明度
          pressure = 0.5; // 默认压力
          smoothness = 100; //顺滑度，用60的距离来计算速度
          lineSize = 1.5; // 笔记倍数
          lineMin = 0.5; // 最小笔画半径
          lineMax = 2; // 最大笔画半径
          currentPoint = {};
          firstTouch = true; // 第一次触发
          radius = 1; //画圆的半径
          cutArea = {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
          }; //裁剪区域
          lastPoint = 0;
          chirography = []; //笔迹
          startY = 0;
          deltaY = 0;
          startValue = 0;

          constructor(opts) {
            console.log(opts);
            this.lineColor = opts.lineColor || '#1A1A1A' // 颜色
            this.slideValue = opts.slideValue || 50
            this.canvasName = opts.canvasName || 'handWriting'
            this.init()
          }

          init() {
            this.ctx = uni.createCanvasContext(this.canvasName)
            var query = uni.createSelectorQuery();
            query.select('.handCenter').boundingClientRect(rect => {
              console.log(rect)
              this.canvasWidth = rect.width;
              this.canvasHeight = rect.height;
            }).exec();
            this.selectSlideValue(this.slideValue);
          }

          // 笔迹开始
          uploadScaleStart(event) {
            console.log('start');
            let e = event.mp
            console.log(e.touches[0])
            if (e.type != 'touchstart') return false;
            this.ctx.setFillStyle(this.lineColor); // 初始线条设置颜色
            this.ctx.setGlobalAlpha(this.transparent); // 设置半透明
            this.currentPoint = {
              x: e.touches[0].x,
              y: e.touches[0].y
            }
            this.currentLine.unshift({
              time: new Date().getTime(),
              dis: 0,
              x: this.currentPoint.x,
              y: this.currentPoint.y
            })
            if (this.firstTouch) {
              this.cutArea = {
                top: this.currentPoint.y,
                right: this.currentPoint.x,
                bottom: this.currentPoint.y,
                left: this.currentPoint.x
              }
              this.firstTouch = false
            }
            this.pointToLine(this.currentLine);
          }

          // 笔迹移动
          uploadScaleMove(event) {
            console.log('move');
            let e = event.mp
            if (e.type != 'touchmove') return false;
            if (e.cancelable) {
              // 判断默认行为是否已经被禁用
              if (!e.defaultPrevented) {
                e.preventDefault();
              }
            }
            let point = {
              x: e.touches[0].x,
              y: e.touches[0].y
            }
            //测试裁剪
            if (point.y < this.cutArea.top) {
              this.cutArea.top = point.y;
            }
            if (point.y < 0) this.cutArea.top = 0;

            if (point.x > this.cutArea.right) {
              this.cutArea.right = point.x;
            }
            if (this.canvasWidth - point.x <= 0) {
              this.cutArea.right = this.canvasWidth;
            }
            if (point.y > this.cutArea.bottom) {
              this.cutArea.bottom = point.y;
            }
            if (this.canvasHeight - point.y <= 0) {
              this.cutArea.bottom = this.canvasHeight;
            }
            if (point.x < this.cutArea.left) {
              this.cutArea.left = point.x;
            }
            if (point.x < 0) this.cutArea.left = 0;

            this.lastPoint = this.currentPoint;
            this.currentPoint = point
            this.currentLine.unshift({
              time: new Date().getTime(),
              dis: this.distance(this.currentPoint, this.lastPoint, 'move'),
              x: point.x,
              y: point.y
            })
            this.pointToLine(this.currentLine);
          }

          // 笔迹结束
          uploadScaleEnd(event) {
            let e = event.mp
            if (e.type != 'touchend') return 0;
            console.log(e);
            let point = {
              x: e.changedTouches[0].x,
              y: e.changedTouches[0].y
            }

            this.lastPoint = this.currentPoint;
            this.currentPoint = point
            this.currentLine.unshift({
              time: new Date().getTime(),
              dis: this.distance(this.currentPoint, this.lastPoint, 'end'),
              x: point.x,
              y: point.y
            })
            if (this.currentLine.length > 2) {
              var info = (this.currentLine[0].time - this.currentLine[this.currentLine.length - 1].time) / this.currentLine.length;
              //$("#info").text(info.toFixed(2));
            }
            //一笔结束，保存笔迹的坐标点，清空，当前笔迹
            //增加判断是否在手写区域；
            this.pointToLine(this.currentLine);
            var currentChirography = {
              lineSize: this.lineSize,
              lineColor: this.lineColor
            };
            this.chirography.unshift(currentChirography);
            this.linePrack.unshift(this.currentLine);
            this.currentLine = []
          }

          retDraw() {
            this.ctx.clearRect(0, 0, 700, 730)
            this.ctx.draw()
          }

          //画两点之间的线条；参数为:line，会绘制最近的开始的两个点；
          pointToLine(line) {
            this.calcBethelLine(line);
            // this.calcBethelLine1(line);
            return;
          }

          //计算插值的方式；
          calcBethelLine(line) {
            if (line.length <= 1) {
              line[0].r = this.radius;
              return;
            }
            let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0,
                time = 0,
                curveValue = 0.5;
            if (line.length <= 2) {
              x0 = line[1].x
              y0 = line[1].y
              x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
              y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
              //x2 = line[1].x;
              //y2 = line[1].y;
              x1 = x0 + (x2 - x0) * curveValue;
              y1 = y0 + (y2 - y0) * curveValue;
              ;

            } else {
              x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
              y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
              x1 = line[1].x;
              y1 = line[1].y;
              x2 = x1 + (line[0].x - x1) * curveValue;
              y2 = y1 + (line[0].y - y1) * curveValue;
            }
            //从计算公式看，三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
            len = this.distance({
              x: x2,
              y: y2
            }, {
              x: x0,
              y: y0
            }, 'calc');
            lastRadius = this.radius;
            for (let n = 0; n < line.length - 1; n++) {
              dis += line[n].dis;
              time += line[n].time - line[n + 1].time;
              if (dis > this.smoothness) break;
            }
            this.radius = Math.min(time / len * this.pressure + this.lineMin, this.lineMax) * this.lineSize
            line[0].r = this.radius;
            //计算笔迹半径；
            if (line.length <= 2) {
              r0 = (lastRadius + this.radius) / 2;
              r1 = r0;
              r2 = r1;
              //return;
            } else {
              r0 = (line[2].r + line[1].r) / 2;
              r1 = line[1].r;
              r2 = (line[1].r + line[0].r) / 2;
            }
            let n = 5;
            let point = [];
            for (let i = 0; i < n; i++) {
              let t = i / (n - 1);
              let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
              let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
              let r = lastRadius + (this.radius - lastRadius) / n * i;
              point.push({
                x: x,
                y: y,
                r: r
              });
              if (point.length == 3) {
                let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r);
                a[0].color = this.lineColor;
                this.bethelDraw(a, 1);
                point = [{
                  x: x,
                  y: y,
                  r: r
                }];
              }
            }
          }

          //求两点之间距离
          distance(a, b, type) {
            let x = b.x - a.x;
            let y = b.y - a.y;
            return Math.sqrt(x * x + y * y) * 5;
          }

          ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
            let a = [],
                vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2;
            vx01 = x1 - x0;
            vy01 = y1 - y0;
            norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
            vx01 = vx01 / norm * r0;
            vy01 = vy01 / norm * r0;
            n_x0 = vy01;
            n_y0 = -vx01;
            vx21 = x1 - x2;
            vy21 = y1 - y2;
            norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
            vx21 = vx21 / norm * r2;
            vy21 = vy21 / norm * r2;
            n_x2 = -vy21;
            n_y2 = vx21;
            a.push({
              mx: x0 + n_x0,
              my: y0 + n_y0,
              color: "#1A1A1A"
            });
            a.push({
              c1x: x1 + n_x0,
              c1y: y1 + n_y0,
              c2x: x1 + n_x2,
              c2y: y1 + n_y2,
              ex: x2 + n_x2,
              ey: y2 + n_y2
            });
            a.push({
              c1x: x2 + n_x2 - vx21,
              c1y: y2 + n_y2 - vy21,
              c2x: x2 - n_x2 - vx21,
              c2y: y2 - n_y2 - vy21,
              ex: x2 - n_x2,
              ey: y2 - n_y2
            });
            a.push({
              c1x: x1 - n_x2,
              c1y: y1 - n_y2,
              c2x: x1 - n_x0,
              c2y: y1 - n_y0,
              ex: x0 - n_x0,
              ey: y0 - n_y0
            });
            a.push({
              c1x: x0 - n_x0 - vx01,
              c1y: y0 - n_y0 - vy01,
              c2x: x0 + n_x0 - vx01,
              c2y: y0 + n_y0 - vy01,
              ex: x0 + n_x0,
              ey: y0 + n_y0
            });
            a[0].mx = a[0].mx.toFixed(1);
            a[0].mx = parseFloat(a[0].mx);
            a[0].my = a[0].my.toFixed(1);
            a[0].my = parseFloat(a[0].my);
            for (let i = 1; i < a.length; i++) {
              a[i].c1x = a[i].c1x.toFixed(1);
              a[i].c1x = parseFloat(a[i].c1x);
              a[i].c1y = a[i].c1y.toFixed(1);
              a[i].c1y = parseFloat(a[i].c1y);
              a[i].c2x = a[i].c2x.toFixed(1);
              a[i].c2x = parseFloat(a[i].c2x);
              a[i].c2y = a[i].c2y.toFixed(1);
              a[i].c2y = parseFloat(a[i].c2y);
              a[i].ex = a[i].ex.toFixed(1);
              a[i].ex = parseFloat(a[i].ex);
              a[i].ey = a[i].ey.toFixed(1);
              a[i].ey = parseFloat(a[i].ey);
            }
            return a;
          }

          bethelDraw(point, is_fill, color) {
            this.ctx.beginPath();
            this.ctx.moveTo(point[0].mx, point[0].my);
            if (undefined != color) {
              this.ctx.setFillStyle(color);
              this.ctx.setStrokeStyle(color);
            } else {
              this.ctx.setFillStyle(point[0].color);
              this.ctx.setStrokeStyle(point[0].color);
            }
            for (let i = 1; i < point.length; i++) {
              this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
            }
            this.ctx.stroke();
            if (undefined != is_fill) {
              this.ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
            }
            this.ctx.draw(true)
          }

          selectColorEvent(lineColor) {
            this.lineColor = lineColor;
          }

          selectSlideValue(slideValue) {
            switch (slideValue) {
              case 0:
                this.lineSize = 0.1;
                this.lineMin = 0.1;
                this.lineMax = 0.1;
                break;
              case 25:
                this.lineSize = 1;
                this.lineMin = 0.5;
                this.lineMax = 2;
                break;
              case 50:
                this.lineSize = 1.5;
                this.lineMin = 1;
                this.lineMax = 3;
                break;
              case 75:
                this.lineSize = 1.5;
                this.lineMin = 2;
                this.lineMax = 3.5;
                break;
              case 100:
                this.lineSize = 3;
                this.lineMin = 2;
                this.lineMax = 3.5;
                break;
            }
          }

          saveCanvas() {
            return new Promise((resolve, rej) => {
              uni.canvasToTempFilePath({
                canvasId: this.canvasName,
                success: function (res) {
                  resolve(res.tempFilePath);
                },
                fail: function (err) {
                  rej(err);
                }
              })
            })
          }
        }

        this.handwriting = new Handwriting({
          lineColor: this.lineColor,
          slideValue: this.slideValue,
          canvasName: 'handWriting'
        })

        this.$nextTick(() => {
          this.isShow = true
        })

        return false
      }

      const annexs = this.info.processAnnexDefs.map(item => {
        return {
          annexFileId: item.annexFileId,
          emptyFileId: item.emptyFileId,
          exampleFileId: item.exampleFileId,
          processAnnexDefId: item.id,
          annexName: item.annexName
        }
      }).filter(v => !!v.annexFileId)

      const processNodeList = this.info.processNodeList
      let tableInfo = this.info.tableInfo
      tableInfo.tableFieldInfos = list

      this.$loading()
      this.$instance.post(`/app/approv-alapply-info/add`, {
        processNodeList,
        annexs,
        tableInfo,
        tableId: this.info.tableId,
        processDefId: this.info.id,
        processDefName: this.info.processName
      }).then(res => {
        if (res.code === 0) {
          this.$toast('申请成功')
          uni.reLaunch({
            url: `./serviceResult?title=${this.info.processName}`
          })
        } else {
          this.$hideLoading()
        }
      }).catch(() => {
        this.$hideLoading()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.signature {
  background: #fff;

  .signature-header {
    height: 120px;
    line-height: 120px;
    padding: 0 32px;

    div {
      color: #000000;
      font-size: 30px;
    }
  }

  .signature-canvas {
    width: 686px;
    height: 464px;
    margin: 0 auto 40px;
    background: #FAFAFA;
    border-radius: 8px;
    border: 1px solid #DDDDDD;

    canvas {
      width: 100%;
      height: 100%;
    }
  }

  .signature-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 128px;
    padding: 0 32px;
    border-top: 1px solid #DDDDDD;

    .signature-footer__left {
      display: flex;
      align-items: center;

      i {
        margin-right: 4px;
        font-size: 32px;
        color: #4E8EEE;
      }

      span {
        color: #4E8EEE;
        font-size: 28px;
      }
    }

    .signature-btn {
      width: 192px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #fff;
      font-size: 32px;
      background: #197DF0;
      border-radius: 4px;
    }
  }
}

.service-form {
  min-height: 100vh;
  padding-bottom: 124px;
  box-sizing: border-box;
  background-color: #fff;
}

.upload-item__title {
  display: flex;
  position: relative;
  align-items: center;
  left: -16px;
  margin-bottom: 16px;

  i {
    font-size: 32px;
    color: #FF4466;
  }
}

.step-item__form {
  padding-top: 40px;

  .step-item__form--group {
    margin-top: 50px;
  }

  .group-title {
    display: flex;
    align-items: center;
    padding: 0 32px;

    span {
      width: 4px;
      height: 32px;
      margin-right: 6px;
      background: #1365DD;
    }

    h3 {
      color: #333333;
      font-size: 32px;
      font-weight: 600;
    }
  }

  & > h2 {
    padding: 0 32px;
    color: #333333;
    font-size: 34px;
    font-weight: 600;
  }

  .form-title {
    display: flex;
    align-items: center;
    width: 100%;

    span {
      font-size: 32px;
      color: #333;
      font-weight: 600;
    }

    i {
      margin-right: 2px;
      color: #FF4466;
      font-size: 32px;
    }
  }

  .form-check {
    margin-left: 16px;
    margin-top: 20px;
    overflow: hidden;
  }

  .form-item {
    padding: 40px 0 0 0;
    margin: 0 32px 0 16px;

    .form-item__wrapper {
      display: flex;
      align-items: center;
      height: 70px;
      margin-left: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #DDDDDD;
    }

    input {
      flex: 1;
      line-height: 70px;
      padding-right: 20px;
      box-sizing: border-box;
    }

    .form-item__choose {
      color: #4292F3;
      font-size: 32px;
    }
  }
}

.service-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 114px;
  line-height: 114px;
  text-align: center;
  color: #fff;
  font-size: 34px;
  background-color: #197DF0;
}

.service-example {
  margin-top: 64px;
  margin-bottom: 20px;

  & > h2 {
    padding: 0 32px;
    color: #333333;
    font-size: 30px;
  }

  .service-example__list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 32px;

    .service-example__item {
      width: 215px;
      margin-top: 24px;
      margin-right: 24px;

      &:nth-of-type(3n) {
        margin-right: 0;
      }

      image {
        width: 216px;
        height: 136px;
        margin-bottom: 16px;
      }

      h2 {
        color: #333333;
        font-size: 30px;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.service-upload {
  margin-top: 40px;
  padding: 0 32px;

  .upload-item {
    margin-bottom: 64px;

    &:last-child {
      margin-bottom: 0;
    }

    & > h2 {
      color: #333333;
      font-size: 30px;
    }
  }
}

.step {
  display: flex;
  align-items: center;
  height: 176px;
  background: #FFFFFF;
  box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.05);

  .step-item {
    position: relative;
    flex: 1;
    text-align: center;

    .line {
      position: absolute;
      top: 20px;
      left: 70%;
      width: 120px;
      height: 2px;
      background: #CCCCCC;

      &.line-active {
        background: #467DFE;
      }
    }

    &.active {
      div {
        font-weight: 600;
        color: #467DFE;
      }

      span {
        background: #467DFE;
      }
    }

    div {
      font-size: 26px;
      color: #999999;
    }

    span {
      display: block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto 18px;
      text-align: center;
      color: #fff;
      font-size: 26px;
      border-radius: 50%;
      background: #D0D1D6;
    }
  }
}
</style>
