<!-- 我的 -->
<template>
  <view class="content">
    <view style="width: 100%; height: 44px;"></view>
    <view class="top-ail">
      <view class="dix">
        <view style="display: flex">
          <view class="touxiang">
            <image :src="baseUrl +user.avatar" mode=""></image>
          </view>
          <view class="">
            <view class="t-title">{{ user.nickname }}</view>
            <view class="t-tel">{{ user.mobile }}</view>
          </view>
        </view>

        <!-- 添加编辑按钮 -->
        <view class="edit-button" >
          <view style="margin-bottom: 10px" @click="modifyPassword">修改密码</view>
          <view style="margin-top: 10px" @click="editUserInfo">编辑信息</view>
        </view>
      </view>
      <!-- 三项 -->

      <!-- 店铺商铺 -->

      <!--  -->
      <view class="ian-box">
        <view class="on-input" @click="golieb()">
          <view class="dix">
            <view class="d-icon">
              <image src="../../static/detection/zhaq.png" mode=""></image>
            </view>
            <view class="aa">上门取车列表</view>
          </view>
          <view class="">
            <uni-icons type="right" color="#999999" size="16"></uni-icons>
          </view>
        </view>
        <view class="on-input" @click="goRoyalty()">
          <view class="dix">
            <view class="d-icon">
              <image src="../../static/detection/zhaq.png" mode=""></image>
            </view>
            <view class="aa">提成记录</view>
          </view>
          <view class="">
            <uni-icons type="right" color="#999999" size="16"></uni-icons>
          </view>
        </view>
      </view>
      <view class="ian-box">
        <view class="on-input" @click="goWord()">
          <view class="dix">
            <view class="d-icon">
              <image src="../../static/detection/zhaq.png" mode=""></image>
            </view>
            <view class="aa">word</view>
          </view>
          <view class="">
            <uni-icons type="right" color="#999999" size="16"></uni-icons>
          </view>
        </view>
      </view>
      <view class="ian-box">
        <!-- 	<view class="on-input">
            <view class="dix">
              <view class="d-icon">
                  <image src="../../static/detection/zhaq.png" mode=""></image>
              </view>
              <view class="aa">账户与安全</view>
            </view>
            <view class="">
              <uni-icons type="right" color="#999999" size="16"></uni-icons>
            </view>
          </view>
          <view class="on-input">
            <view class="dix">
              <view class="d-icon">
                  <image src="../../static/detection/yhk.png" mode=""></image>
              </view>
              <view class="aa">银行卡管理</view>
            </view>
            <view class="">
              <uni-icons type="right" color="#999999" size="16"></uni-icons>
            </view>
          </view> -->

        <view class="on-input" @click="dialogToggle()">
          <view class="dix">
            <view class="d-icon">
              <image src="../../static/detection/tc.png" mode=""></image>
            </view>
            <view class="aa">退出登录</view>
          </view>
          <view class="">
            <uni-icons type="right" color="#999999" size="16"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog  cancelText="关闭" confirmText="同意" title="通知" content="您确认要退出吗!"
                        @confirm="dialogConfirm"
                        @close="dialogClose"></uni-popup-dialog>
    </uni-popup>


    <!-- 底部 -->
    <view style="width: 100%; height: 50px;"></view>
    <tabBar :msg="msg"></tabBar>

  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';
import tabBar from '../../components/staffTabBer/tabBar.vue'

export default {
  data() {
    return {
      msg: '3',
      user: {},
      baseUrl: '',
      partnerId: '',
      myindex: {}
    }
  },
  onLoad() {
    this.baseUrl = this.$baseImageUrl + '/'
  },
  onShow() {
    this.user = uni.getStorageSync('staffinfo')
    console.log(this.user);
    this.partnerId = uni.getStorageSync('partnerId')
    this.getindexmy()
  },
  components: {
    tabBar,
  },
  methods: {
    dialogToggle() {
      this.$refs.alertDialog.open()
    },
    modifyPassword() {
      // 跳转到修改密码页面
      uni.navigateTo({
        url: '/pages/modifyPassword/modifyPassword'  // 修改密码页面路径
      });
    },
    dialogConfirm() {
      this.tui()
      this.$refs.alertDialog.close()
    },
    // 点击编辑信息按钮时调用此方法
    editUserInfo() {
      // 这里可以跳转到编辑页面并传递参数
      uni.navigateTo({
        url: `/pages/editUserInfo/editUserInfo`
      });
    },
    dialogClose() {
      this.$refs.alertDialog.close()
      console.log('点击关闭')
    },
    async getindexmy() {
      console.log('调用')
      // let res = await request({
      // 	url:'/partnerOwn/partner/accountInfo?partnerId='+this.partnerId,
      // 	method: 'get',
      // })
      // this.myindex = res.data
      let ress = await request({
        url: '/system/user/profile/get',
        method: 'get',
      })
      console.log('个人信息', ress.data)
      this.user = ress.data
    },
    tui() {
      uni.clearStorageSync();
      uni.reLaunch({
        url: '/pages/Login/login'
      })
    },
    golieb() {
      uni.navigateTo({
        url: "/pages/staff/golist"
      })
    },
    goRoyalty() {
      uni.navigateTo({
        url: "/pages/staff/goRoyalty"
      })
    },
    goWord() {
      request({
        url: '/system/info/exportWord',
        method: 'get',
        params: {
          id: 4400
        }
      })
    },
    getdianpu() {
      uni.navigateTo({
        url: "/pages/my/shoporder"
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh);
  background: linear-gradient(225deg, #EFF5FF 0%, rgba(255, 255, 255, 0) 100%);
}

.c-top {
  width: 100%;
  // height: 283px;
  // background-color: cornflowerblue;
  // background: url("http://www.nuoyunr.com/lananRsc/shopBg.png") center no-repeat;
  // background-size:100% 100%;
}

.top-ail {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.dix {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 保持头像和信息左对齐，按钮右对齐 */
}

.touxiang {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background-color: whitesmoke;
  margin-left: 10px;

  image {
    width: 100%;
    height: 100%;
  }
}

.t-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-left: 15px;
}

.t-tel {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  margin-left: 15px;
}

.sanxiang {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.lan-box {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background: linear-gradient(90deg, #EDF4FD 0%, #E1EFFF 100%);
  border-radius: 8px;
  margin: 10px auto;
}

.s-box {
  width: 33%;
  border-right: 1px solid #EEEEEE;
  text-align: center;
}

.simg {
  width: 26px;
  height: 26px;
  margin: 0 auto;

  image {
    width: 100%;
    height: 100%;
  }
}

.zc-text {
  font-size: 13px;
  font-weight: 400;
  color: #333333;
  margin: 5px auto;
}

.lan-num {
  font-size: 26px;
  font-weight: 600;
  color: #0D2E8D;
}

.hei-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

.cont-box {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-left {
  width: 50%;
  box-sizing: border-box;
}

.l-left {
  width: 50%;
  box-sizing: border-box;
  border-right: 1px solid #EEEEEE;
  padding-right: 5px;
}

.c-bt {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  margin-bottom: 2px;
}

.c-lan {
  font-size: 25px;
  font-weight: 600;
  color: #0D2E8D;
}

.c-right {
  width: 122px;
  height: 35px;
  background: #FFFFFF;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0D2E8D;
}

.l-icon {
  width: 15px;
  height: 15px;

  image {
    width: 100%;
    height: 100%;
  }
}

.lan-text {
  font-size: 14px;
  font-weight: 400;
  color: #0D2E8D;
  margin: 0px 2px;
}

.c-hei {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
}

.dian-box {
  background-color: white;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ian-box {
  background-color: white;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  padding-bottom: 0px;
  // margin-bottom: 10px;
  margin-top: 10px;
}

.dian-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.d-icon {
  width: 16px;
  height: 16px;

  image {
    width: 100%;
    height: 100%;
  }
}

.aa {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin-left: 5px;
}

.on-input {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  // border-bottom: 1px solid #EEEEEE;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.edit-button {
  font-size: 14px;
  color: #007aff;
  margin-top: 10px;
  cursor: pointer;
  align-self: flex-end; /* 使按钮右对齐 */
  view:hover {
    text-decoration: underline;
  }
}

//.edit-button:hover {
//  text-decoration: underline;
//}
</style>
