<template>
  <view class="container">
    <image class="bkg" mode="aspectFill" src="~@/static/me/bkg.png"></image>

    <view class="top" @click="isShowMyInfo = true">
      <image class="avatar" mode="aspectFit" :src="vuex_user.headimgurl || vuex_default_icon"></image>

      <view v-if="token" class="info">
        <view class="info-name">
          {{ vuex_user.nickname || '微信用户' }}
        </view>
        <view class="info-mobile">手机号：
          <text v-if="vuex_user.mobile">
            {{ vuex_user.mobile || '' }}
          </text>
          <u-button v-if="!vuex_user.mobile"
                    shape="circle"
                    size="mini"
                    open-type="getPhoneNumber"
                    type="primary"
                    @getphonenumber="onPhoneNumber"
                    ripple>获取手机号</u-button>
        </view>
      </view>
      <view v-else class="info">
        <view class="info-name">未登录</view>
        <u-button shape="circle"
                  size="mini"
                  type="primary"
                  ripple
                  @click="$u.route({
                    url: '/pages/login/login',
                    type: 'redirect'
                  })">点击登录</u-button>
      </view>
    </view>

    <view v-if="token" class="panel panel1">
      <view class="tab"
            @click="$u.route({
              url: '/package_sub/pages/OrderList/OrderList',
              params: {
                type: 1
              }
            })">
        <image class="tab__icon" mode="aspectFit" src="~@/static/me/peizheng.png"></image>
        <view>陪诊订单</view>
      </view>
      <view class="tab"
            @click="$u.route({
              url: '/package_sub/pages/Shop/Order'
            })">
        <image class="tab__icon" mode="aspectFit" src="~@/static/me/shangcheng.png"></image>
        <view>商城订单</view>
      </view>
      <view class="tab"
            @click="$u.route({
              url: '/package_sub/pages/OrderList/OrderList',
              params: {
                type: 2
              }
            })">
        <image class="tab__icon" mode="aspectFit" src="~@/static/me/jujia.png"></image>
        <view>居家照护订单</view>
      </view>
      <view class="tab"
            @click="$u.route({
              url: '/package_sub/pages/UserAddress/UserAddress'
            })">
        <image class="tab__icon" mode="aspectFit" src="~@/static/me/dizhi.png"></image>
        <view>收货地址</view>
      </view>
      <view class="tab" @click="$u.throttle($u.route({ url: '/package_sub/pages/UserArchive/UserArchive' }))">
        <image class="tab__icon" mode="aspectFit" src="~@/static/me/lianxiren.png"></image>
        <view>常用联系人</view>
      </view>
      <view class="tab"
            @click="$u.route({
              url: '/package_sub/pages/OrderList/OrderList',
              params: {
                pay_status: 2
              }
            })">
        <image class="tab__icon" mode="aspectFit" src="~@/static/me/shouhou.png"></image>
        <view>售后订单</view>
      </view>
    </view>
    <view class="panel panel2">
      <button class="row" open-type="share">
        <u-icon class="row__icon" name="share"></u-icon>
        <view>我要分享</view>
      </button>
      <view class="row" @click="isShowModal = true">
        <u-icon class="row__icon" name="man-add"></u-icon>
        <view>加入我们</view>
      </view>
      <view class="row" @click="isShowModal = true">
        <u-icon class="row__icon" name="kefu-ermai"></u-icon>
        <view>联系我们</view>
      </view>
<!--      <view class="row" v-if="token" @click="logout">-->
<!--        <u-icon class="row__icon" name="backspace"></u-icon>-->
<!--        <view>退出</view>-->
<!--      </view>-->
    </view>
    <tabbar />

    <!-- 设置头像 -->
    <view class="myinfo">
      <u-popup v-model="isShowMyInfo" mode="bottom" :border-radius="30" safe-area-inset-bottom>
        <view class="form-wrapper">
          <u-form :model="form" ref="uForm" label-width="140rpx">
            <u-form-item label="头像">
              <button class="btn-normal" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image :src="form.headimgurl || vuex_default_icon" mode="aspectFit"></image>
              </button>
            </u-form-item>
            <u-form-item label="昵称">
              <input type="nickname" v-model="form.nickname" @change="nicknameChange"></input>
            </u-form-item>
            <u-form-item label="性别">
              <u-radio-group v-model="form.sex" active-color="#b83531">
                <u-radio name="男">男</u-radio>
                <u-radio name="女">女</u-radio>
                <u-radio name="保密">保密</u-radio>
              </u-radio-group>
            </u-form-item>
            <u-form-item label="手机号">
              <u-input v-model="form.mobile"></u-input>
            </u-form-item>
          </u-form>
        </view>
        <!-- 操作按钮 -->
        <view class="footer">
          <view class="btn-wrapper">
            <u-button type="primary" shape="circle" ripple :custom-style="{ 'width': '90%', 'margin': 'auto' }" @click="submit">保存</u-button>
          </view>
        </view>
      </u-popup>
    </view>

    <u-modal v-model="isShowModal" :show-title="false" content="客服热线：xxx-xxxxxxxx"></u-modal>

  </view>
</template>

<script>
import { ROOTPATH } from '@/common/config'
import { WXBizDataCrypt } from '@/libs/WXBizDataCrypt'
import Tabbar from "@/component/Tabbar/Tabbar.vue";
export default {
  components: {
    Tabbar
  },
  data() {
    return {
      isShowModal: false,
      isShowMyInfo: false,
      form: {
        nickname: '',
        headimgurl: '',
        mobile: '',
        sex: ''
      },
    };
  },
  methods: {
    nicknameChange(e) {
      this.form.nickname = e.target.value
    },
    async onPhoneNumber(e) {
      try {
         if (e.detail.encryptedData) {
           const res = await this.$u.api.getMobile({
             code: e.detail.encryptedData
           })
           const { user } = await this.$u.api.getUserInfo()
           this.$u.vuex('vuex_user', user)
         }
      } catch (err) {
        console.error(err)
      }
    },
    onChooseAvatar(e) {
      uni.uploadFile({
        url: ROOTPATH + "/api/mobile/upload-file",
        filePath: e.detail.avatarUrl,
        name: 'file',
        header: {
          ['Authorization']: `Bearer ${this.token}`
        },
        success: (res) => {
          uni.showToast({
            title: '上传成功',
            duration: 1000,
            icon: 'none'
          })
          let data = JSON.parse(res.data)
          this.form.headimgurl = data.url
        }
      })
    },
    submit() {
      this.$u.api.updateUser(this.form).then(async (_) => {
        const { user } = await this.$u.api.getUserInfo()
        this.$u.vuex('vuex_user', user)
        this.$u.toast('保存成功')
        this.isShowMyInfo = false
      })
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确认退出？',
        success: status => {
          if (status.confirm) {
            this.$u.vuex('vuex_token', '')
            this.$u.vuex('vuex_user', {})
            uni.setStorageSync('lifeData', {})
            this.$u.route({
              url: '/pages/index/index',
              type: 'tab'
            })
          }
        }
      })
    }
  },
  computed: {
    token() {
      return this.vuex_token || uni.getStorageSync('lifeData')?.vuex_token
    }
  },
  watch: {
    vuex_user: {
      handler: function (newVal) {
        this.form.mobile = newVal.mobile
        this.form.sex = newVal.sex
        this.form.headimgurl = newVal.headimgurl
        this.form.nickname = newVal.nickname
      },
      immediate: true
    }
  },
  onLoad() {
  },
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  position: relative;
  background: #f4efef;

  .bkg {
    width: 100vw;
    z-index: 0;
    height: 550rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  .top {
    display: flex;
    align-items: center;
    position: relative;
    padding: 4vh 25rpx 0;

    .avatar {
      width: 112rpx;
      height: 112rpx;
      border-radius: 100%;
      background: #fff;
      border: 6rpx #fff solid;
      filter: drop-shadow(4rpx 6rpx 10rpx #ba534c);
    }
    .info {
      color: #333;
      padding-left: 40rpx;

      &-name {
        font-size: 28rpx;
        font-weight: 600;
      }
      &-mobile {
        font-size: 24rpx;
        padding-top: 18rpx;
      }
    }
  }

  .panel {
    position: relative;
    background: #fff;
    border-radius: 10rpx;
    margin: 40rpx 25rpx 0;
    padding: 28rpx 25rpx;
  }
  .panel1 {
    display: grid;
    grid-gap: 24rpx;
    grid-template-columns: repeat(3, 1fr);

    .tab {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &__icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .panel2 {
    button {
      border: none;
      background-color: transparent;
      line-height: 1.5;
      font-size: 28rpx;
      color: #333;
      &::after {
        border: none;
      }
    }
    .row {
      display: flex;
      padding: 20rpx 10rpx;
      border-bottom: 2rpx #dee2e6 solid;

      &__icon {
        margin-right: 20rpx;
        color: $uni-color-primary;
        font-size: 36rpx;
      }
    }
  }
}

.form-wrapper {
  margin: 20rpx auto 20rpx auto;
  padding: 0 40rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;

  .btn-normal {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-size: unset;
    text-align: unset;
    overflow: visible;
    color: inherit;

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 100%;
      border: 2px solid #fff;
      margin-right: 30rpx;
    }
  }

  .btn-normal::after {
    border: none
  }
  .auth-btn {
    color: $uni-color-primary;
  }
}
</style>
