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

const dropDownRef = ref()
const months = ref<string[]>([])
const salary = 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 getSalary(month: string) {
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  
  try {
    const res = await getPersonalSalary({ month: month })
    columns.value = res.data.columns
    salary.value = res.data.salary
    return res
  } catch (error) {
    uni.showToast({
      title: `未查到${month}工资条`,
      icon: 'none',
      duration: 2000
    })
    throw error
  } finally {
    uni.hideLoading()
  }
}

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

async function onClickMonth(item: string) {
  try {
    await getSalary(item)
    active.value = item
    dropDownRef.value?.close()
  } catch (error) {
    console.error(error)
  }
}
</script>

<template>
  <view class="page">
    <!-- Month Selector Dropdown -->
    <uv-drop-down 
      ref="dropDownRef"
      sign="salaryDropDown"
      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]"
      :custom-style="{
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderBottom: '1px solid #eee',
        height: '50px',
        lineHeight: '50px',
        fontSize: '16px',
        color: '#333',
        fontWeight: 'bold',
        padding: '0 30rpx'
      }"
    >
      <uv-drop-down-item 
        name="month" 
        type="2"
        :label="active"
        :value="active"
      ></uv-drop-down-item>
    </uv-drop-down>
    
    <uv-drop-down-popup 
      sign="salaryDropDown"
      :click-overlay-on-close="true"
      :currentDropItem="{
        label: '选择月份',
        value: active,
        child: months.map(m => ({label: m, value: m}))
      }"
      @clickItem="onClickMonth"
    ></uv-drop-down-popup>

    <!-- Salary Content -->
    <view class="container">
      <view class="card">
        <uv-cell-group>
          <template v-for="(item, index) in columns" :key="index">
            <uv-cell 
              v-if="item.COLUMN_NAME !== 'ID'"
              :title="item.COMMENTS" 
              :value="salary[item.COLUMN_NAME]"
              :border="index < columns.length - 1"
            />
          </template>
        </uv-cell-group>
      </view>
    </view>
  </view>
</template>

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

:deep(.uv-drop-down) {
  position: sticky;
  z-index: 1;
  top: 0;
}

.container {
  padding: 20rpx;
}

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

// :deep(.uv-cell) {
//   padding: 24rpx 32rpx;
  
//   &__title {
//     font-size: 28rpx;
//     color: #333;
//   }
  
//   &__value {
//     font-size: 28rpx;
//     color: #4773FC;
//     font-weight: bold;
//   }
// }
</style>