<template>
  <div class="add-research">
 
     <topheader title="实名认证"></topheader> 
    <!-- 第一步 -->
    <div class="step-one">
      <p class="step-title">第一步：家政员授权</p>
      <div class="step-one-content">
        <p class="step-tips">请保存图片并打印,让家政员手写图中需要抄录的文字并签名</p>
        <div class="example" @click="viewExample">
          <img src="../assets/icon_eye.png" alt />
          <span>查看示例</span>
        </div>
      </div>
    </div>
    <div class="step-two">
      <p class="step-title">第二步：填写申请信息</p>
      <van-field
        v-model="name"
        label="家政员姓名"
        placeholder="请填写"
        required
        maxlength="10"
        input-align="right"
      />
      <van-field
        required
        v-model="cardNum"
        label="家政员身份证号"
        placeholder="请填写"
        maxlength="18"
        :formatter="formatter"
        input-align="right"
      />
      <div class="upload-block">
        <p>上传授权书/上传抄写图片</p>
        <div class="upload-img">
          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            :max-count="3"
            :max-size="10 * 1024 * 1024"
          />
        </div>
      </div>
    </div>
    <div class="btn-wrapper">
      <van-button type="primary" block @click="submit">提交</van-button>
    </div>
  </div>
</template>

<script>
import Service from "../script/api/service";
// import {validateIdCard,validateNumber} from '../script/Validator'
import * as validator from "../script/Validator";
import Topheader from "@/components/Topheader";
import { ImagePreview } from 'vant';
export default {
  name: "research",
  data() {
    return {
      name: "",
      cardNum: "",
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      fileUrl: [],
      userInfo: {}
    };
  },
  computed: {
    loginDisabled: function() {
      return !(this.tel.length == 11 && this.code.length == 6);
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
   components: {
    Topheader,
  },
  watch: {},
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
   
    formatter(value) {
      // 过滤输入的数字
      // var n = obj.value.match(/\d{0,17}(\d|x)/i);
      return value.replace(/[^0-9xX]/g, "");
    },
    afterRead(file) {
      console.log(file);
      console.log(file.file);

      let param = new FormData();
      param.append("createAccount", this.userInfo.customerTel);
      param.append("file", file.file);
      console.log(param);
      // this.fileUpload(param);

      file.status = "uploading";
      file.message = "上传中...";
      Service.$axiosFileUpload(param)
        .then(res => {
          console.log(this.fileList);
          if (res.data.errno == "-1") {
            this.$toast(res.data.data);
            file.status = "failed";
            file.message = "上传失败";
          } else if (res.data.errno == "0") {
            file.url = res.data.data.fileUrl;
            file.status = "done";
            console.log(this.fileList);
            // this.fileUrl.push(res.data.data.fileUrl);
            // console.log(this.fileUrl);
          } else {
            file.status = "failed";
            file.message = "上传失败";
          }
        })
        .catch(res => {
          console.log(this.fileList);
          file.status = "failed";
          file.message = "上传失败";
        });
    },
    fileUpload: function(params) {
      Service.$axiosFileUpload(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          console.log(this.fileList);
          this.fileUrl.push(res.data.data.fileUrl);
          console.log(this.fileUrl);
        }
      });
    },

    submit: function() {
      let length = this.fileList.length;
      if (this.name == "") {
        this.$toast("姓名不能为空");
      } else if (this.cardNum == "") {
        this.$toast("身份证号不能为空");
      } else if (!validator.validateIdCard(this.cardNum)) {
        this.$toast("身份证号格式不正确");
      } else if (length == 0) {
        this.$toast("您还没有上传图片");
      } else {
        // let facePhoto=this.fileUrl.join(',');
        let facePhoto = [];
        for (let i = 0; i < length; i++) {
          if (this.fileList[i].status == "done") {
            facePhoto.push(this.fileList[i].url);
          }
        }
        facePhoto = facePhoto.join(",");
        if (facePhoto == "") {
          this.$toast("您还没有上传图片");
        } else {
          let params = {
            facePhoto: facePhoto,
            orderNo: this.userInfo.orderNo,
            servantIdCard: this.cardNum,
            servantName: this.name
          };
          this.addResearch(params);
        }
      }
    },
    addResearch: function(params) {
      Service.$axiosAddResearch(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          this.$router.replace("/bjdc");
        }
      });
    },
    viewExample: function() {
      ImagePreview({
        images: [
          // "https://img.yzcdn.cn/vant/apple-1.jpg",
          "https://m.jzlives.cn/file/servantequity/h5image/smrz.png"
        ],
        closeable: true
      });
    },
    updateResearch: function() {}
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.add-research {
  background: #f8f8f8;
  height: 100vh;
  padding: 0.3rem;
  font-size: 0.24rem;
  color: #666;
}


.step-one {
  background: #fff;
  border-radius: 4px;
  min-height: 2.2rem;
  margin-top: 0.88rem;
}
.step-title {
  height: 0.88rem;
  line-height: 0.88rem;
  padding: 0 0.22rem;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
  font-weight: bold;
}
.example {
  height: 0.5rem;
  display: flex;
  align-items: center;
  color: #0eaefc;
  width: 2rem;
}
.example img {
  width: 0.3rem;
  margin: 0 0.08rem 0;
}
.step-one-content {
  padding: 0.24rem 0.2rem;
  line-height: 0.68rem;
}
.step-two {
  background: #fff;
  border-radius: 4px;
  min-height: 2.8rem;
  margin: 0.3rem 0 2rem;
}
.upload-block {
  border-top: 1px solid #f5f5f5;
  padding: 0.24rem 0.22rem 0.34rem;
}
.upload-img {
  margin: 0.2rem 0 0;
}
</style>
