<template>
  <view class="table">
    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th align="center" width="50">序号</uni-th>
        <uni-th align="center">上级服务类型</uni-th>
        <uni-th align="center" width="50">占比（%）</uni-th>
        <uni-th align="center">任务类型</uni-th>
        <uni-th align="center" width="50">积分值</uni-th>
        <uni-th align="center" width="50">任务个数</uni-th>
        <uni-th align="center" width="80">任务积分值</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(item, index) in tableData" :key="item?.taskTypeId" index>
        <uni-td>{{ index + 1 }}</uni-td>
        <uni-td>{{ showInfo(item, index) }}</uni-td>
        <uni-td>
          <text
            :class="{
              error: item.score != 0 && (item.percentage < 25 || item.percentage > 50)
            }"
            >{{ showPercentage(item, index) }}</text
          >
        </uni-td>
        <uni-td>{{ item.taskTypeName }}</uni-td>
        <uni-td>{{ item.score }}</uni-td>
        <uni-td>
          <input type="number" @blur="(e) => change(e, index, item)" v-model="item.qty" />
        </uni-td>
        <uni-td>{{ item.subtotal }}</uni-td>
      </uni-tr>
      <!-- 结尾 -->
      <uni-tr>
        <uni-td>总计</uni-td>
        <uni-td>---</uni-td>
        <uni-td>---</uni-td>
        <uni-td>---</uni-td>
        <uni-td>---</uni-td>
        <uni-td>{{ totalQty }}</uni-td>
        <uni-td>{{ totalsubtotal }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup lang="ts">
import { getPlanDetailsApi } from '@/service/modules/objectivesList'
import { ref } from 'vue'

const porops = defineProps({
  planScore: Number
})

const tableData = ref<any[]>([])
const totalQty = ref(0)
const totalsubtotal = ref(0)
const getDetail = async (id: string) => {
  const res = await getPlanDetailsApi(id)
  tableData.value = res.data.items
  totalQty.value = res.data.qty
  totalsubtotal.value = res.data.total

  let arr = tableData.value.map((item) => item.baseId)
  arr = [...new Set(arr)]
  for (let currBaseId of arr) {
    const allSubtotal = tableData.value.reduce((accumulator, currentValue) => {
      if (currentValue.baseId === currBaseId) {
        return accumulator + currentValue.subtotal
      }
      return accumulator
    }, 0)
    const percentage = calculatePercentage(allSubtotal, porops.planScore)
    tableData.value.forEach((item) => {
      if (item.baseId === currBaseId) {
        item.percentage = percentage
      }
    })
  }

  return res
}

const calculatePercentage = (part, total) => {
  if (total === 0) return 0 // 避免除以0错误
  return Number(((part / total) * 100).toFixed(2))
}

const showInfo = (item: any, index: number) => {
  if (index === 0) {
    return item.baseId
  }
  if (tableData.value[index - 1].baseId === item.baseId) {
    return ''
  } else {
    return item.baseId
  }
}
const showPercentage = (item: any, index: number) => {
  if (index === 0) {
    return item.percentage
  }
  if (tableData.value[index - 1].baseId === item.baseId) {
    return ''
  } else {
    return item.percentage
  }
}

defineExpose({ getDetail })
</script>

<style lang="scss" scoped>
.table {
  width: 700rpx;
  min-height: 300rpx;
  background-color: #fff;
  border-radius: 12rpx;
}
.error {
  color: #f78989;
}
</style>
