<template>
  <view class="mine">
    <NavBar :isShowQrCode="true" :isShowBgColor="navbarColor" :isShowLeft="true" :isShowRight="true" :isplaceholder="false" :examineState="IndexData?.examineState" :showDot="[0, '0', null, undefined].includes(messageNumber) ? false : true" />
    <view class="mine-topBg"></view>
    <image src="/static/images/mineTopIcon.png" class="mine-topicon" mode="aspectFill" />
    <view class="mine-infobox flexA" @click="token ? proxy.$h.jumpUrl(`/pages2/mineinfo/info`) : proxy.$h.relaunchUrl('/pages/login/login')">
      <view v-if="![null, '', undefined].includes(UserInfo?.avatar)">
        <image :src="proxy.$h.downFile(UserInfo?.avatar)" class="mine-avatar" mode="aspectFill" @click.stop="proxy.$h.previewImage(proxy.$h.downFile(UserInfo.avatar))" />
      </view>
      <view v-else>
        <image src="/static/images/mAvatar.png" class="mine-avatar" mode="aspectFill" @click.stop="proxy.$h.previewImage('/static/images/mAvatar.png')" />
      </view>
      <view>
        <view class="flexA" style="margin-bottom: 10rpx; flex-wrap: wrap">
          <view class="mine-username">{{ UserInfo?.nickname ?? '去登录' }}</view>
          <view class="mine-toptag flexC" v-if="![null, undefined, ''].includes(UserInfo?.hospitalName)">{{ UserInfo?.hospitalName ?? '去登录' }}</view>
        </view>
        <view class="flexA" style="margin-bottom: 10rpx">
          <view class="flexA" style="font-size: 24rpx; color: #666">
            {{ UserInfo?.introduction || '修改简历、特长等资料' }}
            <image src="/static/images/edit.png" mode="scaleToFill" style="width: 30rpx; height: 30rpx" />
          </view>
        </view>
        <view class="flexW">
          <view class="mine-userTag flexC" v-for="_ in UserInfo?.department">{{ _.name || '空的' }}</view>
        </view>
      </view>
    </view>

    <view class="mine-bottombg">
      <view class="flexA" style="margin-bottom: 38rpx">
        <view class="flexA" style="margin-right: 68rpx">
          <u-icon name="thumb-up" color="#484848" size="22"></u-icon>
          <view class="graytext mine-centertext">用户评价</view>
          <!-- <view class="mine-righttext">{{ UserInfo?.star || 0 }}{{ ![0, '0', '', null, undefined].includes(UserInfo?.star) ? '.0' : '' }}</view> -->
          <view class="mine-righttext">{{ UserInfo?.star || 0 }}</view>
        </view>
        <view class="flexA">
          <u-icon name="clock" color="#484848" size="18"></u-icon>
          <view class="graytext mine-centertext">平均响应</view>
          <view class="mine-righttext">{{ UserInfo?.averageResponseTime || 0 }}分钟</view>
        </view>
      </view>

      <view class="mine-income">
        <image class="bg" src="/static/images/incomeBg.png" mode="aspectFill" />
        <view class="flexJ Zindex">
          <view>
            <view class="flexA" style="margin-bottom: 22rpx">
              <view class="mine-ictitle">我的收入</view>
              <image :src="isShowMoney ? '/static/images/show.png' : '/static/images/hidden.png'" mode="scaleToFill" style="width: 44rpx; height: 44rpx" @click="isShowMoney = !isShowMoney" />
            </view>
            <u-count-to v-if="isShowMoney" :endVal="UserInfo?.income || 0" separator="," duration="1000" color="#fff" fontSize="22" decimals="2" bold></u-count-to>
            <view v-else class="mine-hiddenMoney">*****</view>
          </view>
          <view class="bluetext mine-toincome flexC" @click="proxy.$h.jumpUrl(`/pages2/money/withdrawDeposit`)">去提现</view>
        </view>
      </view>

      <view class="mine-toorder flexA">
        <view v-for="_ in toOrderList" class="box" @click="proxy.$h.jumpUrl(`${_.url}?orderState=${_.orderState}`)">
          <image :src="_.bgurl" mode="aspectFill" />
          <view class="Zindex">
            <view class="title">{{ _.title }}</view>
            <view class="text">{{ _.text }}</view>
          </view>
        </view>
      </view>

      <view style="background: #fff">
        <u-cell-group>
          <template v-for="_ in jumpList">
            <u-cell :title="_.title" :isLink="true" @click="jumpHandler(_)">
              <template #icon>
                <image :src="_.iconUrl" class="mine-icon" mode="aspectFill" />
              </template>
            </u-cell>
          </template>
        </u-cell-group>
      </view>
    </view>

    <view style="height: 300rpx"></view>

    <TurnDown :state="IndexData?.state" :isShowSY="false" :examineState="IndexData?.examineState" />

    <Tabbar :index="2" />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
import Tabbar from '@/components/Tabbar'
import NavBar from '@/components/NavBar'
import TurnDown from '@/components/TurnDown'
import { getMy, getCareer, getDepartment, getIndex, getMsg_count, getCustomerServicePhone } from '@/api'
import type { Result, UserInfoType, IndexListType, IndexType, MineJumpListType, MessageCountType } from '../../types'

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

uni.hideTabBar()

const isShowMoney = ref<boolean>(false)

const navbarColor = ref<boolean>(false)

const messageNumber = ref<number>(0)

const toOrderList = [
  { title: '问诊订单', text: '查看订单', bgurl: '/static/images/mineorbg1.png', url: '/pages2/order/index', orderState: 0 },
  { title: '处方订单', text: '查看订单', bgurl: '/static/images/mineorbg2.png', url: '/pages2/order/index', orderState: 1 }
]

const jumpList: MineJumpListType[] = [
  { title: '续方订单', iconUrl: '/static/images/mineicon0.png', url: `/pages2/order/renew`, requiredAuth: 'err' },
  { title: '收到评论', iconUrl: '/static/images/mineicon1.png', url: `/pages2/message/mineComment`, requiredAuth: 'err' },
  // { title: '问诊记录', iconUrl: '/static/images/mineicon2.png', url: `/pages2/order/record`, requiredAuth: 'err' },
  { title: '问诊记录', iconUrl: '/static/images/mineicon2.png', url: `/pages2/order/index?orderState=0&subOrderState=3&isRecords=success`, requiredAuth: 'err' },
  // { title: '问诊价格', iconUrl: '/static/images/mineicon3.png', requiredAuth: 'err' },
  { title: '邀请分享', iconUrl: '/static/images/mineicon4.png', url: `/pages2/mineinfo/qrcode`, requiredAuth: 'success' },
  { title: '账户设置', iconUrl: '/static/images/accountsetting.png', url: `/pages2/money/account`, requiredAuth: 'err' },
  { title: '联系客服', iconUrl: '/static/images/kefu.png', url: `/pages2/money/account`, requiredAuth: 'err', type: 'showModal' }
]

const UserInfo = ref<UserInfoType>()

const IndexData = ref<IndexType>()

const token = uni.getStorageSync('token').length

const getIndexDataHandler = async () => {
  const { result }: { result: IndexType } = await getIndex()

  uni.setStorageSync('ImUserId', result.myImUserId)

  uni.setStorageSync('im_token', result.myImUserToken)

  uni.$chat_userID = result.myImUserId

  uni.$chat_userSig = result.myImUserToken

  IndexData.value = result
}

const jumpHandler = async (_: MineJumpListType) => {
  if (_.requiredAuth === 'success' && ![20, '20'].includes(IndexData.value?.examineState)) return uni.$u.toast('请先完成认证')

  if (_.type === 'showModal') {
    const { result } = await getCustomerServicePhone()

    return uni.showModal({
      content: result,
      showCancel: true,
      confirmText: '复制',
      success: ({ confirm }) => {
        if (confirm) proxy.$h.copyText(result)
      }
    })
  }

  proxy.$h.jumpUrl(_.url)
}

const getMessageDataHandler = async () => {
  const { result }: { result: MessageCountType } = await getMsg_count()

  messageNumber.value = result.sysCount + result.userCount + result.xufangCount
}

onShow(async () => {
  if (!token) return

  getMessageDataHandler()

  const { result }: { result: UserInfoType } = await getMy()

  const { result: departmentList }: { result: { records: IndexListType[] } } = await getDepartment({ keyword: '' })

  // ![null, undefined, ''].includes(result.career) &&
  //   (result.career = departmentList.records
  //     .flatMap(item => item.list)
  //     .filter(item => result.career.includes(item.id))
  //     .map(item => item.name)
  //     .join())

  ![null, undefined, ''].includes(result.department) && (result.department = departmentList.records.flatMap(item => item.list).filter(item => result.department.includes(item.id)))

  uni.setStorageSync('UserInfo', result)

  UserInfo.value = result

  getIndexDataHandler()
})

onPageScroll(({ scrollTop }) => {
  navbarColor.value = scrollTop > 20 ? true : false
})
</script>

<style lang="scss" scoped>
.mine {
  &-topBg {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 600rpx;
    z-index: -1;
    background: #e7f9f9;
  }
  &-topicon {
    width: 422rpx;
    height: 370rpx;
    position: fixed;
    top: 0;
    z-index: -1;
    right: 24rpx;
  }
  &-infobox {
    box-sizing: border-box;
    padding: 0 32rpx;
    margin-bottom: 58rpx;
  }
  &-avatar {
    min-width: 126rpx;
    width: 126rpx;
    height: 126rpx;
    border-radius: 50%;
    margin-right: 26rpx;
  }
  &-username {
    font-size: 36rpx;
    font-style: normal;
    font-weight: 700;
    margin-right: 12rpx;
  }
  &-toptag {
    color: #05b8d2;
    font-size: 22rpx;
    font-weight: 700;
    box-sizing: border-box;
    padding: 2rpx 10rpx;
    border: 2rpx solid #05b8d2;
    border-radius: 8rpx;
  }
  &-userTag {
    border-radius: 24rpx;
    background: #f4a712;
    font-size: 24rpx;
    font-weight: 700;
    color: #fff;
    box-sizing: border-box;
    padding: 4rpx 14rpx;
    margin-right: 10rpx;
  }
  &-bottombg {
    width: 100%;
    background: linear-gradient(180deg, #fff 0%, #f7f8fa 21.68%);
    box-sizing: border-box;
    padding: 52rpx 24rpx 0;
    border-radius: 40rpx 40rpx 0 0;
  }
  &-centertext {
    font-size: 26rpx;
    margin: 0 6rpx;
  }
  &-righttext {
    font-size: 26rpx;
  }
  &-income {
    width: 100%;
    height: 186rpx;
    position: relative;
    box-sizing: border-box;
    padding: 28rpx 32rpx;
    margin-bottom: 22rpx;
    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
  }
  &-ictitle {
    font-size: 32rpx;
    font-weight: 700;
    color: #fff;
    margin-right: 24rpx;
  }
  &-toincome {
    box-sizing: border-box;
    padding: 12rpx 36rpx;
    background: #fff;
    font-size: 28rpx;
    font-weight: 700;
    border-radius: 40rpx;
  }
  &-toorder {
    margin-bottom: 22rpx;
    .box {
      width: 340rpx;
      height: 158rpx;
      border-radius: 24rpx;
      position: relative;
      box-sizing: border-box;
      padding: 32rpx;
      margin-right: 22rpx;
      image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      }
      .title {
        font-size: 32rpx;
        font-weight: 700;
        margin-bottom: 12rpx;
      }
      .text {
        color: #00000066;
        font-size: 24rpx;
      }
    }
    .box:nth-child(2n) {
      margin-right: 0 !important;
    }
  }
  &-icon {
    width: 32rpx;
    height: 32rpx;
  }
  &-hiddenMoney {
    color: #ffffff;
    font-size: 44rpx;
    font-weight: 700;
  }
}

:deep(.u-cell__body) {
  padding: 32rpx;
}
</style>