<template>
  <div class="app-container">
    <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="请输入手机号" required :rules="[{ required:true }]" >
        <template #extra >
          <p style="color: #007e72">修改手机号</p>
        </template>
      </van-field>
<!--      <van-field value="15314031621" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>-->
      <van-field v-model="userForm.companyName" label="公司名称" placeholder="请输入公司名称" required :rules="[{ required:true }]"/>
      <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.companyCode" label="社会信用代码" placeholder="请输入公司的社会信用代码" required :rules="[{ required:true }]"/>

      <van-field
        readonly
        clickable
        label="企业性质"
        :value="companyNameValue"
        placeholder="选择企业性质"
        @click="showPickerPiker = true"
        required :rules="[{ required:true }]"
      />
      <van-popup v-model="showPickerPiker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="companyNameList"
          @cancel="showPickerPiker = false"
          @confirm="onConfirmCompany"
        />
      </van-popup>
<!--      <van-field v-model="userForm.companyNature" label="企业性质" placeholder="请输入企业性质" required :rules="[{ required:true }]" />-->


      <van-field v-model="userForm.companyScope" label="经营范围" placeholder="请输入经营范围" required :rules="[{ required:true }]" />
      <van-field v-model="userForm.companyTimeLimit" label="经营期限" placeholder="请输入经营期限" required :rules="[{ required:true }]" />
      <van-field
        readonly
        clickable
        label="成立时间"
        :value="userForm.companySetupTime"
        placeholder="选择成立时间"
        @click="showPicker = true"
        required :rules="[{ required:true }]"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
<!--      <van-field v-model="userForm.companySetupTime" label="成立时间" placeholder="请输入成立时间" required :rules="[{ required:true }]" />-->
      <van-field v-model="userForm.companyCapital" label="注册资金" placeholder="请输入注册资金" required :rules="[{ required:true }]" />
      <van-field v-model="userForm.companyLicense" label="营业执照号" placeholder="请输入公司的营业执照号" required :rules="[{ required:true }]"/>
      <van-field v-model="userForm.address" label="联系地址" placeholder="请输入联系地址" required :rules="[{ required:true }]" />
      <van-field name="uploader" label="上传相关附件">
        <template #input>
          <van-uploader :after-read="afterRead" :before-delete="deleteFile" v-model="fileList" multiple :max-count="5" />
        </template>
      </van-field>
      <p style="color: red; text-align: center;">*身份证照片、本人和身份证的合影</p>
      <div class="submit">
        <van-button round block type="info" color="#007E72" native-type="submit" style="width: 90%;margin: 0 auto;">保存</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";
export default {
  name: "companyInformation",
  data() {
    return {
      height:0,
      tel:'',
      showPicker: false,
      showPickerPiker: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      value:'',
      companyNameValue:'',
      fileList:[],
      companyNameList:[],
      form: {
        files:[],
        fileType:'',
        bizPath:'transaction',
        tableName:'t_transaction_member',
        tableId:''
      },
      userForm:{
        companyName:'',
        idCardNum:'',
        realname:'',
        companyCode:'',
        companyName:'',
        companyNature:'',
        companyScope:'',
        companyTimeLimit:'',
        companySetupTime:'',
        companyCapital:'',
        companyLicense:'',
        address:'',
      },
      userInfo:[],
      upLoadList:[]
    };
  },
  created() {
    this.height = document.body.clientHeight
    this.getInfo()
    this.getDicts("company_nature").then(res => {
      console.log(res);
      for (var i = 0 ; i < res.data.length ; i++ ){
        this.companyNameList.push(res.data[i].dictLabel)
      }
      //this.value = this.selectDictLabel(res.data,response.data.supplyDemandType);
    });
  },
  methods: {
    onConfirmCompany(value,index){
      console.log(value)
      this.companyNameValue = value;
      this.showPickerPiker = false;
      this.userForm.companyNature = index+1
      console.log(this.userForm.companyName)
    },
    onConfirm(value) {
      this.userForm.companySetupTime = this.getNowFormatDate(value).substr(0,10);
      console.log(new Date())
      this.showPicker = false;
    },
    getInfo(){
      getInfo().then(response => {
        getMember(response.user.userId).then(response => {
          console.log(response)

          this.userForm.companyName = response.data.companyName;
          this.userForm.idCardNum = response.data.idCardNum;
          this.userForm.realname = response.data.realname;
          this.userForm.companyCode = response.data.companyCode;
          this.userForm.companyName = response.data.companyName;
          this.userForm.companyNature = response.data.companyNature;
          this.userForm.companyScope = response.data.companyScope;
          this.userForm.companyTimeLimit = response.data.companyTimeLimit;
          this.userForm.companySetupTime = response.data.companySetupTime;
          this.userForm.companyCapital = response.data.companyCapital;
          this.userForm.companyLicense = response.data.companyLicense;
          this.userForm.address = response.data.address;

          this.tel = response.data.phone

          this.getDicts("company_nature").then(res => {
            console.log(res);
            this.companyNameValue = this.selectDictLabel(res.data,response.data.companyNature);
          });

          this.userForm.id = response.data.id;
          this.form.tableId = response.data.id;
          showUserImg(response.data.id).then(responseSecond => {
            console.log(responseSecond)
            this.form.files = responseSecond.data
            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})
            }
          });
        });
      });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(this.fileList)
      for ( var i = 0 ; i < this.fileList.length ; i++){
        console.log(this.fileList[i].url)
        if(this.fileList[i].url == undefined&&this.fileList!='') {
          this.fileList[i] = {url:this.fileList[i].content, id: '', isImage: true};
        }
      }
    },
    deleteFile(elIndex){
      if(elIndex.id != ''){
        deleteUserImg(elIndex.id).then(response => {});
      }
      return (file, name) => {
        let fileIndex = name.index
        this.fileList[elIndex].splice(fileIndex, 1)
        this.upLoadList[elIndex].splice(fileIndex, 1)
      }
    },
    submitForm(){
      this.form.files = [];
      userUpdate(this.userForm).then(response => {
        var imgList = [];
        console.log(this.fileList)
        for (var i = 0 ; i < this.fileList.length ; i++){
          if(this.fileList[i].url.indexOf('http') == -1&&this.fileList!=''){
            this.form.files.push(this.fileList[i].url);
          }
        }
        console.log(this.form.files)
        base64Attach(this.form).then(responseSecond => {
          if(response.code == 200 && responseSecond.code == 200){
            Dialog.confirm({
              title: '系统提示',
              message: '修改成功',
              confirmButtonText: '确定',
            })
          }
        });
      });
    }
  },
};
</script>

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