<script lang="ts" setup>
import { queryWorkOrderDashboardAPI } from '@/api/work'
import { getImageFullPath } from '@/utils'
import { systemInfo } from '@/utils/systemInfo'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const tab_list = ref([
  {
    key: 'monthCountList',
    name: '本月与上月',
    list: [],
    currentKeyName: '本月完成量',
    lastKeyName: '上月完成量',
    currentValueName: 'thisMonthCount',
    lastValueName: 'lastMonthCount',
  },
  {
    key: 'weekCountList',
    name: '本周与上周',
    list: [],
    currentKeyName: '本周完成量',
    lastKeyName: '上周完成量',
    currentValueName: 'thisWeekCount',
    lastValueName: 'lastWeekCount',
  },
  {
    key: 'dayCountList',
    name: '今日与昨日',
    list: [],
    currentKeyName: '今日完成量',
    lastKeyName: '昨日完成量',
    currentValueName: 'todayCount',
    lastValueName: 'yesterdayCount',
  },
])
const tab_current = ref(0)
const tabCustomStyle = computed(() => {
  return {
    height: '90rpx',
    borderRadius: '45rpx',
    padding: '10rpx 8rpx',
  }
})
const tabCustomItemStyle = computed(() => {
  return {
    borderRadius: '45rpx',
    fontSize: '28rpx',
    fontFamily: 'PingFangSC-Regular',
    backgroundColor: '#3B9CFF',
  }
})

function handleBack() {
  uni.navigateBack()
}

function tabChange(index: number) {
  tab_current.value = index
}

function getIcon(orderType: string | number) {
  switch (orderType) {
    case 2:
      return getImageFullPath('KANBAN_HUANDIAN_IMAGE')
    case 3:
      return getImageFullPath('KANBAN_DIAODU_IMAGE')
    case 1:
      return getImageFullPath('KANBAN_XUNJIAN_IMAGE')
    case 4:
      return getImageFullPath('KANBAN_WEIXIU_IMAGE')
  }
}

// 获取工单看板数据
async function queryWorkOrderDashboard() {
  try {
    const res: any = await queryWorkOrderDashboardAPI()
    console.log(res)
    if (res) {
      tab_list.value.forEach((item) => {
        item.list = res[item.key]
      })
    }
  }
  catch (err) {
    console.error(err)
  }
}

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

<template>
  <z-paging
    ref="paging"
    bg-color="#f8f8f9"
  >
    <template #top>
      <view class="custom_navbar" :style="{ height: `${systemInfo.statusBarHeight + 44}px` }">
        <view class="back_bar">
          <uv-icon name="arrow-left" color="white" size="24" @click="handleBack" />
          <text class="text">工单看板</text>
        </view>
      </view>
    </template>

    <view class="container">
      <view class="inner">
        <!-- 单量统计 -->
        <view class="module">
          <view class="tab_box">
            <uv-subsection
              :list="tab_list"
              :current="tab_current"
              :custom-style="tabCustomStyle"
              active-color="#FFFFFF"
              inactive-color="#333333"
              bg-color="#E6EDF5"
              :custom-item-style="tabCustomItemStyle"
              @change="tabChange"
            />
          </view>
          <view class="dashboard">
            <view
              v-for="(item, index) in tab_list[tab_current].list"
              :key="index"
              class="card"
            >
              <view class="header">
                <view class="icon">
                  <uv-image :src="getIcon(item.orderType)" mode="widthFix" width="100%" />
                </view>
                <view class="text">
                  {{ item.orderTypeName || '--' }}
                </view>
              </view>
              <view class="percentage">
                <view
                  class="text"
                  :style="{
                    color: item.changePercentage > 0 ? '#FF1D28' : item.changePercentage < 0 ? '#0AC947' : '#333333',
                  }"
                >
                  {{ Math.abs(item.changePercentage) }}%
                </view>
                <view v-if="item.changePercentage > 0 || item.changePercentage < 0" class="icon">
                  <uv-image :src="item.changePercentage > 0 ? getImageFullPath('KANBAN_SHANGSHENG_IMAGE') : getImageFullPath('KANBAN_XIAJIANG_IMAGE')" mode="widthFix" width="100%" />
                </view>
              </view>
              <view class="row">
                <view class="key">
                  {{ tab_list[tab_current].currentKeyName }}
                </view>
                <view class="value">
                  {{ item[tab_list[tab_current].currentValueName] }}
                </view>
              </view>
              <view class="row">
                <view class="key">
                  {{ tab_list[tab_current].lastKeyName }}
                </view>
                <view class="value">
                  {{ item[tab_list[tab_current].lastValueName] }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
.custom_navbar {
  width: 100%;
  position: relative;
  background-color: #0f74ff;

  .back_bar {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 25rpx;
    left: 30rpx;

    .text {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: white;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
}

.container {
  width: 100%;

  .inner {
    padding: 30rpx 20rpx;
    width: calc(100% - 40rpx);
  }
}

.module {
  width: 100%;
  .tab_box {
    width: 100%;
  }
}
.dashboard {
  margin-top: 21rpx;
  display: grid;
  grid-template-columns: 1fr 1fr; // 自动均分两列
  gap: 24rpx; // 卡片间距
  box-sizing: border-box;

  .card {
    background: #ffffff;
    box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
    border-radius: 28rpx;
    padding: 40rpx 20rpx;

    .header {
      display: flex;
      align-items: center;

      .icon {
        width: 40rpx;
        height: 40rpx;
        overflow: hidden;
      }

      .text {
        margin-left: 15rpx;
        font-family: PingFangSC-Semibold;
        font-size: 28rpx;
        color: #333333;
        font-weight: 600;
      }
    }

    .percentage {
      margin-top: 22rpx;
      display: flex;
      align-items: center;

      .num {
        font-family: Montserrat-Regular;
        font-size: 48rpx;
        font-weight: 400;
      }

      .icon {
        margin-left: 15rpx;
        width: 22rpx;
        height: 30rpx;
        overflow: hidden;
      }
    }

    .row {
      margin-top: 22rpx;
      display: flex;
      align-items: center;

      .key {
        font-family: PingFangSC-Regular;
        font-size: 26rpx;
        color: #999999;
        font-weight: 400;
      }
      .value {
        margin-left: 18rpx;
        font-family: DIN-Bold;
        font-size: 32rpx;
        color: #333333;
        font-weight: 700;
      }
    }
  }
}
</style>
