<template>
  <!-- 领料出库 -->
  <view class="page-container">
    <view class="complete-btn">
      <view class="btn" @click="changeTab(1)">
        <span>未完成</span>
        <div v-if="active == 1" class="bt-line"></div>
      </view>
      <view class="btn" style="margin-left: 80rpx" @click="changeTab(2)">
        <span>已完成</span>
        <div v-if="active == 2" class="bt-line"></div>
      </view>
    </view>
    <uni-row :gutter="24" class="search-form">
      <uni-col :span="12">
        <view>
          <uni-datetime-picker v-model="queryParams.startTime" type="date" placeholder="开始日期" />
        </view>
      </uni-col>
      -
      <uni-col :span="12">
        <view>
          <uni-datetime-picker v-model="queryParams.endTime" type="date" placeholder="结束日期" />
        </view>
      </uni-col>
    </uni-row>
    <uni-row :gutter="24" class="search-form">
      <uni-col :span="18">
        <view>
          <uni-easyinput placeholder="请输入内容" v-model="queryParams.keyWord" />
        </view>
      </uni-col>
      <uni-col :span="6">
        <view class="search" @click="getTableList(false, true)">搜索</view>
      </uni-col>
    </uni-row>

    <scroll-view scroll-y @scrolltolower="onScrollTolower" class="scroll-container">
      <view
        class="table-list-item"
        :key="index"
        v-for="(item, index) in tableList"
        @click="onReview(item)"
      >
        <uni-swipe-action class="swipe-action">
          <uni-swipe-action-item>
            <div class="title">
              <span class="code">{{ item.code }}</span>
              <span class="cont">
                <uni-tag
                  :text="
                    item.status == 2
                      ? '已完成'
                      : item.status == 3
                      ? '已驳回'
                      : item.status == 1
                      ? '审核中'
                      : '待审核'
                  "
                  :type="
                    item.status == 2
                      ? 'success'
                      : item.status == 3
                      ? 'error'
                      : item.status == 1
                      ? 'primary'
                      : 'warning'
                  "
                  :custom-style="item.status == 4 ? successStyle : ''"
                />
              </span>
            </div>
            <div class="line"></div>
            <uni-row :gutter="24">
              <uni-col :span="7">申请时间：</uni-col>
              <uni-col :span="17">
                <div class="cont">{{ item.createTime }}</div>
              </uni-col>
            </uni-row>
            <uni-row :gutter="24">
              <uni-col :span="7">申请人：</uni-col>
              <uni-col :span="17">
                <div class="cont">{{ item.createBy }}</div>
              </uni-col>
            </uni-row>

            <uni-row :gutter="24">
              <uni-col :span="7">转出工程：</uni-col>
              <uni-col :span="17">
                <div class="cont">{{ item.backProName }}</div>
              </uni-col>
            </uni-row>
            <uni-row :gutter="24">
              <uni-col :span="7">转出单位：</uni-col>
              <uni-col :span="17">
                <div class="cont">{{ item.backTeamName }}</div>
              </uni-col>
            </uni-row>

            <uni-row :gutter="24">
              <uni-col :span="7">转入工程：</uni-col>
              <uni-col :span="17">
                <div class="cont">{{ item.leaseProName }}</div>
              </uni-col>
            </uni-row>

            <uni-row :gutter="24">
              <uni-col :span="7">转入单位：</uni-col>
              <uni-col :span="17">
                <div class="cont">{{ item.leaseTeamName }}</div>
              </uni-col>
            </uni-row>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <view class="loading-text">
        {{ finish ? '没有更多数据了~' : '正在加载...' }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getDirectListApi } from '@/services/materialsStation.js'
import { onShow } from '@dcloudio/uni-app'
import { debounce } from 'lodash-es'

const total = ref(0) //                 数据总量
const active = ref(1) //                tap索引
const tableList = ref([]) //            列表数据源
const dateArray = ref([
  new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
  new Date().toISOString().split('T')[0],
]) //            日期范围
// 查询参数
const queryParams = ref({
  startTime: dateArray.value[0] || '', //                   开始时间
  endTime: dateArray.value[1] || '', //                     结束时间
  keyWord: '', //                     关键字
  statusList: [0, 1], //                 状态
  pageNum: 1,
  pageSize: 3,
})
const userId = ref('') // 用户id

// 审核/查看
const onReview = (item) => {
  let type = 2
  if ((item.status == 1 || item.status == 0) && item.directUserIds.includes(userId.value)) {
    // 是当前审核人时，进行审核
    type = 1
  } else {
    //只进行查看
    type = 2
  }
  uni.navigateTo({
    url: `/pages/businessAudit/siteDirectAudit/details?params=${JSON.stringify({
      ...item,
      taskId: item.id,
      type,
    })}`,
  })
}

// 获取列表数据
const getTableList = async (isTap = false, isSearch = false) => {
  try {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    })
    if (isSearch) {
      // 当进行搜索时，重置页码和列表数据
      queryParams.value.pageNum = 1
      tableList.value = []
    }
    console.log('queryParams.value查询参数', queryParams.value)
    const res = await getDirectListApi(queryParams.value)
    console.log('res列表数据', res)
    total.value = res.data.total
    tableList.value = res.data.rows
  } catch (error) {
    console.log('🚀 ~ getTableList ~ error:', error)
  } finally {
    uni.hideLoading()
  }
}

onShow(() => {
  queryParams.value.pageNum = 1
  tableList.value = []
  total.value = 0
  userId.value = String(uni.getStorageSync('id'))
  console.log('userId', userId.value)
  getTableList()
})

// 滚动触底事件
const onScrollTolower = debounce(() => {
  console.log('触底事件')
  if (total.value > tableList.value.length) {
    queryParams.value.pageSize += 5
    getTableList()
  }
}, 500)

// tap 栏切换
const changeTab = (index) => {
  active.value = index
  console.log('index', index)
  if (index == 2) {
    queryParams.value.statusList = [2, 3] // 查已完成的
    queryParams.value.pageNum = 1
    getTableList(true)
  } else if (index == 1) {
    queryParams.value.statusList = [0, 1] // 查未完成的
    queryParams.value.pageNum = 1
    getTableList(true)
  }
}

// 判断数据是否加载完毕
const finish = computed(() => {
  if (total.value === tableList.value.length) return true
})

// 已完成状态的自定义样式
const successStyle = {
  color: '#52c41a',
  backgroundColor: 'rgba(82, 196, 26, 0.1)',
  border: '2rpx solid rgba(82, 196, 26, 0.2)',
  fontWeight: '600',
}
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background-color: #f7f8fa;
  padding: 24rpx;

  // Tab切换按钮
  .complete-btn {
    display: flex;
    /* padding: 20rpx 24rpx; */
    justify-content: center;
    /* background: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); */

    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 60rpx;
      position: relative;
      transition: all 0.3s ease;

      span {
        font-size: 32rpx;
        color: #8c8c8c;
        font-weight: 500;

        &.active {
          color: #3784fb;
          font-weight: 600;

          .second-active & {
            color: #fa8c16;
          }
        }
      }

      .bt-line {
        width: 32rpx;
        height: 6rpx;
        background: #3784fb;
        margin-top: 12rpx;
        border-radius: 6rpx;
        transition: all 0.3s ease;

        .second-active & {
          background: #fa8c16;
        }
      }
    }
  }

  // 搜索表单
  .search-form {
    display: flex;
    align-items: center;
    padding: 10rpx;
    /* background: #fff;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); */

    :deep(.uni-date) {
      width: 100%;

      .uni-date-x {
        width: 100%;
      }

      .uni-date-editor--x {
        width: 100%;
      }

      .uni-date-range--x {
        width: 100%;

        .uni-date-range--x-input {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 24rpx;

          .uni-date-range--x-text {
            font-size: 28rpx;
            color: #262626;
          }
        }
      }

      .uni-date-x--border {
        width: 100%;
        border: 2rpx solid #e8e8e8;
        border-radius: 12rpx;
        background-color: #f7f8fa;
        height: 80rpx;
        transition: all 0.3s ease;

        &:focus-within {
          border-color: #3784fb;
          box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
        }
      }
    }

    .search {
      width: 100%;
      height: 60rpx;
      background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
      text-align: center;
      line-height: 60rpx;
      color: #fff;
      border-radius: 12rpx;
      font-size: 28rpx;
      font-weight: 600;
      box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
      transition: all 0.3s ease;

      &:active {
        transform: translateY(2rpx);
        opacity: 0.9;
      }
    }
  }

  // 列表项
  .table-list-item {
    margin: 24rpx 0;
    padding: 32rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.985);
      background-color: #fafbfc;
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .code {
        font-size: 32rpx;
        font-weight: 600;
        color: #007aff;
        letter-spacing: 1rpx;
        background: linear-gradient(90deg, #007aff, #4b8eff);
        -webkit-background-clip: text;
        color: transparent;
      }

      .cont {
        :deep(.uni-tag) {
          padding: 6rpx 20rpx;
          border-radius: 8rpx;
          font-size: 26rpx;
          font-weight: 600;
          border: none;
          transition: all 0.3s ease;

          &[type='warning'] {
            background-color: rgba(250, 140, 22, 0.1);
            color: #fa8c16;
            border: 2rpx solid rgba(250, 140, 22, 0.2);
          }

          &[type='success'] {
            // 样式将通过 custom-style 控制
          }

          &:active {
            opacity: 0.8;
            transform: scale(0.98);
          }
        }
      }
    }

    .line {
      margin: 24rpx 0;
      height: 2rpx;
      background: linear-gradient(
        90deg,
        rgba(232, 232, 232, 0) 0%,
        rgba(232, 232, 232, 1) 50%,
        rgba(232, 232, 232, 0) 100%
      );
    }

    :deep(.uni-row) {
      /* margin-bottom: 20rpx; */

      .uni-col-7 {
        color: #8c8c8c;
        font-size: 28rpx;
        font-weight: 500;
      }

      .cont {
        display: flex;
        justify-content: flex-end;
        line-height: 1.8;
        color: #262626;
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    // 左滑操作按钮
    :deep(.uni-swipe_action) {
      border-radius: 20rpx;
      overflow: hidden;

      .uni-swipe_content {
        margin: 0 !important;
        padding: 0;
        background-color: #fff;
      }

      .uni-swipe_button-group {
        height: 100%;

        .uni-swipe_button {
          height: 100%;
          padding: 0 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;

          &:nth-child(1) {
            background: linear-gradient(to bottom, #3ad980, #34c759);
          }

          &:nth-child(2) {
            background: linear-gradient(to bottom, #3b95ff, #007aff);
          }
        }
      }
    }
  }

  .scroll-container {
    padding: 0 2rpx;

    .table-list-item {
      margin: 24rpx 0;
      padding: 32rpx;
      background-color: #fff;
      min-height: 300rpx;
      border-radius: 20rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.985);
        background-color: #fafbfc;
      }

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .title-left {
          .code {
            font-size: 32rpx;
            font-weight: 600;
            color: #3784fb;
            letter-spacing: 1rpx;
          }
        }

        span.status {
          padding: 8rpx 28rpx;
          border-radius: 8rpx;
          font-size: 26rpx;
          font-weight: 600;

          &.completed {
            background-color: rgba(82, 196, 26, 0.1);
            color: #52c41a;
          }

          &.pending {
            background-color: rgba(250, 140, 22, 0.1);
            color: #fa8c16;
          }
        }
      }

      .line {
        margin: 24rpx 0;
        height: 2rpx;
        background: linear-gradient(
          90deg,
          rgba(232, 232, 232, 0) 0%,
          rgba(232, 232, 232, 1) 50%,
          rgba(232, 232, 232, 0) 100%
        );
      }

      :deep(.uni-row) {
        /* margin-bottom: 20rpx; */

        .uni-col-6 {
          color: #8c8c8c;
          font-size: 28rpx;
          font-weight: 500;
        }
      }

      .cont {
        display: flex;
        justify-content: flex-end;
        line-height: 1.8;
        color: #262626;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
  }

  // 加载提示文字
  .loading-text {
    text-align: center;
    font-size: 26rpx;
    color: #8c8c8c;
    padding: 32rpx 0;
    letter-spacing: 1rpx;
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 26rpx;
  color: #8c8c8c;
  padding: 32rpx 0;
  letter-spacing: 1rpx;
}

// 优化滑动区域样式
:deep(.uni-swipe_action) {
  border-radius: 20rpx;
  overflow: hidden;

  .uni-swipe_content {
    margin: 0 !important;
    padding: 0;
    background-color: #fff;
  }

  .uni-swipe_button-group {
    height: 100%;

    .uni-swipe_button {
      writing-mode: vertical-rl;
      padding: 0 24rpx;
      font-size: 28rpx !important;
      font-weight: 600;

      // 查看按钮
      &:nth-child(1) {
        background: linear-gradient(to bottom, #3ad980, #34c759) !important;
      }

      // 出库按钮
      &:nth-child(2) {
        background: linear-gradient(to bottom, #3b95ff, #007aff) !important;
      }

      &:active {
        opacity: 0.85;
      }
    }
  }
}
</style>
