<template>
    <div>
        <div class="home">
            <div class="title1">上传本人真实照片</div>
            <div class="title2">生成专属身份卡</div>
            <div class="title" style="position:relative;">
                <img v-if="isShowUpload" src="../../assets/caream.png" class="images">
                <input
                        class="camera"
                        v-if="isShowUpload"
                        type="file"
                        accept="image/*"
                        capture="camera"
                        style="width: 100%;"
                        ref="fileItem"
                        @change="changeFile"
                />
            </div>

            <div>
          <span
                  v-for="(u,index) in urls"
                  :key="index"
                  style="position: relative;display: inline-block; margin-right: 1% "
          >
            <el-image
                    :src="servelUrl+u"
                    style="width: 40vw;height: 40vw;margin-bottom: 5%;"
            >
              <div slot="placeholder" class="image-slot">照片加载中...</div>
            </el-image>
            <span
                    style="position: absolute;top: 5%;right: 5%;color: #ffffff;"
                    @click="deleteImg(index)"
            >
              <i class="el-icon-circle-close"></i>
            </span>
          </span>
            </div>

            <div style="width: 100%;margin-top: 50px">
                <el-button size="small" type="primary" round @click="finishInfo">立即完成</el-button>
                <el-button style="margin-top: 20px" size="small" type="primary" round @click="goBack">返回上一页</el-button>
            </div>

        </div>
    </div>
</template>

<script>
    import lrz from "lrz";
    import {suppleUserInfo} from "../../api";
    import config from '@/util/config'
    import uploadType from "../../util/uploadType";
    import getClient from "../../util/oss";
    import axios from 'axios';
    export default {
        name: "finishinfo",
        data() {
            return {
                loading: false,
                isShowUpload: true, //是否显示 选择文件
                urls: [],
            };
        },
        methods: {
            goBack() {
                this.$router.replace("/my/index");
            },
            async changeFile() {
                this.$loading();
                let fileItem = this.$refs.fileItem;
                //得到图片的路径
                let file = fileItem.files[0];
                let that = this;
                lrz(file)
                    //成功时执行
                    .then(function (rst) {
                        let fd = rst.formData;
                        that.photo(fd,rst);
                        fileItem.value = "";
                    })
                    .catch(function () {
                        this.$loading().close();
                    });

            },

            async photo(fd,rst) {
                let file=getClient.base64toFile(rst.base64,rst.origin.name);

                const forData=new FormData();
                const receiveType = config.fileTypeConfig[uploadType.CARD];
                const picName = file.name;
                const filetype = picName.substring(picName.lastIndexOf("."));
                const filename =  receiveType + Date.now() + '_' + Math.floor(Math.random() * 10000) + filetype; // 存数据库里的路径需要/
                const objkey = filename.substring(1); // 上传至obs的 需要去掉起始的/
                forData.append("objkey",'sckjpicup$' + objkey);
                forData.append('objdata', file);

                const requestResult = await axios({
                  method: 'post',
                  // url: '/obs-demo/objUpload', // 146.3上测试
                  // url: 'http://abc.ccsckj.com/obs-demo/objUpload', // 测试域名
                  // url: 'http://info.windd.cn/obs-demo/objUpload', // 祥云147.2正式
                  url: 'https://info.windd.cn/obs-demo/objUpload', // 祥云147.2正式
                  data: forData,
                  // headers: forData.getHeaders(),
                });
                if (requestResult.status === 200) {
                  if(filename){
                    this.urls.push(filename);
                  }
                }else{
                  this.$message.error('公众号端上传身份卡图片失败!')
                }

                if (this.urls.length < 2) {
                    this.isShowUpload = false;
                }
                this.$loading().close();
            },
            deleteImg(index) {
                this.urls.splice(index, 1);
                this.isShowUpload = this.urls.length < 1;
            },
            async finishInfo() {
                if (this.urls.length > 0){
                    const result = await suppleUserInfo({
                        headPicPath: this.urls[0]
                    })
                    if (result.code == 0) {
                        this.$router.replace("/my/idCard");
                    }
                }
            },

        },
        mounted() {
        }
    };
</script>


<style scoped>
    .home {
        background: #FFFFFF;
        padding-bottom: 30px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 30px;
    }

    .title {
        border-radius: 5px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(31, 135, 247, 1);
        margin-top: 20px;
    }

    .title2 {
        margin-bottom: 40px;
        font-size: 15px;
        color: #aeaeae;
    }

    .title1 {
        margin-top: 10vh;
        font-size: 19px;
    }

    /deep/ .el-button {
        width: 90%;
        margin-left: 5%;
    }

    .images {
        width: 40vw;
        height: 40vw;
    }

    .camera {
        position: absolute;
        left: 30vw;
        top: 0;
        width: 40vw !important;
        height: 40vw;
        opacity: 0;
    }
</style>
