<template>
  <!--  选取资料-->
  <div class="selectFile">
    <navbar :name="name" />
    <!--    U盘打印-->
    <div class="box flex-center" v-show="name == 'U盘打印'">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。
        </div>
      </div>
      <div class="file">
        <div class="main">
          <div v-for="(item, index) in UpFile" v-bind:key="index">
            {{ item.name }}
          </div>
          <input type="file" @change="handleFileChange" />
        </div>
        <div class="btn flex-center" @click="skip('transcoding', name)">
          确认资料
        </div>
      </div>
    </div>
    <!--    扫描复印-->
    <div class="box flex-center" v-show="name == '扫描复印'">
      <div class="file2">
        <div class="title">已完成扫描的版面</div>
        <div class="main flex-between">
          <div class="smfyData">
            <div
              v-for="(item, index) in imgList"
              v-bind:key="index"
              :class="['flex-center', { act: smfyIndex == index }]"
              @click="onChange(index, 'smfyIndex')"
            >
              <div class="name">{{ index + 1 }}</div>
              <span @click="onCancel(index, 'imgList')">删除</span>
            </div>
          </div>
          <img
            :src="imgList[smfyIndex]"
            alt=""
            style="width: 25rem; height: 100%"
          />
        </div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">
          宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。
          按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">继续扫描</div>
          <div class="btn flex-center" @click="skip('transcoding', name)">
            完成扫描
          </div>
        </div>
      </div>
    </div>
    <!--    身份证打印-->
    <div class="box flex-center" v-show="name == '身份证打印'">
      <div class="file2 file3" style="margin-right: 20rem">
        <div class="title">请核对您的信息</div>
        <div class="card">
          <div class="card-box">
            <img src="../assets/card2.png" alt="身份证反面" />
            <div class="card-name">{{ cardInfo.name }}</div>
            <div class="card-gender">
              {{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span>
            </div>
            <div class="card-birth">
              {{ cardInfo.birthday | joinYear }}
              <span class="month">{{ cardInfo.birthday | joinMonth }}</span
              ><span class="day">{{ cardInfo.birthday | joinDay }}</span>
            </div>
            <div class="card-addr">
              {{ cardInfo.address }}
            </div>
            <div class="card-id">{{ cardInfo.idNumber }}</div>
            <div class="card-avatar">
              <img :src="cardInfo.imageName" alt="" />
            </div>
          </div>
          <div class="card-box">
            <img src="../assets/card1.png" alt="身份证正面" />
            <div class="card-sign">珠海市公安局</div>
            <div class="card-date">
              {{ cardInfo.issuedData }} - {{ cardInfo.validDate }}
            </div>
          </div>
        </div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。
        </div>
        <div class="btn flex-center" @click="skip('transcoding', name)">
          信息无误，继续
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/nav";

export default {
  name: "selectFile",
  components: {
    navbar,
  },
  provide() {
    return {
      title: this.tit,
      type: this.name,
    };
  },
  filters: {
    joinYear(val) {
      return val.substring(0, 4);
    },
    joinMonth(val) {
      return val.substring(4, 6);
    },
    joinDay(val) {
      return val.substring(6, 8);
    },
  },
  data() {
    return {
      tit:
        this.$route.params.name == "U盘打印" ? "资料选取提交" : "资料扫描提交",
      name: this.$route.params.name,
      path: this.cite.inWebURL,
      socket: '',
      imgList: [],
      smfyIndex: 0,

      UpFile: [],

      cardInfo: {
        name: "鲲怎么叫",
        sex: "男",
        nation: "汉",
        nationCode: "1",
        birthday: "19940411",
        address: "广东省珠海市香洲区唐家湾镇东岸村小龙组10086号",
        idNumber: "430421198907280306",
        idIssued: "珠海市公安局",
        issuedData: "20110310",
        validDate: "20210310",
        photoName: "",
        base64Photo: "",
        imageName:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41a98c47-1e62-4ea4-be0c-2640b773a8a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706170275&t=0104b9da7239685b89d893516103dc4e",
        base64Image: "(nul1)",
        cardType: "1",
        enName: "",
        cnName: "",
        passNum: "",
        visaTimes: "",
      },
    };
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
    onChange(index, name) {
      this[name] = index;
    },
    onCancel(index, name) {
      this[name].splice(index, 1);
    },
    paiz() {
      this.socket.send("Capture@2");
    },
    init: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function () {
      // console.log("socket连接成功")
      this.socket.send("OpenIdCardEx@0");
      this.socket.send("OpenDevice@1");
      this.socket.send("SetResolution@2@2592@1944");
      this.socket.send("OpenVideo");
      this.socket.send("RotateRight");
      this.socket.send("Deskew");
    },
    error: function () {
      console.log("连接错误");
    },
    getMessage: function (msg) {
      if (typeof msg.data == "string") {
        if (msg.data.indexOf("GetDevCount") == 0) {
          let s = msg.data.substring(12);
          if ("1" == s || "2" == s) {
            //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备
            alert("检测到已经连接上摄像头");
          }
        } else if (msg.data.indexOf("Capture") == 0) {
          let s = msg.data.substring(8);
          if (s) {
            this.imgList.push("data:image/jpeg;base64," + s);
          }
        } else if (msg.data.indexOf("MoveDetectEvent") == 0) {
          this.socket.send("Capture@2");
        } else if (msg.data.indexOf("IdCardEvent") == 0) {
          this.socket.send("UnFaceDetect");
        } else if (msg.data.indexOf("ReadIdCard") == 0) {
          let s = msg.data.substring(11);
          if ("1" == s) {
            this.socket.send("GetIdCardResult@||");
            this.socket.send("GetIdCardImage@2");
          }
        } else if (msg.data.indexOf("GetIdCardResult") == 0) {
          let s = msg.data.substring(16);

          let info = document.getElementById("info");
          info.value = s;
        } else if (msg.data.indexOf("GetBarcode") == 0) {
          // alert(msg.data);
          let s = msg.data.substring(11);

          let info = document.getElementById("info");
          info.value = s;
        } else if (msg.data.indexOf("GetIdCardImage") == 0) {
          let s = msg.data.substring(15);
          let arr = s.split("#");
          let faceImg = arr[0];

          let myimg = document.getElementById("myCanvas3");
          myimg.src = "data:image/jpeg;base64," + faceImg;
        } else if (msg.data.indexOf("GetBase64") == 0) {
          let s = msg.data.substring(10);

          let myimg = document.getElementById("myCanvas2");
          myimg.src = "data:image/jpeg;base64," + s;
          alert(s);
        } else if (msg.data.indexOf("GetRecognitionFromFileName") == 0) {
          let s = msg.data.substring(27);

          let info = document.getElementById("info");
          info.value = s;
        } else if (msg.data.indexOf("GetOcrFromFileName") == 0) {
          let s = msg.data.substring(19);

          let info = document.getElementById("info");
          info.value = s;
        } else if (msg.data.indexOf("GetDogSN") == 0) {
          let s = msg.data.substring(11);

          let info = document.getElementById("info");
          info.value = s;
        }
      } else {
        let reader = new FileReader();

        reader.onload = function (msg) {
          if (msg.target.readyState == FileReader.DONE) {
            // let url = msg.target.result;
            // document.getElementById('myCanvas').src = url;
          }
        };

        reader.readAsDataURL(msg.data);
      }
    },
    close: function () {
      // console.log("socket已经关闭")
      this.socket.close();
      this.socket = "";
    },

    handleFileChange(event) {
      let file = event.target.files[0];
      if (file) {
        this.UpFile.push(file);
      }
    },
  },
  destroyed() {
    // 销毁监听
    this.close();
  },
  mounted() {
    if (this.$route.params.name == "扫描复印") {
      this.init();
    }
  },
};
</script>

<style scoped lang="less">
.selectFile {
  .box {
    width: 114.06rem;
    height: 42.13rem;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
    margin: 0 auto;
    .tip {
      //margin-right: 15.31rem;
      width: 37rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3rem;
      .title {
        font-size: 2.88rem;
        font-weight: bold;
        color: #d41212;
        line-height: 4.06rem;
      }
      .content {
        margin: 3rem auto 59px;
        text-align: center;
      }
    }
    .file {
      margin-left: 15.31rem;
      width: 32.69rem;
      .main {
        width: 31.63rem;
        height: 28.56rem;
        background: #ffffff;
        border: 0.06rem solid #707070;
        margin: 0 auto 2.81rem;
      }
    }
    .tip2 {
      width: 52rem;
      .but {
        .btn {
          width: 24.44rem;
        }
      }
    }
    .file2 {
      margin-right: 9.69rem;
      .title {
        font-size: 2.13rem;
        font-weight: bold;
        color: #323232;
        line-height: 3rem;
        text-align: left;
      }
      .main {
        width: 39.81rem;
        height: 31.31rem;
        background: #eeeeee;
        margin: 1.38rem auto 0;
      }
      .card {
        width: 42.81rem;
        height: 35.31rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-end;
        .card-box {
          width: 25rem;
          height: 15rem;
          margin-right: 5rem;
          position: relative;
          font-weight: bold;
          font-size: 0.7rem;
          .card-title {
            padding: 1rem 0;
          }
          img {
            width: 25rem;
          }
          .card-sign {
            position: absolute;
            bottom: 2.7rem;
            left: 10.5rem;
          }
          .card-date {
            position: absolute;
            bottom: 0.7rem;
            left: 10.5rem;
          }
          .card-name {
            position: absolute;
            top: 2.2rem;
            left: 4.5rem;
          }
          .card-gender {
            position: absolute;
            top: 4.1rem;
            left: 4.5rem;
            font-size: 0.7rem;
            span {
              margin-left: 5rem;
            }
          }
          .card-birth {
            position: absolute;
            top: 6.15rem;
            left: 4.5rem;
            font-size: 0.7rem;
            .month {
              margin-left: 2.3rem;
            }
            .day {
              margin-left: 1.5rem;
            }
          }
          .card-addr {
            width: 10rem;
            position: absolute;
            top: 8.1rem;
            left: 4.5rem;
            font-size: 0.7rem;
            text-align: left;
          }
          .card-id {
            position: absolute;
            bottom: 1.05rem;
            left: 8rem;
            font-size: 0.7rem;
          }
          .card-avatar {
            position: absolute;
            top: 3.2rem;
            right: 2rem;
            width: 7rem;
            height: 9rem;
            img {
              width: 7rem;
              height: 9rem;
              background-size: contain;
            }
          }
        }
      }
    }
    .file3 {
      margin-right: 28.13rem;
      .main {
        width: 20.75rem;
        height: 28.88rem;
        border: 0.06rem solid #707070;
        margin: 1.06rem 0 0 13.38rem;
      }
    }
    .btn {
      width: 100%;
      height: 5.5rem;
      background: linear-gradient(
        132deg,
        #52a39d 0%,
        #a1c553 50%,
        #81d012 100%
      );
      border-radius: 1.25rem;
      font-size: 1.88rem;
      font-weight: 400;
      color: #ffffff;
      line-height: 2.63rem;
      cursor: pointer;
    }
  }
  .smfyData {
    height: 90%;
    width: 14.81rem;
    font-size: 1rem;
    font-weight: bold;
    color: #323232;
    line-height: 2rem;
    overflow: auto;
    cursor: pointer;
    .act {
      color: #52a39d;
    }
    .name {
      text-decoration: underline;
    }
    span {
      margin-left: 5rem;
    }
  }
}
</style>