<template>
  <view class="todo-page" :style="backgroundStyle">
    <!-- 顶部渐变背景 -->
    <view :style="topGradientStyle"></view>
    <view class="todo-page-content">
      <wd-navbar title="待办事项" :bordered="false" safeAreaInsetTop
        custom-style="background-color: transparent !important;"></wd-navbar>
      <view class="top-content mt-20 cardbox flex-row align-center justify-evenly">
        <view class="top-content-item">
          <view class="num">99+</view>
          <view class="txt1">今日待处理</view>
        </view>
        <view class="top-content-item">
          <view class="num">3</view>
          <view class="txt2">未处理</view>
        </view>
        <view class="top-content-item">
          <view class="num">5</view>
          <view class="txt3">异常</view>
        </view>
        <view class="top-content-item">
          <view class="num">1</view>
          <view class="txt4">丢件</view>
        </view>
      </view>
      <!-- 切换 -->
      <view class="tab-section">
        <tab-navigation @tabChange="handleTabChange" :switchList="switchList" :activeTab="activeTab"
          start-color="#FFA800" end-color="rgba(4,120,244,0)" />
      </view>
      <!-- 搜索区域 -->
      <view class="search-input flex-row">
        <view class="flex-row input-content align-center">
          <wd-picker class="picker" :columns="columns" v-model="state" @confirm="handleConfirm">
            <view class="picker-cotent flex-row align-center">{{state}}
              <wd-icon name="caret-down-small" size="22px"></wd-icon>
            </view>
          </wd-picker>
          <input v-model="searchValue" placeholder="请输入" />
        </view>
        <wd-button class="search-btn">查询</wd-button>
      </view>
      <!-- 列表 -->
      <view class="carditem cardbox">
        <view class="carditem-top flex-row align-center">
          <view class="time">2025-08-17 17:06:12</view>
          <view class="status1">今日待处理</view>
        </view>
        <view class="carditem-info flex-row align-center">
          <view class="title">
            二手劳斯莱斯
          </view>
          <view class="label">海保服务</view>
        </view>
        <view class="carditem-bottom flex-row justify-between align-center">
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">出口商</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">USA</view>
            <view class="val">所在国</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">进口商</view>
          </view>
        </view>
      </view>
      <view class="carditem cardbox">
        <view class="carditem-top flex-row align-center">
          <view class="time">2025-08-17 17:06:12</view>
          <view class="status2">待提货</view>
        </view>
        <view class="carditem-info flex-row align-center">
          <view class="title">
            二手劳斯莱斯
          </view>
          <view class="label">海保服务</view>
        </view>
        <view class="carditem-bottom flex-row justify-between align-center">
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">出口商</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">USA</view>
            <view class="val">所在国</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">进口商</view>
          </view>
        </view>
      </view>
      <view class="carditem cardbox">
        <view class="carditem-top flex-row align-center">
          <view class="time">2025-08-17 17:06:12</view>
          <view class="status3">待清关</view>
        </view>
        <view class="carditem-info flex-row align-center">
          <view class="title">
            二手劳斯莱斯
          </view>
          <view class="label">海保服务</view>
        </view>
        <view class="carditem-bottom flex-row justify-between align-center">
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">出口商</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">USA</view>
            <view class="val">所在国</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">进口商</view>
          </view>
        </view>
      </view>
      <view class="carditem cardbox">
        <view class="carditem-top flex-row align-center">
          <view class="time">2025-08-17 17:06:12</view>
          <view class="status5">历史待处理</view>
        </view>
        <view class="carditem-info flex-row align-center">
          <view class="title">
            二手劳斯莱斯
          </view>
          <view class="label">海保服务</view>
        </view>
        <view class="carditem-bottom flex-row justify-between align-center">
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">出口商</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">USA</view>
            <view class="val">所在国</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">进口商</view>
          </view>
        </view>
      </view>
      <view class="carditem cardbox">
        <view class="carditem-top flex-row align-center">
          <view class="time">2025-08-17 17:06:12</view>
          <view class="status6">丢件</view>
          <view class="status7">异常</view>
          <view class="status4">待处理</view>
        </view>
        <view class="carditem-info flex-row align-center">
          <view class="title">
            二手劳斯莱斯
          </view>
          <view class="label">海保服务</view>
        </view>
        <view class="carditem-bottom flex-row justify-between align-center">
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">出口商</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">USA</view>
            <view class="val">所在国</view>
          </view>
          <view class="carditem-bottom-item">
            <view class="label">Joicom Corp</view>
            <view class="val">进口商</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useTodoPage } from '@/composables/useTodoPage'
  import TabNavigation from '../home/components/tab-navigation.vue'
  const switchList = ref([{
    name: '全部',
    keys: '1',
    route: '1'
  }, {
    name: '海报服务',
    keys: '1',
    route: '1'
  }, {
    name: '商机',
    keys: '1',
    route: '1'
  }, {
    name: '关务',
    keys: '1',
    route: '1'
  }, {
    name: '商城',
    keys: '1',
    route: '1'
  }, {
    name: '竞拍',
    keys: '1',
    route: '1'
  }, {
    name: '海运',
    keys: '1',
    route: '1'
  }]);
  const columns = ref(['状态', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
  const state = ref('状态')
  const searchValue = ref('');
  const handleConfirm = ({ value: string }) => {
    console.log(value)
    state.value = value
  }
  const {
    backgroundStyle,
    topGradientStyle,
    isRefreshing,
    isLoading,
    hasMore,
    currentPage,
    bannerList,
    noticeBarList,
    categoryList,
    hotRecommendList,
    menuList,
    // switchList,
    systemInfo,
    noticeInfo,
    hbsmNotice,
    blackInfo,
    activeTab,
    activeTabKey,
    tabContentList,
    tabLoading,
    tabCurrentPage,
    tabHasMore,
    initPage,
    onRefresh,
    onLoadMore,
    resetState,
    switchTab,
    loadTabContent
  } = useTodoPage()
  // 处理 tab 变化
  const handleTabChange = ({ index, tab } : { index : number; tab : any }) => {
    console.log('Tab changed:', index, tab.name)

    // 根据静态的tab标题映射到对应的key
    const tabKeyMap : { [key : string] : string } = {
      '推荐': 'goods',
      '商机': 'opportunity',
      '找买家': 'buy',
      '找卖家': 'sell',
      '保税生活': 'life'
    }

    const tabKey = tabKeyMap[tab.name] || 'goods'
    switchTab(index, tabKey)
  }
</script>

<style lang="scss" scoped>
  .todo-page {
    position: relative;
    min-height: 100vh;

    // 底部状态栏一般建议预留60rpx-100rpx，具体根据实际底部栏高度调整
    padding-bottom: 60rpx;

    .todo-page-content {
      padding: 0 32rpx;
      position: sticky;
      top: 0;
      z-index: 100;
      width: 100vw;
      box-sizing: border-box;
    }
  }

  .cardbox {
    background: #FFFFFF;
    box-shadow: 0rpx 6rpx 34rpx 1rpx rgba(194, 148, 56, 0.1);
    border-radius: 24rpx;
  }

  .top-content {
    padding: 50rpx 0;

    .top-content-item {
      text-align: center;
      position: relative;
      padding: 0 39rpx;

      // flex:1;
      &:not(:last-child) {
        &::after {
          display: block;
          position: absolute;
          right: 0;
          top: 10%;
          content: '';
          width: 1px;
          height: 80%;
          background: #EFF0F2;
        }
      }


      .num {
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 40rpx;
        color: #333333;
      }

      [class^='txt'] {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 28rpx;
        margin-top: 10rpx;
      }

      .txt1 {
        color: #F45E04;
      }

      .txt2 {
        color: #666666;
      }

      .txt3 {
        color: #FF0B0B;
      }

      .txt4 {
        color: #057D51;
      }
    }
  }

  .tab-section {
    margin: 40rpx 0;
  }

  .search-input {
    .input-content {
      background-color: white;
      border-radius: 30rpx;
      height: 60rpx;
      margin-right: 16rpx;
      overflow: hidden;
      flex: 1;

      ::v-deep(.picker) {
        height: 60rpx;

        .picker-cotent {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          padding-left: 30rpx;
        }

        .wd-cell__wrapper {
          // padding: 0 !important;
          // padding-right: 20rpx !important;
        }
      }

      input {
        flex: 1;
        height: 50rpx;
        border-left: 1px solid #f1f1f1;
        padding: 0 20rpx;
      }
    }

    ::v-deep(.search-btn) {
      button {
        width: 130rpx !important;
        min-width: 130rpx !important;
        height: 60rpx !important;
        background: #0478F4;
        border-radius: 30rpx;
      }
    }
  }

  .carditem {
    padding: 30rpx;
    margin-top: 20rpx;

    .carditem-top {
      gap: 10rpx;

      .time {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        flex: 1;
      }

      [class^='status'] {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 24rpx;
        border-radius: 20rpx;
        padding: 5rpx 20rpx;
      }

      $status-map: (
        1: #F45E04,
        2: #FF0000,
        3:#3F8E0B,
        4:#3A43EF,
        5:#666666
      );


    @each $status,
    $color in $status-map {
      .status#{$status} {
        color: $color;
        border: 1px solid $color;
      }
    }

    $goodstatus-map: (
      6: #0478F4,
      7: #FF0B0B
    );

  @each $status,
  $color in $goodstatus-map {
    .status#{$status} {
      color: white;
      background: $color ;
      border: 1px solid $color;
    }
  }

  }

  .carditem-info {
    gap: 5rpx;

    .title {
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333
    }

    .label {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 20rpx;
      color: #999999;
      line-height: 30rpx;
      height: 30rpx;
      padding: 0rpx 10rpx;
      background: #E7E7E7;
      border-radius: 8rpx;
    }
  }

  .carditem-bottom {
    background: #F8F8F8;
    border-radius: 12rpx;
    padding: 25rpx;
    margin-top: 25rpx;

    .carditem-bottom-item {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;

      .label {
        color: #333333;
      }

      .val {
        color: #666666;
      }
    }

  }
  }
</style>
