<template>
  <view class="mine">
    <view class="user-info">
      <view class="not-login" @click="toLogin" v-if="!loginStore.isLogin">
        <uv-image src="/static/images/mine/defaultAvatar.png" width="120rpx" height="120rpx" />
        <view class="text">点击登录</view>
      </view>
      <view class="is-login" v-else>
        <view class="company-name" @click="changeCurrent">
          <text class="name">{{ currentUserInfo?.deptName }}</text>
          <image src="/static/images/mine/change.png" alt="" />
        </view>
        <view class="detail">
          <view class="avatar">
            <uv-image
              :src="currentUserInfo?.avatar || defaultAvatar"
              width="120rpx"
              height="120rpx"
              shape="circle"
            />
          </view>
          <view class="info">
            <view class="user-name">
              <text>
                {{ currentUserInfo?.realname }}
                ({{ currentUserInfo?.phone || currentUserInfo?.deptName }})
              </text>
            </view>
            <view class="role-name">{{ getRolesName(currentUserInfo?.roles) }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="auth" @click="authFn">
      <view class="auth-l">
        <uv-image src="/static/images/mine/auth.png" width="72rpx" height="72rpx" />
        <view class="text">
          <text class="text-t">认证服务</text>
          <text class="text-b">结算前请完成认证</text>
        </view>
      </view>
      <view class="auth-r">
        <text>去认证</text>
        <uv-icon name="arrow-right" color="#6eb657" size="16" />
      </view>
    </view> -->
    <view class="content">
      <view class="card">
        <view
          class="card-item"
          v-for="item in mineCardList"
          :key="item.icon"
          @click="navigateClick(item)"
        >
          <view class="card-item-l">
            <uv-image :src="item.icon" alt="" width="40rpx" height="40rpx" />
            <view>{{ item.txt }}</view>
          </view>
          <view>
            <uv-icon name="arrow-right" color="#333333" size="20" />
          </view>
        </view>
      </view>
      <view class="common-function">
        <view class="title">常用功能</view>
        <view class="function-list">
          <view
            class="function-item"
            v-for="item in myCommonFunList"
            :key="item.txt"
            @click="navigateClick(item)"
          >
            <uv-image :src="item.icon" alt="" width="56rpx" height="56rpx" />
            <view>{{ item.txt }}</view>
          </view>
        </view>
      </view>
      <view class="login-out" v-if="loginStore.isLogin" @click="loginOutClick"> 退出登录 </view>
    </view>

    <!-- 切换企业 -->
    <uv-popup ref="popupRef" mode="bottom" round="10" bgColor="#fafafa">
      <view class="company-card">
        <view class="title">选择企业 </view>
        <view class="company-item">
          <view
            @click="companyChangeClick(item)"
            class="company-list"
            v-for="item in userInfoList"
            :key="item.userId"
            :class="item.userId === currentUserInfo.userId ? 'active-tab' : ''"
          >
            {{ item.deptName }}
          </view>
          <view class="company-list" @click="hidePopup">取消</view>
        </view>
      </view>
    </uv-popup>

    <!-- 专属客服 -->
    <uv-overlay :show="serviceShow" @click="serviceShow = false">
      <view class="service-mask" @tap.stop>
        <view class="title">长按或扫码添加专属客服</view>
        <view class="qrcode mt40">
          <image
            :showLoading="true"
            :show-menu-by-longpress="true"
            :src="serviceItem?.live_code"
            mode="widthFix"
            width="220rpx"
            height="220rpx"
          />
        </view>
        <view class="down-signin-code mt40">
          <text style="color: #3fa3f1" @click="saveCodeFn(serviceItem)">保存图片</text>
          <uv-icon name="download" color="#2979ff" size="28" />
        </view>
      </view>
    </uv-overlay>
    <Tabbar />
  </view>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/store/login'
import { mineCardList, myCommonFunList } from './cardList'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { RoleEnum } from '@/constants/rolesType'
import { wxSaveCode } from '@/utils/wxSaveCode'
import useLogiutFn from '@/hooks/useLoginout'

const loginStore = useLoginStore()
const defaultAvatar = 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/default_avatar.png'

//* 检测是否登录
function checkLogin() {
  if (!loginStore.isLogin) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 800
    })
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/login/index'
      })
    }, 1200)
  }
  return loginStore.isLogin
}

//* 登录
const toLogin = () => {
  uni.reLaunch({
    url: '/pages/login/index'
  })
}
const popupRef = ref()
popupRef.value?.open()
//* 切换企业
function changeCurrent() {
  popupRef.value.open()
}
const hidePopup = () => popupRef.value.close()

async function companyChangeClick(item: any) {
  popupRef.value.close()
  if (item.userId === currentUserInfo.value.userId) return
  uni.showLoading()
  loginStore.setCurrentUserId(item.userId)
  const sendParams = {
    code: item.userId,
    phone: item.phone
  }
  await loginStore.changeWeiXinLogin(sendParams)
  currentUserInfo.value = loginStore.currentUserInfo
  uni.hideLoading()
}

const currentUserInfo = ref()
const userInfoList = ref<any[]>([])

//* 获取用户信息
onShow(() => {
  uni.hideTabBar()
  const loginStore = useLoginStore()
  if (!loginStore.isLogin) return
  currentUserInfo.value = loginStore.currentUserInfo
  userInfoList.value = loginStore.userInfo
})

const getRolesName = (roles: number[] | null) => {
  if (!roles?.length) return
  return RoleEnum[roles[0]]
}

const navigateClick = (item: any) => {
  if (!checkLogin()) return
  // 专属客服
  if (item.customerService) {
    openService()
  }
  // 路由跳转
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  }
}

const authFn = () => {
  if (!checkLogin()) return
  uni.navigateTo({
    url: `/pages-sub-mine/auth/index`
  })
}

const serviceItem = ref()
const serviceShow = ref(false)
// 专属客服
function openService() {
  const userInfo = loginStore.currentUserInfo
  if (!userInfo?.csm?.corpId) return
  wx.request({
    url: `https://scrm-wx.weiling.cn/marketing/webresource/live_code/mobile?corp_id=${
      userInfo.csm.corpId
    }&code_channel_id=${userInfo.csm.qrCodeId}&third_unique_user_id=${
      userInfo.userId
    }_${new Date().getTime()}`,
    method: 'POST',
    data: {
      公司名称: userInfo.deptName,
      手机号: userInfo.phone,
      客户成功: userInfo.csm.csmName
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success: (res: any) => {
      serviceItem.value = res.data.data
      serviceShow.value = true
    }
  })
}
function saveCodeFn(serviceItem: any) {
  const imgSrc = serviceItem.live_code
  wxSaveCode(imgSrc)
}

//* 退出登录
const loginOutClick = () => {
  uni.showModal({
    title: '提示',
    content: '是否退出登录',
    success: async function (res) {
      if (res.confirm) {
        useLogiutFn()
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.mine {
  min-height: 100vh;
  background: #f9f9f9;
  padding: 30rpx;
  box-sizing: border-box;
  .user-info {
    .not-login {
      display: flex;
      align-items: center;
      .text {
        margin-left: 30rpx;
        color: #666;
        font-size: 36rpx;
      }
    }
    .is-login {
      .company-name {
        text-align: center;
        color: #333333;
        display: flex;
        justify-content: center;
        align-items: center;
        text {
          font-size: 22rpx;
        }
        image {
          width: 24rpx;
          height: 17rpx;
          margin-left: 12rpx;
        }
      }
      .detail {
        margin-top: 40rpx;
        display: flex;
        align-items: center;

        .info {
          margin-left: 36rpx;
          .user-name {
            color: #333;
            font-size: 36rpx;
            font-weight: 600;
            line-height: 50rpx;
          }
          .role-name {
            color: #999;
            font-size: 20rpx;
            font-weight: 400;
            line-height: 28rpx;
          }
        }
      }
    }
  }
  .auth {
    margin-top: 50rpx;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    width: 690rpx;
    height: 120rpx;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .auth-l {
      display: flex;
      align-items: center;
      .text {
        margin-left: 15rpx;
        display: flex;
        flex-direction: column;

        .text-t {
          color: #333;
          font-size: 30rpx;
          font-weight: 700;
          line-height: 42rpx;
        }
        .text-b {
          font-size: 20rpx;
          color: #666;
          font-weight: 400;
          line-height: 28rpx;
        }
      }
    }
    .auth-r {
      display: flex;
      align-items: center;
      text {
        font-size: 26rpx;
        font-weight: 600;
        color: #6eb657;
        margin-right: 6rpx;
      }
    }
  }
  .content {
    margin-top: 30rpx;
    .card {
      width: 690rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      .card-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 48rpx;
        height: 48rpx;
        margin-bottom: 45rpx;

        .card-item-l {
          display: flex;
          align-items: center;
          view {
            margin-left: 30rpx;
            color: #333;
            font-size: 30rpx;
          }
        }
      }
      .card-item:last-child {
        margin-bottom: 0;
      }
    }
    .common-function {
      margin-top: 16rpx;
      border-radius: 16rpx;
      background: #fff;
      padding: 24rpx 30rpx;
      .title {
        color: #333;
        font-weight: 500;
        font-size: 28rpx;
      }
      .function-list {
        margin-top: 36rpx;
        display: flex;
        .function-item {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 36rpx;
          view {
            margin-top: 20rpx;
            color: #333;
            font-size: 24rpx;
            font-weight: 400;
          }
        }
      }
    }
  }

  .login-out {
    margin-top: 30rpx;
    width: 690rpx;
    height: 90rpx;
    background-color: #fff;
    border-radius: 16rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #333;
  }
}
.company-card {
  padding: 30rpx;
  padding-bottom: 0;
  .title {
    text-align: center;
    font-size: 32rpx;
    line-height: 45rpx;
  }
  .company-item {
    margin-top: 25rpx;
    min-height: 15vh;

    .company-list {
      margin-top: 16rpx;
      width: 690rpx;
      background-color: #fff;
      border-radius: 16rpx;
      text-align: center;
      line-height: 96rpx;
      color: #333;
      font-size: 32rpx;
      font-weight: 400;
    }
    .active-tab {
      background-color: rgba(255, 167, 103, 0.1);
      color: #6eb657;
    }
  }
}
.service-mask {
  padding: 40rpx;
  background-color: #fff;
  width: 500rpx;
  margin-top: 50%;
  margin-left: 125rpx;
  text-align: center;
  border-radius: 10rpx;
  .mt40 {
    margin-top: 40rpx;
  }
  .qrcode {
    display: flex;
    justify-content: center;
  }
}
</style>
