<template>
  <view class="container">
    <view class="bg-w">
      <view class="list-cell m-t" @click="navTo('/pages/setting/personal')" hover-class="cell-hover"
        :hover-stay-time="50">
        <text class="cell-tit">个人资料</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="b-b"></view>
      <view class="list-cell" @click="navTo('/pages/user/address/index')" hover-class="cell-hover" :hover-stay-time="50">
        <text class="cell-tit">收货地址</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="b-b"></view>
      <view class="list-cell" @click="navTo('/pages/user/payment/index')" hover-class="cell-hover" :hover-stay-time="50"
        v-if="configAppstoreHidePage">
        <text class="cell-tit">收款信息</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="b-b"></view>
      <view class="list-cell" @click="navTo('reminder')" hover-class="cell-hover" :hover-stay-time="50">
        <text class="cell-tit">新消息提醒</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
    </view>
    <view class="bg-w">
      <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" @click="navTo('/pages/login/select')">
        <text class="cell-tit">切换账号</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="list-cell m-t" @click="navTo('updateMobile')" hover-class="cell-hover" :hover-stay-time="50">
        <text class="cell-tit">修改手机号</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="b-b"></view>
      <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" @click="navTo('editPassword')">
        <text class="cell-tit">修改密码</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="list-cell m-t" hover-class="cell-hover" :hover-stay-time="50"
        style="position: relative;overflow: hidden;">
        <text class="cell-tit">加我为好友方式</text>
        <text class="cell-more iconfont">{{ addMe.name }} &#xe770;</text>
        <picker style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;" @change="bindaddMeChange"
          :value="addMe.cur" range-key="name" :range="addMe.list">
        </picker>
      </view>
      <view class="b-b"></view>
      <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" @click="navTo('payPwd')">
        <text class="cell-tit">支付密码</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="b-b"></view>
      <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" @click="navTo('/pages/login/forget')">
        <text class="cell-tit">忘记密码？找回密码</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="b-b"></view>
      <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" @click="navTo('delMyUserInfo')">
        <text class="cell-tit">注销账号</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
    </view>
    <view class="bg-w">
      <view class="list-cell m-t" @click="navTo('blackList')" hover-class="cell-hover" :hover-stay-time="50">
        <text class="cell-tit">黑名单</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <view class="b-b"></view>
	  
      <view class="list-cell m-t" @click="navTo('/pages/notice/agreement?id=' + aboutId)" hover-class="cell-hover"
        :hover-stay-time="50">
        <text class="cell-tit">关于中亿华商</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
	  <view class="list-cell m-t" @click="handlerPhone('089868715191')" hover-class="cell-hover"
	    :hover-stay-time="50">
	    <text class="cell-tit">联系我们</text>
		089868715191
	    <text class="cell-more iconfont">&#xe770;</text>
	  </view>
      <view class="b-b"></view>
      <!-- 	<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" @click="onContact">
				<text class="cell-tit">联系客服</text>
				<text class="cell-more iconfont">&#xe770;</text>
			</view> -->
      <!-- #ifdef APP-PLUS -->
      <view class="b-b"></view>
      <view class="list-cell" @click="versionApp">
        <text class="cell-tit">检查更新</text>
        <text class="cell-tip">当前版本 {{ version }}</text>
        <text class="cell-more iconfont">&#xe770;</text>
      </view>
      <!-- #endif -->
    </view>
    <!-- <view class="list-cell log-out-btn bg-base" @click="toLogout">
			<text class="cell-tit">退出登录</text>
		</view> -->

    <view class="fixed">
      <text class="p1" @tap="navTo('privacy?status=hide')">服务协议｜隐私政策</text>
      <text class="p2">Copyright©️2018-2023</text>
      <text class="p2" style="margin-bottom: 88upx;">中亿华商 属于 中亿华商（海南）跨境电子商务有限公司 版权所有</text>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex"
import url from "@/common/http/url.js"
export default {
  data () {
    return {
      version: "1.0.0",
      aboutId: 0,
      mobileList: [],
      platform: uni.getSystemInfoSync().platform,
      uniPlatform: uni.getSystemInfoSync().uniPlatform,
      configAppstoreHidePage: false,
      addMe: {
        cur: 0,
        name: '允许任何人添加为好友',
        list: [
          { name: '允许任何人添加为好友', key: 'AllowType_Type_AllowAny' },
          { name: '需要验证信息添加', key: 'AllowType_Type_NeedConfirm' },
          { name: '不允许添加为好友', key: 'AllowType_Type_DenyAny' },
        ]
      }
    }
  },
  onLoad () {
    console.log(this.TIM.TYPES);
    this.getMyProfile();
    // #ifdef APP-PLUS
    this.version = plus.runtime.version;
    // #endif
    // 客服
    this.$http("GET", url.common.customerService).then(res => {
      let mobileList = res.data.mobile
      mobileList.map(v => { v.type = "电话" })
      let qqList = res.data.qq
      qqList.map(v => { v.type = "QQ" })
      let wechatList = res.data.wechat
      wechatList.map(v => { v.type = "微信" })
      this.mobileList = wechatList.concat(qqList).concat(mobileList)
    })
    // 关于我们
    this.$http("GET", url.common.getAboutId).then(res => {
      this.aboutId = res.data
    })

    // 获取 苹果应用商店需要隐藏的页面和功能模块 配置
    if (this.platform === "ios" && this.uniPlatform === 'app') {
      this.$http("GET", url.common.appstoreHidePage).then(res => {
        console.log(this.platform)
        if (res.data) {
          this.configAppstoreHidePage = res.data.keyValue === "1" ? false : true
        }
      })
    } else {//其它设备则显示
      this.configAppstoreHidePage = true
    }
  },
  methods: {
    ...mapMutations(["logout"]),
	handlerPhone (phone) {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	},
    getMyProfile () {
      let promise = uni.$TUIKit.getMyProfile();
      promise.then((imResponse) => {
        console.log(imResponse.data); // 个人资料 - Profile 实例
        let { allowType } = imResponse.data;
        if (allowType == 'AllowType_Type_AllowAny') {
          this.addMe.cur = 0;
          this.addMe.name = '允许任何人添加为好友';
        } else if (allowType == 'AllowType_Type_NeedConfirm') {
          this.addMe.cur = 1;
          this.addMe.name = '需要验证信息添加';
        } else if (allowType == 'AllowType_Type_DenyAny') {
          this.addMe.cur = 2;
          this.addMe.name = '不允许添加为好友';
        }
      }).catch((imError) => {
        console.warn('getMyProfile error:', imError); // 获取个人资料失败的相关信息
      });
    },
    // 设置加我权限
    bindaddMeChange (e) {
      let item = this.addMe.list[e.target.value];
      let promise = uni.$TUIKit.updateMyProfile({
        allowType: item.key
      });
      promise.then((imResponse) => {
        this.getMyProfile();
      }).catch(function (imError) {
        console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
      });
    },
    versionApp () {
      // #ifdef APP-PLUS
      getApp().versionApp(true);
      // #endif
      // #ifndef APP-PLUS
      // this.$msg("当前版本不支持检测更新～")
      // #endif
    },
    //退出登录
    toLogout () {
      let that = this;
      uni.showModal({
        title: "提示",
        content: '确定要退出登陆么',
        success: e => {
          if (e.confirm) {
            that.logout();
          }
        }
      });
    },
    // 联系客服
    onContact () {
      if (this.mobileList.length === 0) return
      let _this = this
      let itemList = []
      let phoneList = []
      this.mobileList.map(v => {
        itemList.push(`[${v.type}]${v.name}(${v.keyValue})`)
        phoneList.push(v.keyValue)
      })
      uni.showActionSheet({
        itemList: itemList,
        success (res) {
          if (itemList[res.tapIndex].indexOf("QQ") > -1) {
            _this.$onCopy(phoneList[res.tapIndex])
            _this.$msg("QQ号已复制, 请打开QQ添加客服联系", 2000)
          } else if (itemList[res.tapIndex].indexOf("微信") > -1) {
            _this.$onCopy(phoneList[res.tapIndex])
            _this.$msg("微信号已复制, 请打开微信添加客服联系", 2000)
          } else {
            uni.makePhoneCall({
              phoneNumber: phoneList[res.tapIndex]
            });
          }
        }
      })
    },
    navTo (path) {
      this.$navigateTo(path)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.b-b {
  width: 730rpx;
  background-color: #f1f1f1;
  height: 2rpx;
  text-align: right;
  margin-left: 20rpx;
}

.list-cell {
  display: flex;
  align-items: baseline;
  padding: 20upx;
  line-height: 60upx;
  position: relative;
  background: #fff;
  justify-content: center;

  &.log-out-btn {
    margin-top: 40upx;
    border-radius: 50upx;
    width: 90%;
    margin-left: 2.5%;

    // background: linear-gradient(to bottom,  #3a2397 0%, #805df5 100%); 
    .cell-tit {
      color: #FFFFFF;
      text-align: center;
      margin-right: 0;
    }
  }

  &.cell-hover {
    background: #fafafa;
  }

  &.m-t {
    margin-top: 16upx;
  }

  .cell-more {
    align-self: baseline;
    font-size: 32rpx;
    color: #909399;
    margin-left: 10upx;
  }

  .cell-tit {
    flex: 1;
    font-size: 30rpx;
    color: #303133;
    margin-right: 10upx;
  }

  .cell-tip {
    font-size: 28rpx;
    color: #909399;
  }
}

.fixed {
  // position: fixed;
  // bottom: 30rpx;
  // left: 0;
  // right: 0;
  margin-top: 80rpx;
  margin-bottom: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .p1 {
    font-size: 30rpx;
    color: #666;
  }

  .p2 {
    font-size: 24rpx;
    color: #999999;
  }
}
</style>
