<template>
  <sail-page type="loading-view" title="我的个人信息" isHead>
    <div slot="content">
        <div id="myPersonalInfor">
          <!-- <cube-upload
              v-show="false"
              :action="action"
              v-model="files"
              :simultaneous-uploads="1"
              @file-success="successHandler"
              @file-removed="removeHandler"
              @files-added="filesAdded"
              @file-error="errHandler"
              /> -->
          <cube-upload
            :action="action"
            v-show="false"
            v-model="files"
            :simultaneous-uploads="1"
            @file-success="successHandler"
            @file-removed="removeHandler"
            @files-added="filesAdded"
            @file-error="errHandler"
            >
            <div class="cube-upload-def clear-fix">
              <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"/>
              <cube-upload-btn :multiple="false"/>
            </div>
          </cube-upload>
          <div class="van-cell__title" @click="handleDialog">
            <div class="personalInfor-main-icon">
             <div class="personalInfor-main-icon_left">
               <div class="personalInfor-main_content">头像</div>
             </div> 
            </div>
            <div class="personalInfor-main-icon_right">
              <div class="personalInfor-main-right_words">
                <img v-if="loginInfo.headImg" class="portrait-img_status" :src="`${hostURL}${loginInfo.headImg}`">
                <img v-if="!loginInfo.headImg" class="portrait-img_status" src="@/assets/img/common_def_avatar@3x.png">
              </div>
              <div class="personalInfor-main-right_icon">
                <svg class="icon nav-right_icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"/>
                </svg>
              </div>
            </div>
          </div>
          <router-link class="link" to="/NickName">
            <div class="van-cell__title">
              <div class="personalInfor-main-icon">
               <div class="personalInfor-main-icon_left">
                 <div class="personalInfor-main_content">昵称</div>
               </div> 
              </div>
              <div class="personalInfor-main-icon_right">
                <div class="personalInfor-main-right_words" v-if="!loginInfo.nickname">未设置</div>
                <div class="personalInfor-main-right_words" v-if="loginInfo.nickname">{{loginInfo.nickname}}</div>
                <div class="personalInfor-main-right_icon">
                  <svg class="icon nav-right_icon" aria-hidden="true">
                    <use xlink:href="#icon-qianjin"/>
                  </svg>
                </div>
              </div>
            </div>
          </router-link>
          <router-link class="link" to="/ModifyTelephone">
          <div class="van-cell__title">
            <div class="personalInfor-main-icon">
             <div class="personalInfor-main-icon_left">
               <div class="personalInfor-main_content">手机号</div>
             </div> 
            </div>
            <div class="personalInfor-main-icon_right">
              <div class="personalInfor-main-right_words">{{loginInfo.phone}}</div>
              <div class="personalInfor-main-right_icon">
                <svg class="icon nav-right_icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"/>
                </svg>
              </div>
            </div>
          </div>
          </router-link>
          <router-link class="link" to="/ModifyPassword">
            <div class="van-cell__title">
              <div class="personalInfor-main-icon">
               <div class="personalInfor-main-icon_left">
                 <div class="personalInfor-main_content">密码</div>
               </div> 
              </div>
              <div class="personalInfor-main-icon_right">
                <div class="personalInfor-main-right_words">修改密码</div>
                <div class="personalInfor-main-right_icon">
                  <svg class="icon nav-right_icon" aria-hidden="true">
                    <use xlink:href="#icon-qianjin"/>
                  </svg>
                </div>
              </div>
            </div>
          </router-link>
          <router-link class="link" to="/RealNameCheck/normal">
            <div class="van-cell__title">
                <div class="personalInfor-main-icon">
                 <div class="personalInfor-main-icon_left">
                   <div class="personalInfor-main_content">身份证</div>
                 </div> 
                </div>
                <div class="personalInfor-main-icon_right">
                  <div class="personalInfor-main-right_words">{{!loginInfo.cardCode?'未添加':'已认证'}}</div>
                  <div class="personalInfor-main-right_icon">
                    <svg class="icon nav-right_icon" aria-hidden="true">
                      <use xlink:href="#icon-qianjin"/>
                    </svg>
                  </div>
                </div>
            </div>
          </router-link>
        </div>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import { Toast } from "vant";
import api from "@/api/index.js";
let URL = api.serverURI;
/* import { Dialog } from 'vant';*/
export default {
  components: {
    sailPage
  },
  data: function(){
    return {
      action: {
        target: api.getURL("uploader/upload"),
        data: {
          inputId: "file"
        }
      },
      hostURL: URL,
      files: []
    }; 
  },
  computed: {
    ...mapState({
      loginInfo: state => state.loginModule.loginInfo,
    })
  },
  methods: {
    handleDialog (){
      document.querySelector("#myPersonalInfor .cube-upload-input").click();
    },
    successHandler(file) {
      //
      let url = file.response.data;
      //
      this.$store.commit("loginModule/SET_LOGIN_HEADE_IMG", url);
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在保存头像信息"
      });
      //Toast.clear();
      this.$store
        .dispatch("updateUserModule/updateUser", {
          cardCode: this.loginInfo.cardCode,
          headImg: this.loginInfo.headImg,
          nickname: this.loginInfo.nickname,
          updateFlag: 2,
          userName: this.loginInfo.loginName
        }).then(res => {
          Toast.clear();
          if(res) {
            Toast.success({
              duration: 1000,
              message: "头像保存成功"
            });
          }
        });
      //this.$store.commit('feedbackModule/ADD_IMG_INFO', file)
      ///this.$emit('updateFiles', file, this.imgType, true)
    },
    removeHandler(file) {
      
      //this.$store.commit('feedbackModule/REMOVE_IMG_INFO', file)
      //this.$emit('updateFiles', file, this.imgType, false)
    },
    errHandler(file) {
      // const msg = file.response.message
      Toast.clear();
      this.$createToast({
        type: "warn",
        txt: "上传失败",
        time: 2000
      }).show();
    },
    filesAdded(files) {
      //
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在上传头像"
      });
      let hasIgnore = false;
      const maxSize = 8 * 1024 * 1024; // 1M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore && Toast.fail("选择的图片过大，无法上传");
    }
  },
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
@bgWhite:#fff;
@fontSize:16px;
@marginSize: 13px;
@portraitSize:50px;
  #myPersonalInfor {
  	width: 100%;
  	background: @bgWhite;
    .personalInfor-footer {
      margin-bottom: 15px;
      background: @bgWhite;
      margin-top: @marginSize;
      margin-bottom: @marginSize;
    }
    .personalInfor-content {
      background: @bgWhite;
      margin-top: @marginSize;
      margin-bottom: @marginSize;
    }
    .van-cell__title {
      border-bottom: 1px solid #F4F4F4;
        padding-top: 5px;
        display: flex;
        justify-content: space-between;
        .personalInfor-main-icon_right {
          display: flex;
        }
        .personalInfor-main-icon_left {
          display: flex;
        }
    }
    .nav-left_icon {
      font-size: 30px;
      color: #AFAFAF;
      margin-left: 10px;
    }
    .personalInfor-main_content {
      margin-left: 33px;
      height: 50px;
      line-height: 50px;
      font-size: 17px;
      color:#323232;
    }
    .nav-right_icon {
      font-size: 15px;
      color: #AFAFAF;
      line-height: 50px;
      height: 50px;
      margin-right: 15px;
    }
    .personalInfor-main-right_words {
      font-size: 17px;
      height: 50px;
      color: #ccc;
      margin-right: 5px;
      line-height: 50px;
    }
    .portrait-img_status {
      display: flex;
      width: @portraitSize;
      height: @portraitSize;
      line-height: @portraitSize;
      border-radius: 50%;
    }
  }
</style>