<template>
  <div class="app-container" :style="{height:height+'px'}">
    <van-nav-bar
      title="资料修改"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-form @submit="submitForm">
      <van-field v-model="tel" readonly type="tel" label="手机号" placeholder="请输入手机号" readonly required :rules="[{ required:true }]" >
        <template #extra >
            <p style="color: #007e72" onclick="window.location='phoneInformation'">修改手机号</p>
        </template>
      </van-field>
      <van-field v-model="userForm.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
      <van-field v-model="userForm.idCardNum" label="身份证号" placeholder="请输入身份证号" required :rules="[{ required:true }]"/>
      <van-field v-model="userForm.address" label="联系地址" placeholder="请输入联系地址" />
      <van-field name="uploader" label="身份证(正)" required>
        <template #input>
          <van-uploader :after-read="afterReadSFZ" :before-delete="deleteFileSFZ" v-model="fileListSFZ" multiple :max-count="1" />
        </template>
      </van-field>
      <van-field name="uploader" label="银行卡" required>
        <template #input>
          <van-uploader :after-read="afterReadYHK" :before-delete="deleteFileYHK" v-model="fileListYHK" multiple :max-count="1" />
        </template>
      </van-field>
      <div class="submit">
        <van-button round block type="info" color="#007E72" native-type="submit" >保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getInfo } from "@/api/login/index";
import { getMember , base64Attach , userUpdate , showUserImg , deleteUserImg} from "@/api/user/index";
import {Dialog} from "vant";
import {base64Upload} from "@/api/register";
export default {
  name: "userInformation",
  data() {
    return {
      height:0,
      tel:'',
      fileList:[],
      form: {
        files:[],
        fileType:'',
        bizPath:'transaction',
        tableName:'t_transaction_member',
        tableId:'',
      },
      userForm:{
        idCardNum:'',
        realname:'',
        address:'',
        idCardPic :'',
        accountOpenCert:'',
      },
      userInfo:[],
      upLoadList:[],
      fileListSFZ:[],
      fileListYHK:[]
    };
  },
  created() {
    this.height = document.body.clientHeight;
    this.getInfo();
  },
  methods: {
    getInfo(){
      getInfo().then(response => {
        getMember(response.user.userId).then(response => {
          console.log(response)
          this.userForm.idCardNum = response.data.idCardNum;
          this.userForm.realname = response.data.realname;
          this.userForm.address = response.data.address;
          this.userForm.id = response.data.id;
          this.form.tableId = response.data.id;
          this.tel = response.data.phone;

          if (response.data.idCardPic!=''){
            this.fileListSFZ = [{
              url:'/api'+response.data.idCardPic,
              isImage: true
            }];
          }

          if (response.data.accountOpenCert!=''){
            this.fileListYHK = [{
              url:'/api'+response.data.accountOpenCert,
              isImage: true
            }];
          }



          // showUserImg(response.data.id).then(responseSecond => {
          //   console.log(responseSecond)
          //   for (var i = 0 ; i < responseSecond.data.length ; i++){
          //     this.fileList.push({url:this.global.severApi+responseSecond.data[i].fileUrl,id:responseSecond.data[i].id})
          //   }
          // });
        });
      });
    },
    afterReadSFZ(file) {
      // 此时可以自行将文件上传至服务器
      let params1 = {
        file:file.content
      }
      base64Upload(params1).then((r1) => {
        this.userForm.idCardPic = r1.fileName;
      })
    },
    afterReadYHK(file) {
      // 此时可以自行将文件上传至服务器
      let params1 = {
        file:file.content
      }
      base64Upload(params1).then((r1) => {
        this.userForm.accountOpenCert = r1.fileName;
      })
    },
    deleteFileSFZ(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListSFZ[elIndex].splice(fileIndex, 1)
        this.userForm.idCardPic = '';
      }
    },
    deleteFileYHK(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListYHK[elIndex].splice(fileIndex, 1)
        this.userForm.accountOpenCert = '';
      }
    },
    submitForm(){
      if (this.userForm.idCardPic == ''){
        this.$toast({
          icon: 'error', // 找到自己需要的图标
          message: '请上传身份证',
          duration:"2000",
          onClose:function(){
          }
        })
        return;
      }
      if (this.userForm.accountOpenCert == ''){
        this.$toast({
          icon: 'error', // 找到自己需要的图标
          message: '请上传银行卡',
          duration:"2000",
          onClose:function(){
          }
        })
        return;
      }
      userUpdate(this.userForm).then(response => {
        if(response.code == 200){
          Dialog.confirm({
            title: '系统提示',
            message: '修改成功',
            confirmButtonText: '确定',
          })
        }
      });
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #FFF;
}
.submit{
  position: fixed;
  bottom: 5%;
  width: 90%;
  left: 5%;
  background-color: #FFFFFF;
  p{
    text-align: center;
    margin-bottom: 0.2rem;
    span{
      color: #007E72;
    }
  }
}
</style>
