<template>
  <view class="container">
    <z-paging ref="pagingRef" class="containerBox" v-model="listData" :default-page-size="queryParams.pageSize" @query="queryList">
      <template #top>
        <view style="padding: 20rpx 32rpx 0;">
          <!-- 项目号/项目描述/物料号/物料描述/供应商编码/供应商名称/订单编号 -->
          <uv-search v-model="queryParams.keyword" placeholder="请输入" :showAction="true" actionText="搜索" @search="searchList" @custom="searchList"></uv-search>
          <uv-tabs :list="list" @click="click" lineColor="#199793"></uv-tabs>
        </view>
      </template>


      <view class="box">
        <view v-for="item in listData" class="item">
          <view class="title">配送号：{{ item.orderNo }}</view>
          <view><text>发货人：</text>{{ item.shipperName }}</view>
          <view><text>发货地：</text>{{ item.originName }}</view>
          <view><text>接收人：</text>{{ item.receiverName }}</view>
          <view style="display: flex; align-items: center;">
            <view><text>目的地：</text>{{ item.destName }}</view>
            <image :src="openMap" mode="scaleToFill" v-show="item.orderStatus == 2" style="width: 30rpx; height: 30rpx;margin-left: 20rpx;" @tap="toMap(item, 'location')" />
          </view>
          <view><text>货物数量：</text>{{ item.items.length }}</view>
          <view><text>配送日期：</text>{{ item.deliveryDate }}</view>
          <view class="statusBtn">
            <!-- <uv-button :plain="true" shape="circle" text="查看详情" @tap="goDetail(item)" style="margin-right: 20rpx;"></uv-button> -->
            <uv-button type="primary" shape="circle" v-show="item.orderStatus == 1" text="开始配送" @tap="changeOrder(item, 'ORIGIN')"></uv-button>
            <uv-button type="primary" shape="circle" v-show="item.orderStatus == 2" text="完成配送" @tap="changeOrder(item, 'DEST')"></uv-button>
            <uv-button type="primary" shape="circle" v-show="item.orderStatus == 3" text="查看单据" style="margin-right: 20rpx;" @tap="changeOrder(item, 'COMPLETE')"></uv-button>
            <!-- <uv-button type="primary" shape="circle" v-show="item.orderStatus == 1" text="开始配送" @tap="change1(item, 'ORIGIN')"></uv-button>
            <uv-button type="primary" shape="circle" v-show="item.orderStatus == 2" text="完成配送" @tap="change1(item, 'DEST')"></uv-button> -->
            <uv-button type="primary" v-show="item.orderStatus == 3" :plain="true" shape="circle" text="历史轨迹" @tap="toMap(item, 'history')"></uv-button>
          </view>
        </view>
      </view>
    </z-paging>

    <view class="btn">
      <uv-button type="primary" text="确定" size="large" style="width: 100%;" class="mainBtn" @tap="handleAdd">新 增 配 送 任 务</uv-button>
    </view>

    <uv-modal ref="modalRef" title="单据明细" class="modalInfo" confirmText="关闭" confirmColor="#606266"
      :closeOnClickOverlay="false">
      <view class="box">
        <view v-for="items in infoList" class="item">
          <view><text>订单编号：</text>{{ items.sapNo }}</view>
          <view><text>项目描述：</text>{{ items.xmMs }}</view>
          <view><text>项目号：</text>{{ items.xmNo }}</view>
          <view><text>物料号：</text>{{ items.wlNo }}</view>
          <view><text>物料描述：</text>{{ items.wlMs }}</view>
          <view><text>供应商名称：</text>{{ items.gysMc }}</view>
          <view><text>存放位置：</text>{{ items.pcode || "-" }}</view>
          <view><text>身份码：</text>{{ items.entityId || "-" }}</view>
          <view><text>备注：</text>{{ items.remark || '-' }}</view>
        </view>
      </view>
    </uv-modal>

  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import { getOrder, getOrderDetail } from "@/api/index"
import openMap from "@/static/openMap.png"



const list = ref([{
  name: '待接单',
  value: '0',
}, {
  name: '待配送',
  value: '1',
}, {
  name: '配送中',
  value: '2',
}, {
  name: '已完成',
  value: '3',
}])
const click = (item) => {
  queryParams.value.orderStatus = item.value
  pagingRef.value.reload()
  console.log('item', item);
}
const queryParams = ref({
  // keyword: "",
  orderStatus: 0,
  pageNum: 1,
  pageSize: 10
})
const pagingRef = ref(null)
const listData = ref([])
// 获取列表
const queryList = (pageNo, pageSize) => {
  queryParams.value.pageNum = pageNo
  console.log(pageNo, pageSize, queryParams.value)
  getOrder(queryParams.value).then(res => {
    console.log(res.rows)
    pagingRef.value.complete(res.rows)
  }).catch(res => {
    pagingRef.value.complete(false)
  })
}
const searchList = () => {
  pagingRef.value.reload()
}

onLoad(() => {
})

onShow(() => {
  pagingRef.value?.reload()
})


// 弹窗
const modalRef = ref()
const infoList = ref([])
const goDetail = (item) => {
  if (item.infoList && item.infoList.length > 0) {
    infoList.value = item.infoList
    modalRef.value.open()
    return
  }
  getOrderDetail({ orderNo: item.orderNo }).then(res => {
    infoList.value = res.data
    item.infoList = res.data
    modalRef.value.open()
  })
}

// 跳转地图
const toMap = (item, type) => {
  if (type === 'location') {
    uni.navigateTo({
      url: "/pages/index/map?orderNo=" + item.orderNo + "&plateNo=" + item.plateNo + "&type=" + type
    })
  } else {
    uni.navigateTo({
      url: "/pages/index/map?orderNo=" + item.orderNo + "&plateNo=" + item.plateNo + "&type=" + type
    })
  }
}



const changeOrder = (item, type) => {
  uni.navigateTo({
    url: "/pages/index/deliveryBill?type=" + type + "&orderNo=" + item.orderNo + "&billNoCk=" + item.billNoCk
  })
}

const change1 = (item, type) => {
  uni.navigateTo({
    url: "/pages/index/editDelivery?type=" + type + "&orderNo=" + item.orderNo + "&billNoCk=" + item.billNoCk
  })
}

const handleAdd = (item) => {
  uni.navigateTo({
    url: "/pages/index/addDelivery"
  })
}


</script>

<style scoped lang="scss">
.container {
  position: relative;
  .containerBox{
    // padding: 32rpx;
    padding-bottom: 120rpx;
    min-height: calc(100vh - 196rpx - 120rpx);

    ::v-deep .uv-tabs__wrapper__nav{
      width: 100%;
    }
    ::v-deep .uv-tabs__wrapper__nav__item{
      flex: 1;
    }
    .dropDown{
      padding: 0 30rpx;
      border-bottom: 1px solid #dadbde;
      .item_dropDown{
        padding: 20rpx;
        display: flex;
        align-items: center;
        ::v-deep .uv-text{
          width: unset !important;
          flex: unset !important;
        }
        ::v-deep .item_text{
          max-width: 200rpx;
          margin-right: 10rpx !important;
        }
      }
    }
    ::v-deep .uv-search {
      flex: unset;
    }
    ::v-deep .zp-scroll-view-super {
      background-color: #F3F4F8;
    }
    .box{
      // background-color: #ebebeb;
      // background-color: #f5f5f5;
      // padding-top: 20rpx;
      background-color: #F3F4F8;
      padding: 0 32rpx;
      box-sizing: border-box;
      padding-top: 20rpx;
      .item {
        background: white;
        padding: 20rpx;
        margin-bottom: 20rpx;
        line-height: 50rpx;
        font-size: 28rpx;
        border-radius: 8rpx;
        color: #333;
        position: relative;
        .title {
          font-size: 32rpx;
          font-weight: bold;
          display: flex;
          align-items: center;
        }
        text{
          color: #666;
        }
        .statusBtn {
          display: flex; 
          justify-content: flex-end;
          border-top: 1px solid #c7c7c7;
          padding-top: 10rpx;
          ::v-deep .uv-button{
            height: 60rpx !important;
          }
        }
      }
    }
    
  }
  ::v-deep .uv-input__content{
    flex-direction: column;
    align-items: flex-start;
  }
  .btn {
    position: fixed;
    width: calc(100vw - 64rpx);
    bottom: 0;
    left: 32rpx;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.modalInfo {
  .box {
    width: 100%;
    max-height: 60vh;
    overflow: auto;
    .item {
      background: #efefef;
      padding: 20rpx;
      margin-top: 20rpx;
      line-height: 50rpx;
      font-size: 28rpx;
      border-radius: 8rpx;
      color: #333;
      border: unset;

    }
  }
}
::v-deep .zp-paging-container-content{
  background-color: #F3F4F8;
}

</style>
