<template>
  <u-navbar :title="Event?.title" :autoBack="true" bgColor="#fff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }" leftIconColor="#000"></u-navbar>
  <view class="audit">
    <!-- 中 -->
    <template v-if="Event?.authState === '10'">
      <view class="main1">
        <view class="flexC">
          <view class="flexA" style="margin-bottom: 52rpx">
            <image src="/static/images/auditwarring.png" class="audit-icon" mode="aspectFill" />
            <view class="audit-title">审核中</view>
          </view>
        </view>
        <!-- <view class="subtitle flexC" style="margin-bottom: 244rpx">提现申请已提交。请耐心等待审核通过！</view> -->
        <view class="subtitle flexC" style="margin-bottom: 244rpx">认证申请已提交。请耐心等待审核通过！</view>
        <view class="fixBox">
        <up-button color="#05B8D2" shape="circle" text="修改信息" :customStyle="{ marginBottom: '24rpx' }" throttleTime="1500" @click="reapplyAuthHandler"></up-button>
        <up-button type="info" shape="circle" text="返回" throttleTime="1500" @click="proxy.$h.relaunchUrl(`/pages/index/index`)"></up-button>
      </view>
      </view>
    </template>
    <!-- 失败 -->
    <template v-if="Event?.authState === '30'">
      <view class="main1">
        <view class="flexC">
          <view class="flexA" style="margin-bottom: 52rpx">
            <image src="/static/images/auditerror.png" class="audit-icon" mode="aspectFill" />
            <view class="audit-title">审核失败</view>
          </view>
        </view>
        <view class="subtitle flexC" style="color: #ff3b2f; margin-bottom: 55%">驳回原因：{{ Event?.examineStateFailReason || '请联系管理员' }}</view>
        <view class="fixBox">
        <up-button color="#05B8D2" shape="circle" text="重新申请" :customStyle="{ marginBottom: '24rpx' }" throttleTime="1500" @click="reapplyAuthHandler"></up-button>
        <up-button type="info" shape="circle" text="返回" throttleTime="1500" @click="proxy.$h.relaunchUrl(`/pages/index/index`)"></up-button>
      </view>
      </view>
    </template>
    <!-- 成功 -->
    <template v-if="Event?.authState === '20'">
      <view class="main">
        <view class="bgimg" style="margin-bottom: 70rpx">
          <image src="/static/images/auditbg.png" class="autbgimg" mode="aspectFill" />
          <image :src="![null, '', undefined].includes(UserInfo?.avatar) ? proxy.$h.downFile(UserInfo?.avatar) : '/static/images/mAvatar.png'" class="avatar" mode="aspectFill" />

          <view class="infomain Zindex">
            <view class="infomain-title">您已完成认证</view>
            <view style="margin-bottom: 10rpx">
              {{ UserInfo?.nickname }}
              <!-- <text>{{ UserInfo?.doctorUserType ? `- ${UserInfo?.doctorUserType}` : '' }}</text> -->
            </view>
            <view class="flexX intrbox" style="margin-bottom: 42rpx">
              <view>
                {{ UserInfo?.hospitalName }} &nbsp;
                <text v-for="_ in UserInfo?.department">{{ _.name || '空的' }}&nbsp;</text>
              </view>
            </view>
            <view class="flexJA">
              <view @click="proxy.$h.jumpUrl(`/pages2/auth/step?type=detail`)">查看详情</view>
              <view @click="showIsEditAuthState = true">修改信息</view>
            </view>
          </view>
        </view>

        <view class="state flexA">
          <image src="/static/images/auditsuccess.png" style="width: 48rpx; height: 48rpx; margin-right: 18rpx" mode="aspectFill" />
          <view>审核通过</view>
        </view>
      </view>
    </template>
  </view>
  <!-- proxy.$h.jumpUrl(`/pages2/auth/step?type=edit`) -->
  <u-modal :show="showIsEditAuthState" :title="`提示`">
    <view class="flexCCol grayAuthText">
      <view>修改认证信息将重新提交审核，</view>
      <view>是否修改？</view>
    </view>
    <template #confirmButton>
      <view class="flexJ">
        <up-button type="info" plain shape="circle" text="暂不修改" throttleTime="1000" :customStyle="{ width: '248rpx', height: '92rpx', color: '#000', border: '2rpx solid #e5e5e5' }" @click="showIsEditAuthState = false"></up-button>
        <up-button color="#05B8D2" shape="circle" text="修改信息" throttleTime="1000" :customStyle="{ width: '248rpx', height: '92rpx' }" @click="proxy.$h.jumpUrl(`/pages2/auth/step?type=edit&reapply=success`, () => (showIsEditAuthState = false))"></up-button>
      </view>
    </template>
  </u-modal>
  <!-- auditwarring.png  auditerror.png auditsuccess.png auditbg.png -->
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getMy, getDepartment } from '../../api'
import type { UserInfoType, IndexListType } from '../../types'
const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

interface EventType {
  title: string
  authState: string
  examineStateFailReason?: string
}

const Event = ref<EventType>()

const UserInfo = ref<UserInfoType>()

const showIsEditAuthState = ref<boolean>(false)

onLoad((e: EventType) => {
  Event.value = e
})

const getUserInfoHandler = async () => {
  const { result }: { result: UserInfoType } = await getMy()

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

  result.doctorUserType = result.doctorUserType
    ?.split(',')
    .map(_ => proxy.$h.optData('doctorUserType')[_])
    .join(' ')

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

  UserInfo.value = result
}

onShow(() => Event.value?.authState === '20' && getUserInfoHandler())

const reapplyAuthHandler = () => {
  proxy.$h.jumpUrl(`/pages2/auth/step?reapply=success&type=edit`)
}
</script>

<style lang="scss" scoped>
.audit {
  .main {
    box-sizing: border-box;
    padding: 120rpx 20rpx;
    .state {
      margin: 0 auto;
      box-sizing: border-box;
      padding: 30rpx 40rpx;
      width: 652rpx;
      border-radius: 94rpx;
      background: #fff;
      box-shadow: 0 12rpx 40rpx 0 #0f4ce04d;
      color: #323233;
      font-size: 32rpx;
      font-weight: 700;
    }

    .bgimg {
      width: 100%;
      height: 424rpx;
      position: relative;
      .infomain {
        box-sizing: border-box;
        padding: 108rpx 80rpx 40rpx;
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 700;
        &-title {
          font-size: 40rpx;
          margin-bottom: 12rpx;
        }
      }
      .autbgimg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
      }
      .avatar {
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translate(-50%);
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
      }
    }
  }
  .main1 {
    box-sizing: border-box;
    padding: 66rpx 84rpx 0;
  }
  .subtitle {
    color: #666666;
    font-size: 28rpx;
  }
  &-icon {
    width: 66rpx;
    height: 66rpx;
    margin-right: 32rpx;
  }
  &-title {
    color: #323233;
    font-size: 48rpx;
    font-weight: 700;
  }
}
.intrbox {
  height: 60rpx;
  overflow: auto;
}
.grayAuthText {
  color: #666666;
  font-size: 28rpx;
}
.fixBox{
  position: fixed;
  bottom: 20%;
  left: 84rpx;
  right: 84rpx;
}
</style>