<template lang="html">
  <div style="background-color: #f2f2f2; min-height: 100vh" v-loading="load">
    <div style="width: 100%; height: 10rem; background-color: #ffffff">
      <div class="my_header">
        <div style="width: 50%; height: 100%">
          <div style="width: 100%; height: 3rem"></div>
          <div
            style="
              width: 100%;
              height: 1.5rem;
              line-height: 1.5rem;
              color: black;
              font-size: 1.3rem;
            "
            class="login_name"
          >
          {{user.name?user.name:'微信人员'}}
          </div>
          <div style="width: 100%; height: 1rem"></div>
          <div style="width: 100%; height: 2.5rem; color: #a2a2a2">
            <div
              style="width: 100%; height: 1.25rem; line-height: 1.25rem"
              class="login_tel"
            >
              {{user.telphone}}
            </div>
            <div
              style="width: 100%; height: 1.25rem; line-height: 1.25rem"
              class="login_roles"
            >
            住宅-{{user.fjNum}}
            </div>
          </div>
          <div style="width: 100%; height: 2rem"></div>
        </div>
        <div
          style="
            width: 30%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <div
            style="
              width: 5rem;
              height: 5rem;
              background-color: #f4f4f6;
              border-radius: 2.5rem;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            class="user_photo"
            @click="handleUpload"
          >
            <van-icon name="contact" color="#b2b2b2" size="2.8rem" v-if="!user.facePhoto" />
            <img :src="user.facePhoto" alt="" style="width: 100%;height: 100%; border-radius: 2.5rem;" v-if="user.facePhoto">
            <!-- <i class="layui-icon layui-icon-username" style="color:#b2b2b2;font-size:2.8rem"></i> -->
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 1rem"></div>
    <div style="background: #ffffff; width: 100%; height: 4rem" @click="$router.push('/applyFamily')">
      <div style="width: 90%; height: 4rem; display: flex; margin: auto">
        <div
          style="width: 50%; height: 100%; display: flex; align-items: center"
        >
          <van-icon name="wap-home" color="#d6d6da" size="1.4rem" />
          <span style="margin-left: 8%; color: #676767; font-size: 1rem"
            >成员管理</span
          >
        </div>
        <div
          style="
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <van-icon name="arrow" color="#d6d6da" size="1.4rem" />
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 1rem"></div>
    <div style="background: #ffffff; width: 100%; height: 4rem" @click="$router.push('/applyCar')">
      <div style="width: 90%; height: 4rem; display: flex; margin: auto">
        <div
          style="width: 50%; height: 100%; display: flex; align-items: center"
        >
          <van-icon name="cluster" color="#d6d6da" size="1.4rem" />
          <span style="margin-left: 8%; color: #676767; font-size: 1rem"
            >车辆管理</span
          >
        </div>
        <div
          style="
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <van-icon name="arrow" color="#d6d6da" size="1.4rem" />
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 1rem"></div>
    <div style="background: #ffffff; width: 100%; height: 4rem" @click="go('invite')">
      <div style="width: 90%; height: 4rem; display: flex; margin: auto">
        <div
          style="width: 50%; height: 100%; display: flex; align-items: center"
        >
          <van-icon name="friends" color="#d6d6da" size="1.4rem" />
          <span style="margin-left: 8%; color: #676767; font-size: 1rem">邀请访客</span>
        </div>
        <div
          style="
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <van-icon name="arrow" color="#d6d6da" size="1.4rem" />
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 1rem"></div>
    <div style="background: #ffffff; width: 100%; height: 4rem" @click="go('applylog')">
      <div style="width: 90%; height: 4rem; display: flex; margin: auto">
        <div
          style="width: 50%; height: 100%; display: flex; align-items: center"
        >
          <van-icon name="notes-o" color="#d6d6da" size="1.4rem" />
          <span style="margin-left: 8%; color: #676767; font-size: 1rem">访客记录</span>
        </div>
        <div
          style="
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <van-icon name="arrow" color="#d6d6da" size="1.4rem" />
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 1rem"></div>
    <div style="background: #ffffff; width: 100%; height: 4rem" @click="go('applyforQrcode?id='+user.id+'&fjNum='+user.fjNum)">
      <div style="width: 90%; height: 4rem; display: flex; margin: auto">
        <div
          style="width: 50%; height: 100%; display: flex; align-items: center"
        >
          <van-icon name="guide-o" color="#d6d6da" size="1.4rem" />
          <span style="margin-left: 8%; color: #676767; font-size: 1rem">访客申请码</span>
        </div>
        <div
          style="
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <van-icon name="arrow" color="#d6d6da" size="1.4rem" />
        </div>
      </div>
    </div>
    <div class="admin-footer">
      <span>copyright@宁波大招科技有限公司 0574-23668886 23668889</span
      >
    </div>
    <van-popup v-model="popShow" round position="bottom" :style="{ height: '80%' }">
      <Keyboards :submitBack="submitBack"></Keyboards>
    </van-popup>
    <van-uploader :after-read="afterRead" ref="uploader" v-show="false" />
    <van-dialog v-model="doalogshow" title="绑定车牌" show-cancel-button @confirm="evaluateConfirm">
      <div style="width: 80%;height:auto;margin: auto;"  @click="popShow = true">
            <el-input
            type="text"
            placeholder="请输入车牌"
            readonly
            v-model="evaluateValue">
          </el-input>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from "vant";
import axios from "axios";
import Keyboards from '../../../components/keyboards/keyboards.vue'
export default {
  data() {
    return {
      url: "",
      load:false,
      doalogshow:false,
      user: {},
      evaluateValue:"",
      popShow:false,
    };
  },
  activated() {
   
  },
  components:{Keyboards},
  mounted() {
    this.url = this.$store.state.url;
    // localStorage.setItem("userInfo",JSON.stringify({id:100005,name:'王德法',telphone:'18058587597',unit:'',fjNum:'010101',facePhoto:''}));
    // localStorage.setItem("userInfo",JSON.stringify( {
    //   id: 1184,
    //   personId: 128,
    //   name: "王德法",
    //   telphone: "18058587597",
    //   companyName: "宁波大招科技有限公司",
    // }));
    this.getInit();
  },
  methods: {
    
    submitBack(val){
        this.popShow = false;
        this.evaluateValue = val;
    },
    evaluateConfirm(){
      if(!this.evaluateValue){
        this.$toast.fail("必须填不能为空");
        return
      }
      axios
          .post(this.url + "/Person/AddCar", {personId:this.user.id,carNo:this.evaluateValue})
          .then((res) => {
            let result = res.data;
            if (result.code == 0) {
              this.$toast.success('绑定成功');
            
            } else {
              this.$toast.fail(result.msg);
            }
          });
    },
    afterRead(file){
      const formData = new FormData();
      formData.append('file', file.file);
      this.load = true;
      axios
          .post(this.url + "/Person/UploadFacePhoto/"+this.user.id, formData)
          .then((res) => {
            let result = res.data;
            this.load = false;
            if (result.code == 0) {
              this.$toast.success('更新成功');
              this.user.facePhoto = result.data;
              console.log(this.user)
              localStorage.setItem("userInfo",JSON.stringify(this.user));
            } else {
              this.$toast.fail(result.msg);
            }
          });
      console.log(file);
    },
    handleUpload() {
      console.log(this.$refs.uploader)
      this.$refs.uploader.chooseFile(); // 触发上传组件的点击事件 
    },
    go(url){
      this.$router.push("/"+url);
    },
    getInit() {
      if (localStorage.getItem("userInfo")) {
        this.user = JSON.parse(localStorage.getItem("userInfo"));
      } else{
        this.$toast.fail("暂无人员信息");
        // this.$router.push('/bind');
      }
    },
    getJson() {},
    getUser(openid) {},
    submit() {},
  },
};
</script>
<style>
html{
  font-size: 16px;
}
</style>
<style scoped>
html,
body {
  margin: 0;
  padding: 0;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

html {
  overflow-y: scroll;
}

body {
  width: 100vw;
  overflow: hidden;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

.navi_footer {
  background-color: #ffffff;
  display: flex;
  position: fixed;
  bottom: 0%;
  height: 3rem;
  width: 100%;
  color: #888b93;
}

.navi_footer_check {
  font-weight: bold;
}
.admin-footer {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  font-size: 0.7rem;
  color: #9999b3;
  margin-bottom: 10px;
}
.navi_footer_check div {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navi_footer_this div {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navi_footer_this {
  color: #57b88f;
  font-weight: bold;
}

.my_header {
  width: 90%;
  height: 10rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
</style>
