<template>
  <u-sticky>
    <u-navbar title="症状详情" :autoBack="true" bgColor="transparent" placeholder safeAreaInsetTop :titleStyle="{ color: '#fff' }" leftIconColor="#fff"></u-navbar>
    <image src="/static/images/symptombg.png" class="topbg" mode="aspectFill" />
  </u-sticky>
  <view class="symptom Zindex11">
    <view class="flexJ" style="margin-bottom: 54rpx">
      <view class="flexA flex1">
        <image
          :src="[null, undefined, ''].includes(detailData?.user?.avatar) ? '/static/images/mAvatar.png' : proxy.$h.downFile(detailData?.user?.avatar)"
          class="symptom-avatar"
          mode="aspectFill"
          @click="proxy.$h.previewImage(proxy.$h.downFile(detailData?.user?.avatar))"
        />
        <view>
          <view class="flexA" style="margin-bottom: 4rpx">
            <view class="symptom-username">{{ detailData?.user?.nickname || '暂无' }}</view>
            <view class="symptom-tag flexC">{{ proxy.$h.optObjectValue('consultationWay', detailData?.consultationWay) || '未设置' }}</view>
          </view>

          <view class="symptom-cla">
            {{ detailData?.petName }} /{{ detailData?.petClass || '品种未知' }}/{{ detailData?.age || '年龄未知' }}/ {{ proxy.$h.optObjectValue('petSex', detailData?.petSex) || '性别未知' }} /
            {{ proxy.$h.optObjectValue('isSterilization', detailData?.isSterilization) || '未知' }}/{{ detailData?.weight ? detailData?.weight + 'kg' : '体重未知' }}
          </view>
          <view class="symptom-graytext">{{ detailData?.time || '' }}</view>
        </view>
      </view>
      <view>
        <view class="symptom-money">¥{{ detailData?.award || 0 }}</view>
        <view class="symptom-graytext">预计收入</view>
      </view>
    </view>

    <view>
      <view class="symptom-infoitem">免疫情况：{{ proxy.$h.optObjectValue('immuneStatus', detailData?.immuneStatus) || '' }}</view>
      <view class="symptom-infoitem">喂养方式：{{ proxy.$h.optObjectValue('feedType', detailData?.feedType) || '' }}</view>
      <view class="symptom-infoitem">洗澡频次：{{ proxy.$h.optObjectValue('batheFrequency', detailData?.batheFrequency) || '' }}</view>
      <view class="symptom-infoitem">
        出现症状：
        <template v-if="![null, '', undefined].includes(detailData?.symptom)">
          <template v-for="(_, index) in detailData?.symptom.split(',')">{{ proxy.$h.optObjectValue('symptom', _) || '' }}{{ index !== (detailData?.symptom.split(',').length as number) - 1 ? '，' : '' }}</template>
        </template>
        <template v-else>暂无症状</template>
      </view>
      <view class="symptom-infoitem">症状时间：{{ proxy.$h.optObjectValue('timeFrame', detailData?.timeFrame) || '' }}</view>
      <view class="symptom-infoitem">症状描述：</view>
    </view>

    <view class="symptom-content">{{ detailData?.supplement || '' }}</view>
    <view class="symptom-infoitem">上传照片</view>
    <view class="flexW">
      <view class="flexW fileImg" v-for="(_, index) in detailData?.image?.split(',')">
        <image :src="proxy.$h.downFile(_)" class="fileimage" mode="aspectFill" @click="proxy.$h.previewImage(proxy.$h.downFile(_))" />
        <!-- <image src="/static/images/close.png" class="close" mode="aspectFill" @click="form.file.splice(index, 1)" /> -->
      </view>
      <!-- <view v-if="form.file.length < 3" class="uploadImg">
        <view class="flexCCol">
          <image src="/static/images/addImg.png" mode="aspectFill" />
          <view>添加图片</view>
        </view>
      </view> -->
    </view>
    <view style="height: 200rpx"></view>
    <view class="fixed-bottom" v-if="[30, '30', 20, '20', 40, '40'].includes(detailData?.orderState)">
      <!-- <view> -->
      <view class="form-btns">
        <!-- <up-button type="info" v-if="[20, '20'].includes(detailData?.orderState)" shape="circle" text="返回" throttleTime="1500" @click="proxy.$h.backUrl()" :customStyle="{ width: '196rpx', marginRight: '16rpx' }"></up-button> -->
        <up-button color="#05B8D2" v-if="[20, '20', 30, '30'].includes(detailData?.orderState)" shape="circle" :text="[20, '20'].includes(detailData?.orderState) ? '接诊' : '回复'" throttleTime="1500" @click="AcceptHandler('err')"></up-button>
        <up-button color="#05B8D2" v-if="[40, '40'].includes(detailData?.orderState)" shape="circle" text="问诊记录" throttleTime="1500" @click="AcceptHandler('success')"></up-button>
      </view>
      <u-safe-bottom></u-safe-bottom>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { storeToRefs } from 'pinia'
import { onLoad, onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
import { getConsultation_information_detail, getReceive_diagnosis } from '../../api'
import { Consultation_information_detailType } from '../../types'
import { useOrderStore } from '@/store/order'
import { imlogin } from '../../hooks/imLogin'

interface EventType {
  id: string
}

const { proxy } = getCurrentInstance() as any

const Event = ref<EventType>()

const detailData = ref<Consultation_information_detailType>()

const form = ref({
  file: [{}, {}]
})

const AcceptHandler = async (flag: string) => {
  uni.setStorageSync('history', flag)

  await getReceive_diagnosis({ id: detailData.value?.id as string })

  uni.setStorageSync('inUserInfo', detailData.value?.user)

  const { imUserId, consultationWay, id } = detailData.value as Consultation_information_detailType

  uni.navigateTo({ url: `/TUIKit/TUIPages/TUIConversation/index?imUserId=${imUserId}&consultationWay=${consultationWay}&orderId=${id}` })
}

const config = {
  userID: 'wx4ce5a98fd6414272'
}

const getDetailHandler = async () => {
  const { result }: { result: Consultation_information_detailType } = await getConsultation_information_detail({ id: Event.value?.id })

  detailData.value = result
}

onUnload(() => {})

onShow(() => {
  setTimeout(() => {
    uni.$TUIKit.getUserStatus({ userIDList: [uni.getStorageSync('ImUserId')] }).catch(err => {
      imlogin()
    })
  }, 800)
})

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

  getDetailHandler()
})
</script>

<style lang="scss" scoped>
.topbg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 586rpx;
  z-index: -1;
}
.symptom {
  border-radius: 24rpx 24rpx 0 0;
  box-sizing: border-box;
  padding: 66rpx 24rpx 0;
  background: #fff;
  margin-top: 36%;
  .fileImg {
    position: relative;
    .fileimage {
      width: 210rpx;
      height: 210rpx;
      border-radius: 24rpx;
      margin-right: 24rpx;
    }
    .fileimage:nth-child(3n) {
      margin-right: 0 !important;
    }
    .close {
      position: absolute;
      top: 12rpx;
      right: 12rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
    }
  }
  .uploadImg {
    box-sizing: border-box;
    padding: 68rpx 60rpx 60rpx;
    border: 1rpx dashed #cbcbcb;
    color: #999999;
    font-size: 22rpx;
    font-weight: 700;
    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 4rpx;
    }
  }
  &-content {
    box-sizing: border-box;
    padding: 26rpx 24rpx 26rpx 64rpx;
    color: #666666;
    font-size: 28rpx;
    font-weight: 700;
    border-radius: 24rpx;
    background: #f4f8fc;
    margin-bottom: 50rpx;
  }
  &-infoitem {
    margin-bottom: 22rpx;
    color: #323233;
    font-weight: 400 !important;
  }
  &-cla {
    color: #666666;
    font-size: 24rpx;
    font-weight: 700;
    margin-bottom: 18rpx;
  }
  &-tag {
    width: fit-content;
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 700;
    box-sizing: border-box;
    padding: 4rpx 14rpx;
    border-radius: 24rpx;
    background: #05b8d2;
    margin: 8rpx 0;
  }
  &-username {
    color: #242424;
    font-size: 36rpx;
    font-weight: 700;
    margin-right: 12rpx;
  }
  &-avatar {
    width: 156rpx;
    height: 156rpx;
    min-width: 156rpx;
    min-height: 156rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }
  &-money {
    color: #f33f2e;
    font-size: 36rpx;
    margin-bottom: 12rpx;
  }
  &-graytext {
    color: #999999;
    font-size: 26rpx;
    font-weight: 700;
  }
}
.Zindex11 {
  position: relative;
  z-index: 999;
}
</style>