<template>
  <u-navbar :autoBack="true" bgColor="transparent" placeholder safeAreaInsetTop :titleStyle="{ color: 'transparent' }" leftIconColor="#fff"></u-navbar>
  <view class="topbg"></view>
  <view class="total Zindex">
    <view class="total-ffftext" style="margin-bottom: 18rpx">总资产(元)</view>
    <view class="flexJ" style="margin-bottom: 50rpx">
      <u-count-to :endVal="Number(dataTotal?.amount) || 0" separator="," duration="2000" color="#fff" fontSize="32" decimals="2" bold></u-count-to>
      <view class="flexA total-ffftext tix">
        <image src="/static/images/moneyicon.png" class="moneyicon" mode="aspectFill" />
        <view @click="proxy.$h.jumpUrl(`/pages2/money/withdrawDeposit`)">去提现</view>
        <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
      </view>
    </view>

    <view class="flexA total-ffftext" style="margin-bottom: 46rpx">
      <view style="margin-right: 20rpx">昨日收入</view>
      <view style="margin-right: 82rpx;padding-top: 2rpx;">{{ dataTotal?.yesIncome.toFixed(2) || '0.00' }}</view>
      <view style="margin-right: 20rpx">累积收入</view>
      <view style="padding-top: 2rpx;">{{ dataTotal?.income.toFixed(2) || '0.00' }}</view>
    </view>

    <view class="total-numCard">
      <view class="flexJ" style="margin-bottom: 46rpx">
        <view class="title">我的接诊量</view>
      </view>
      <up-row customStyle="margin-bottom: 10px" gutter="10">
        <up-col span="6">
          <view class="flexCCol card">
            <u-count-to :endVal="Number(dataTotal?.receiveNum) || 0" duration="1000" color="#323233" fontSize="22" bold></u-count-to>
            <view class="graytext">累积接诊量</view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="flexCCol card">
            <u-count-to :endVal="Number(dataTotal?.yesReceiveNum) || 0" duration="1000" color="#323233" fontSize="22" bold></u-count-to>
            <view class="graytext">昨日接诊量</view>
          </view>
        </up-col>
      </up-row>
    </view>
    <view class="total-numCard">
      <view class="flexJ" style="margin-bottom: 46rpx">
        <view class="title flexA">
          <view style="margin-right: 6rpx">我的评价</view>
        </view>
        <view class="flexA">
          <view style="margin-right: 6rpx; color: #ffc525">{{ dataTotal?.star || 0 }}分</view>
          <u-rate :count="5" v-model="value" allowHalf activeColor="#ffc525" readonly></u-rate>
        </view>
      </view>
      <up-row customStyle="margin-bottom: 10px" gutter="10">
        <up-col span="6">
          <view class="flexA" style="margin-bottom: 44rpx">
            <image src="/static/images/totalhao.png" class="totalhao" mode="aspectFill" />
            <view>
              <u-count-to :endVal="Number(dataTotal?.good) || 0" duration="1000" color="#323233" fontSize="22" bold></u-count-to>
              <view class="graytext">好评</view>
            </view>
          </view>
          <view class="flexA" style="margin-bottom: 44rpx">
            <image src="/static/images/badic.png" style="transform: rotateX(0)" class="totalhao" mode="aspectFill" />
            <view>
              <view class="graytext">差评</view>
              <u-count-to :endVal="Number(dataTotal?.bad) || 0" duration="1000" color="#323233" fontSize="22" bold></u-count-to>
            </view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="charts-box">
            <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
          </view>
        </up-col>
      </up-row>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { getIndex } from '../../api'
import { IndexType } from '../../types'
const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const value = ref(0)

const chartData = ref({})

const dataTotal = ref<IndexType>()

const opts = ref({
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: undefined,
  title: { name: '64.2%', fontSize: 20, color: '#323233' },
  subtitle: { name: '占比', fontSize: 13, color: '#666666' },
  extra: {
    arcbar: { type: 'circle', width: 12, backgroundColor: '#f3f3f3', startAngle: 1.5, endAngle: 0.25, gap: 2 }
  }
})

const getServerData = async () => {
  let res = {
    series: [{ name: '占比', color: '#64b7f6', data: 0.642 }]
  }

  const { result }: { result: IndexType } = await getIndex()

  value.value = result?.star

  dataTotal.value = result

  if (result.goodPercent.indexOf('%') === -1) {
    res.series[0].data = Number(result.goodPercent)

    opts.value.title.name = (+result.goodPercent * 100).toFixed(2) + '%'
  } else {
    res.series[0].data = Number(result.goodPercent.split('%')[0])

    opts.value.title.name = result.goodPercent
  }

  chartData.value = JSON.parse(JSON.stringify(res))
}

onLoad(() => {
  getServerData()
})
</script>

<style>
page {
  background: #f7f8fa !important;
}
</style>

<style lang="scss" scoped>
.charts-box {
  width: 238rpx;
  height: 238rpx;
}
.topbg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 526rpx;
  background: linear-gradient(117deg, #66acff 5%, #05b8d2 94.19%);
}
.total {
  box-sizing: border-box;
  padding: 15rpx 32rpx;
  .totalhao {
    width: 96rpx;
    height: 96rpx;
    margin-right: 20rpx;
  }
  &-ffftext {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 700;
  }
  &-numCard {
    border-radius: 24rpx;
    box-sizing: border-box;
    background: #fff;
    padding: 28rpx 28rpx 50rpx;
    font-size: 26rpx;
    margin-bottom: 26rpx;
    .title {
      color: #323233;
      font-size: 36rpx;
      font-weight: 700;
    }
    .card {
      width: 100%;
      box-sizing: border-box;
      padding: 34rpx 0 30rpx;
      background: #f9f9f9;
    }
    .numtext {
      color: #323233;
      font-size: 44rpx;
      font-weight: 700;
      margin-bottom: 8rpx;
    }
  }
  .tix {
    box-sizing: border-box;
    padding: 18rpx 8rpx 18rpx 26rpx;
    border-radius: 40rpx 0 0 40rpx;
    background: linear-gradient(90deg, #37d2ed 39.09%, #37d2ed42 100%);
    margin-right: -32rpx;
  }
  .moneyicon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
  }
  .fffbox {
  }
}
</style>