<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPersonalKpi } from '@/api/user.js'
import { parseTime } from '@/common/utils/ruoyi'

const dropDown = ref()
const collapseRef = ref()
const activeCollapse = ref<string[]>([])
const months = ref<string[]>([])
const kpi = ref({})
const columns = ref<any>([])
const today = new Date()

// Generate last 6 months
for (let i = 6; i >= 0; i--) {
  months.value.push(parseTime(today.setMonth(today.getMonth() - 1), '{y}-{m}'))
}
const active = ref<string>(months.value[0])

async function getKpi(month: string) {
  uni.showLoading({ title: '加载中...', mask: true })
  
  try {
    const res = await getPersonalKpi({ month: month })
    columns.value = res.data.columns
    kpi.value = res.data.kpi
    
    nextTick(() => {
      // Expand all collapse items
      activeCollapse.value = columns.value
        .filter(item => item.CHILDREN)
        .map(item => item.COLUMN_NAME)
    })
    
    return res
  } catch (error) {
    uni.showToast({
      title: `未查到${month}绩效`,
      icon: 'none',
      duration: 2000
    })
    throw error
  } finally {
    uni.hideLoading()
  }
}

onLoad(async () => {
  await getKpi(active.value)
})

function selectMenu(e: any) {
  const { name, active: isActive } = e
  // if (isActive) {
  //   dropDown.value?.close()
  // }
}

function clickItem(e: any) {
  const { value } = e
  active.value = value
  getKpi(value)
  // dropDown.value?.close()
}
</script>

<template>
  <view class="page">
    <!-- Month Selector Dropdown -->
    <uv-drop-down 
      :custom-style="{
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderBottom: '1px solid #eee',
        height: '50px',
        lineHeight: '50px',
        fontSize: '16px',
        color: '#333',
        fontWeight: 'bold',
        padding: '0 30rpx'
      }"
      ref="dropDown"
      sign="dropDown_1"
      text-active-color="#4773FC"
      :extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
      :extra-active-icon="{name:'arrow-up-fill',color:'#4773FC',size:'26rpx'}"
      :defaultValue="[active]"
      @click="selectMenu"
    >
      <uv-drop-down-item 
        name="month" 
        type="2"
        :label="active"
        :value="active"
      ></uv-drop-down-item>
    </uv-drop-down>
    
    <uv-drop-down-popup 
      sign="dropDown_1"
      :click-overlay-on-close="true"
      :currentDropItem="{
        label: '选择月份',
        value: active,
        child: months.map(m => ({label: m, value: m}))
      }"
      @clickItem="clickItem"
    ></uv-drop-down-popup>

    <!-- KPI Content -->
    <view class="container">
      <view class="card">
        <uv-collapse v-model="activeCollapse" accordion>
          <template v-for="(item, index) in columns" :key="index">
            <template v-if="item.COLUMN_NAME !== 'ID'">
              <template v-if="item.CHILDREN">
                <uv-collapse-item :title="item.COMMENTS" :name="item.COLUMN_NAME">
                  <view class="child-item" v-for="(child, indexChild) in item.CHILDREN" :key="`child${indexChild}`">
                    <view class="child-title">{{ child.COMMENTS }}</view>
                    <view class="child-value">{{ kpi[child.COLUMN_NAME] }}</view>
                  </view>
                </uv-collapse-item>
              </template>
              <view v-else class="single-item">
                <view class="item-title">{{ item.COMMENTS }}</view>
                <view class="item-value">{{ kpi[item.COLUMN_NAME] }}</view>
              </view>
            </template>
          </template>
        </uv-collapse>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  padding-bottom: 20rpx;
}

.container {
  padding: 20rpx;
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.child-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .child-title {
    color: #666;
  }
  
  .child-value {
    font-weight: bold;
  }
}

.single-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  
  .item-title {
    font-weight: bold;
  }
  
  .item-value {
    color: #4773FC;
    font-weight: bold;
  }
}
:deep(.uv-dp__container__list){
  display: flex;
  flex-wrap: wrap;
}

</style>