<template lang="">
  <div class="container">
    <div class="wrapper">
      <div class="business-license">
        <div class="title">
          <img src="@/assets/businesslicense.png" />
        </div>
        <div class="upload" data-type="license" @click="uploadImage">
          <img
            v-if="!businessLicenseUrl"
            src="@/assets/upload.png"
            data-type="license"
            @click.stop="uploadImage"
          />
          <img
            :src="businessLicenseUrl"
            style="width: 100%;height: 100%;  border-radius: 10px;"
            v-else
          />
        </div>
      </div>

      <div class="card-id">
        <div class="title">
          <img src="@/assets/card_id.png" />
        </div>
        <div style="margin-top: 13px;">正面</div>
        <div class="upload" data-type="cardFront" @click="uploadImage">
          <img
            v-if="!idCardUrl"
            src="@/assets/upload.png"
            data-type="cardFront"
            @click.stop="uploadImage"
          />
          <img
            :src="idCardUrl"
            style="width: 100%;height: 100%;  border-radius: 10px;"
            v-else
          />
        </div>
        <div style="margin-top: 13px;">反面</div>
        <div class="upload" data-type="cardBack" @click="uploadImage">
          <img
            v-if="!idCardBackUrl"
            src="@/assets/upload.png"
            data-type="cardBack"
            @click.stop="uploadImage"
          />
          <img
            :src="idCardBackUrl"
            style="width: 100%;height: 100%;  border-radius: 10px;"
            v-else
          />
        </div>
      </div>

      <div class="sign" @click="signUpHandle">
        <img src="@/assets/sign.png" />
      </div>
    </div>
    <van-popup
      v-model="uploadShow"
      position="bottom"
      :style="{ height: '82px' }"
    >
      <van-uploader :after-read="afterRead">
        <div style="text-align: center;">
          <img src="@/assets/uploadicon.png" />
        </div>
        <div style=" margin-top: 6px;font-size: 12px;color: #848484;">
          本地图片上传
        </div>
      </van-uploader>
    </van-popup>
  </div>
</template>
<script>
import Service from "../script/api/service";
export default {
  created() {
    // 组件创建时获取路由参数
    // this.allQueryParams = this.$route.query;
    // console.log(allQueryParams);
    this.allQueryParams = JSON.parse(localStorage.getItem("formData"));
    console.log(this.allQueryParams, "111");
  },
  data() {
    return {
      allQueryParams: {},
      uploadShow: false,
      businessLicenseUrl: "",
      idCardUrl: "",
      idCardBackUrl: "",
      type: ""
    };
  },
  methods: {
    uploadImage(e) {
      this.uploadShow = true;
      const type = e.target.dataset.type;
      this.type = type;
      // console.log(this.type);
    },
    afterRead(file) {
      // console.log(file);
      console.log(file.file);
      let formData = new FormData();
      formData.append("file", file.file);
      console.log("formData", formData);
      Service.$axiosFileUpload(formData)
        .then(res => {
          if (res.data.errno == 0) {
            // console.log("res.data.fileUrl", res.data.data.fileUrl);
            this.uploadShow = false;
            if (this.type == "license") {
              console.log("license1");
              this.businessLicenseUrl = res.data.data.fileUrl;
            } else if (this.type == "cardFront") {
              this.idCardUrl = res.data.data.fileUrl;
            } else if (this.type == "cardBack") {
              this.idCardBackUrl = res.data.data.fileUrl;
            }
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    signUpHandle() {
      let params = {
        contacts: this.allQueryParams.userName,
        tel: this.allQueryParams.tel,
        city: this.allQueryParams.city,
        province: this.allQueryParams.cityAddress,
        fraName: this.allQueryParams.companyName,
        corporateAccount: this.allQueryParams.publicAccount,
        corporateAccountName: this.allQueryParams.publicAccountName,
        openAccountBank: this.allQueryParams.bankName,
        email: this.allQueryParams.companyEmail,
        address: this.allQueryParams.mailingAddress,
        enterpriseWxAccount: this.allQueryParams.weCom,
        taxId: this.allQueryParams.creditCode,
        storeList: [
          {
            companyName: this.allQueryParams.companyName,
            companyCertificateNo: this.allQueryParams.creditCode,
            address: this.allQueryParams.mailingAddress,
            companyImg: this.businessLicenseUrl,
            legalpersonCertificateNo: this.allQueryParams.legalPersonIdCard,
            legalpersonName: this.allQueryParams.legalPersonName,
            legalpersonIdcardFront: this.idCardUrl,
            legalpersonIdcardBack: this.idCardBackUrl,
            tel: this.allQueryParams.tel
          }
        ]
      };
      if (this.businessLicenseUrl) {
        Service.$axiosFuweJoin(params).then(res => {
          console.log(res.data.errmsg);
          if (res.data.errmsg == "成功") {
            localStorage.removeItem("formData");
            this.$router.push({
              path: "/input"
            });
          } else {
            this.$toast(res.data.errmsg);
            // console.log('err',res.data.errmsg);
          }
        });
      } else {
        this.$toast("请上传营业执照或身份证");
      }
    }
  }
};
</script>
<style scoped>
.container {
  background-image: url("https://jms.lifejingzhi.com/file/jms/fuwe/join_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  padding: 190px 15px 20px;
  height: 100vh;
  /* overflow: hidden; */
}
.wrapper {
  background-color: #fff;
  border-radius: 20px;
  padding: 24px 19px 20px 14px;
  height: 628px;
}
.business-license .title {
  width: 131px;
  height: 25px;
  margin-bottom: 13px;
}
.title img {
  width: 100%;
  height: 100%;
}
.upload {
  height: 109px;
  border: 1px solid #979797;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 85vw;
}
.card-id {
  margin-top: 20px;
}
.card-id .title {
  width: 131px;
  height: 25px;
}
.sign {
  width: 253px;
  height: 58px;
  margin: 50px auto;
}
.sign img {
  width: 100%;
  height: 100%;
}
.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
