<template>
  <view class="personal-data">
    <!-- <view class="wrapper"> -->
		<view class="wrapList acea-row row-between-wrapper">
			<!-- <view class="item acea-row row-between-wrapper on"> -->
				<!-- <view class="picTxt acea-row row-between-wrapper"> -->
					<view class="pictrue">
					  <!-- <div class="pictrue"> @tap="chooseImage" -->
							<image class="image" v-if="avatar" :src="avatar" />
							
							<view class="noAvatar acea-row row-middle row-center" v-else>
								<image src="../../../static/images/yanjie-logo.png" mode="widthFix"></image>
							</view>
					  <!-- </div> -->
					  <!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" /> -->
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
					</view>
					<view class="text">
					  <view class="name line1">{{ userInfo.nickname || '微信用户' }}</view>
					  <view class="phone">已绑定手机：{{ userInfo.phone }}</view>
					</view>
				<!-- </view> -->
			<!-- </view> -->
		</view>
	<!-- </view> -->
	<view class="list">
		<view class="item acea-row row-between-wrapper">
			<view>昵称</view>
			<view class="input">
			  <input type="nickname" v-model="userInfo.nickname" />
			</view>
		</view>
		<view class="item acea-row row-between-wrapper">
			<view>眼界ID</view>
			<view class="input" style="color: #999999;">
				{{userInfo.uid}}
			  <!-- <input type="text" :value="userInfo.uid" disabled class="id" /> -->
			  <!-- <text class="iconfont icon-suozi"></text> -->
			</view>
		</view>
		<view class="item acea-row row-between-wrapper">
			<view>生日</view>
			<view class="input">
			  <picker mode="date" :value="birth" @change="bindDateChange">
			  	<view v-if="!birth" class="empty">点击完善生日</view>
			  	<view v-else>
			  		{{birth}}
			  	</view>
			  </picker>
			</view>
		</view>
		<view class="item acea-row row-between-wrapper">
			<view>手机号</view>
			<view class="input" style="color: #999999;">
				{{userInfo.phone?userInfo.phone:'未绑定'}}
			  <!-- <input type="text" v-if="userInfo.phone" v-model="userInfo.phone" placeholder="未绑定" disabled/>
			  <input type="text" v-else value="未绑定" disabled class="id" /> -->
			</view>
		</view>
        <!-- <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
          <view>密码</view>
          <view class="input acea-row row-between-wrapper">
            <text>点击修改密码</text>
            <text class="iconfont icon-suozi"></text>
          </view>
        </view> -->
    </view>
    <view class="modifyBnt bg-color-red" @click="submit">保存</view>
		<view class="modifyBnt cancel" @click="cancel">取消</view>
    <!-- #ifndef MP-WEIXIN -->
    <view
      class="logOut cart-color acea-row row-center-wrapper"
      @click="logout"
    >退出登录</view>
    <!-- #endif -->
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import { trim, isWeixin, chooseImage } from "@/utils";
import { VUE_APP_API_URL } from "@/config";
import {
  postUserEdit,
  getLogout,
  switchH5Login,
  getUserInfo,
} from "@/api/user";
import cookie from "@/utils/store/cookie";
import store from "@//store";
import dayjs from "dayjs";

export default {
  name: "PersonalData",
  components: {
    // VueCoreImageUpload
  },
  data: function () {
    return {
      avatar: "",
      isWeixin: false,
      currentAccounts: 0,
      switchUserInfo: [],
      userIndex: 0,
			birth: '',
    };
  },
  computed: mapGetters(["userInfo"]),
  mounted: function () {
    this.avatar = this.userInfo.avatar;
    this.isWeixin = isWeixin();
    this.getUserInfo();
  },
  methods: {
    goChangePassword() {
      this.$yrouter.push("/pages/user/ChangePassword/index");
    },
    switchAccounts: function (index) {
		console.log(index,'1111111111111111188');
      let that = this;
      this.userIndex = index;
      let userInfo = this.switchUserInfo[this.userIndex];
      if (this.switchUserInfo.length <= 1) return true;
      if (userInfo === undefined) {
        uni.showToast({
          title: "切换的账号不存在",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (userInfo.user_type === "h5") {
        switchH5Login()
          .then(({ data }) => {
            uni.hideLoading();
            const expires_time = dayjs(data.expires_time);
            store.commit("login", data.token, expires_time);
            that.$emit("changeswitch", false);
            location.reload();
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({
              title:
                err.msg || err.response.data.msg || err.response.data.message,
              icon: "none",
              duration: 2000,
            });
          });
      } else {
        cookie.set("loginType", "wechat", 60);
        uni.hideLoading();
        this.$store.commit("logout");
        this.$emit("changeswitch", false);
      }
    },
    getUserInfo: function () {
      let that = this;
      getUserInfo().then((res) => {
        // let switchUserInfo = res.data.switchUserInfo;
        // for (let i = 0; i < switchUserInfo.length; i++) {
        //   if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
        //   if (
        //     !that.isWeixin &&
        //     switchUserInfo[i].user_type != "h5" &&
        //     switchUserInfo[i].phone === ""
        //   )
        //     switchUserInfo.splice(i, 1);
        // }
        // that.$set(this, "switchUserInfo", switchUserInfo);
      });
    },
		onChooseAvatar(e) {
			this.avatar = e.detail.avatarUrl;
		},	
    chooseImage() {
      chooseImage((img) => {
        this.avatar = img;
      });
    },
		bindDateChange(e) {
			this.birth = e.detail.value;
		},

    submit: function () {
		
      let userInfo = this.userInfo;
	  console.log(userInfo,'==============');
			let data = {
				nickname: '',
				avatar: ''
			};
			if(this.userInfo.nickname) {
				data.nickname = trim(this.userInfo.nickname);
			} else if (this.avatar) {
				data.avatar = this.avatar;
			}
      postUserEdit(data).then(
        (res) => {
          this.$store.dispatch("userInfo", true);
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
          this.$yrouter.back();
        },
        (err) => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: "none",
            duration: 2000,
          });
        }
      );
    },
		cancel() {
			this.$yrouter.back();
		},
    logout: function () {
      uni.showModal({
        title: "提示",
        content: "确认退出登录?",
        success: (res) => {
          if (res.confirm) {
            getLogout()
              .then((res) => {
                this.$store.commit("logout");
                this.$yrouter.replace({
                  path: "/pages/user/Login/index",
                  query: {},
                });
              })
              .catch((err) => {});
          } else if (res.cancel) {
            // console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
	.wrapList {
		padding: 20rpx 32rpx 32rpx;
		.pictrue {
			width: 100rpx;
			height: 100rpx;
			box-shadow: 0rpx 0rpx 20rpx 10rpx rgba(0,0,0,0.08);
			background: linear-gradient(135deg, rgba(27, 141, 204, 1), rgba(57, 211, 150, 1));
			padding: 4rpx;
			border-radius: 50%;
			position: relative;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.noAvatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: #F1F1F1;
				image {
					width: 90%;
				}
			}
			.avatar-wrapper {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		}
		.text {
			width: 586rpx;
			padding-left: 24rpx;
			.name {
				font-size: 15px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #3A3A3C;
				line-height: 21px;
				padding-bottom: 10rpx;
			}
			.phone {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3A3A3C;
				line-height: 32rpx;
			}
		}
	}
</style>
