<template>
  <view>
    <CuNavbar title="业绩数据" isBack></CuNavbar>
    <view class="bg-primary bg-opacity-80 p-base">
      <DateTime v-model="currentDate" @confirm="dateConfirm" />
      <view class="flex items-center py-base text-white">
        <view class="flex-1 text-center">
          <view class="text-32rpx">当前业绩</view>
          <view class="mt-10rpx">{{ countData.actual_performance }}</view>
        </view>
        <view>/</view>
        <view class="flex-1 text-center">
          <view class="text-32rpx">目标业绩</view>
          <view class="mt-10rpx">{{ countData.expected_performance }}</view>
        </view>
      </view>
    </view>
    <uv-sticky bgColor="#fff" zIndex="20">
      <view class="">
        <uv-tabs
          :activeStyle="{ color: '#ee2c37' }"
          :lineColor="'#ee2c37'"
          :scrollable="false"
          :list="tabList"
          :current="currentTab"
          @change="tabChange"
        ></uv-tabs>
      </view>
    </uv-sticky>
    <view class="">
      <view v-for="(ob, i) in showList" :key="i">
        <uv-sticky bgColor="#f5f5f5" zIndex="10" offsetTop="44">
          <view class="h-80rpx flex items-center px-base">
            <TitleComp :title="i"></TitleComp>
          </view>
        </uv-sticky>
        <view class="card">
          <view v-for="(item, i) in ob" :key="i">
            <view class="flex items-center h-84rpx">
              <view class="w-110rpx text-primary"
                >{{ timeFormat(`${item.month}-01`, 'mm') }}月</view
              >
              <view class="flex-1"
                >{{ item.actual_performance }}/{{
                  item.expected_performance
                }}</view
              >
              <view
                :style="{
                  color: statusFun(item.status, 'shore_task_status', 'color'),
                }"
                >{{ statusFun(item.status, 'shore_task_status', 'name') }}</view
              >
            </view>
            <uv-line v-if="i !== ob.length - 1" color="#f5f5f5"></uv-line>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import TitleComp from '@/components/title-comp/index'
import DateTime from '@/components/date-time/index'
import { http } from '@/utils/request'
import { onLoad } from '@dcloudio/uni-app'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
import { ref, reactive, computed } from 'vue'
import statusFun from '@/utils/status'
const list = ref([])
const tabList = [
  { name: '业绩目标', value: 'future' },
  { name: '完成业绩', value: 'history' },
]
const currentTab = ref(0)
const historyDate = uni.getStorageSync('historyDate')
const currentDate = ref(historyDate || Number(new Date()))
const countData = reactive({
  actual_performance: 0,
  expected_performance: 0,
})
const currentTabObj = computed(() => tabList[currentTab.value])
const showList = computed(() => encapsulateDataByMonth(list.value))

onLoad(() => {
  getCount()
  getList()
})

const dateConfirm = (e) => {
  uni.setStorageSync('historyDate', e.value)
  currentDate.value = e.value
  getCount()
}

const getCount = async () => {
  const resData = await http.get('/account/store-performance', {
    params: {
      month: timeFormat(currentDate.value, 'yyyy-mm'),
    },
  })
  Object.assign(countData, resData)
}

const tabChange = (e) => {
  currentTab.value = e.index
  getList()
}

const getList = async () => {
  const resData = await http.get('/account/store-performance-tasks', {
    params: {
      filter: currentTabObj.value.value,
    },
  })
  list.value = resData
}

function encapsulateDataByMonth(data) {
  return data.reduce((groupedData, item) => {

    const year = timeFormat(new Date(item.month), 'yyyy')

    groupedData[year] = groupedData[year] || []
    groupedData[year].push(item)
    return groupedData
  }, {})
}
</script>
