<template>
  <view>
    <view class="filter">
      <view @click="handleSort"
        >创建时间<u-icon :name="state.isUp ? 'arrow-up' : 'arrow-down'"></u-icon
      ></view>
      <view @click="state.isShowStatus = true"
        >状态<u-icon name="arrow-down"></u-icon
      ></view>
      <view style="width: 65%" @click="state.showTime = true">
        <u-input
          v-model="state.startTime"
          disabled
          disabledColor=""
          placeholder="开始时间"
        ></u-input>
        <text>-</text>
        <u-input
          v-model="state.endTime"
          disabled
          disabledColor=""
          placeholder="结束时间"
        ></u-input>
        <u-icon name="arrow-down"></u-icon>
      </view>
    </view>
    <page-view
      @loadList="
        (v) => {
          getList(v);
        }
      "
      :noMoreData="pageList.noMoreData"
      :list="pageList.list"
      :height="204"
      :isLoading="pageList.isLoading"
    >
      <view class="box">
        <scroll-view scroll-x class="scroll-view">
          <uni-table stripe emptyText="">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th v-for="(item, index) in tableTitleList" :key="index"
                >{{ item.name }}
              </uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, index) in pageList.list" :key="index">
              <uni-td v-for="(tItem, index) in tableTitleList" :key="index">
                <view @click="goDetail(item)">
                  <text v-if="tItem.key === 'status'"> 
                    {{ ['已取消', '待登记', '待处理', '待上门', '待打款', '已完结'][item[tItem.key]] }}
                  </text>
                  <text v-else>
                    {{ item[tItem.key] }}
                  </text>
                </view></uni-td
              >
            </uni-tr>
          </uni-table>
        </scroll-view>
      </view>
    </page-view>

    <view class="btn-box-fix-btn">
      <view
        ><u-button type="primary" shape="circle" @click="goInquiry()"
          >去询价</u-button
        >
      </view>
    </view>

    <!-- 状态 -->
    <u-action-sheet
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      :actions="actionSheet.statusList"
      :title="'单据状态'"
      :show="state.isShowStatus"
      @select="handleSelectStatus"
      @close="state.isShowStatus = false"
    ></u-action-sheet>

    <TimeRangeFilter
      :show="state.showTime"
      @handleDialog="(v:boolean) => {state.showTime = v}"
      @handleOk="changeTime"
    />
  </view>
</template>

<script setup lang="ts">
import PageView from "@/components/PageView/index.vue";
import TimeRangeFilter from "@/components/Dialog/TimeRangeFilter.vue";
import { VehicleApi } from "@/services";
import pinia from "@/store";
import { useMemberStore } from "@/store/index";
const state = reactive({
  startTime: "",
  endTime: "",
  showTime: false,
  status: -1,
  isShowStatus: false,
  isUp: false,
});
const pageList: PageResult<any> = reactive({
  total: 0,
  list: [],
  pageNum: 1,
  pageSize: 100,
});
const resetPageList = () => {
  pageList.noMoreData = false;
  pageList.total = 0;
  pageList.list = [];
  pageList.pageNum = 1;
  pageList.pageSize = 100;
};
const tableTitleList = reactive([
  {
    name: "时间",
    key: "createdTime",
  },
  {
    name: "状态",
    key: "status",
  },
  {
    name: "品牌型号",
    key: "brandModel",
  },
  {
    name: "总重量",
    key: "totalWeight",
  },
  {
    name: "预估价格",
    key: "totalPrice",
  },
  {
    name: "过磅重量",
    key: "netWeight",
  },
  {
    name: "实际价格",
    key: "paymentPrice",
  },
]);
const actionSheet = reactive({
  statusList: [
    {
      name: "全部",
      key: -1,
    },
    {
      name: "已取消",
      key: 0,
    },
    {
      name: "待登记",
      key: 1,
    },
    {
      name: "待处理",
      key: 2,
    },
    {
      name: "待上门",
      key: 3,
    },
    {
      name: "待打款",
      key: 4,
    },
    {
      name: "已完结",
      key: 5,
    },
  ],
});

const changeTime = (obj: any) => {
  state.startTime = obj.startTime;
  state.endTime = obj.endTime;
  resetPageList();
  getList();
};

const handleSelectStatus = (v: any) => {
  state.isShowStatus = false;
  state.status = v.key;
  resetPageList();
  getList();
};

const handleSort = () => {
  state.isUp = !state.isUp;
  resetPageList();
  getList();
};

const goInquiry = () => {
  uni.navigateTo({
    url: "/pagesVehicle/inquiry", // 要跳转到的页面路径
  });
};

const getList = (v?: boolean) => {
  if (v) {
    if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
      pageList.pageNum++;
    } else {
      pageList.noMoreData = true;
      return;
    }
  }
  let params: any = {
    pageSize: pageList.pageSize,
    pageNum: pageList.pageNum,
  };
  if (state.status > -1) {
    params.status = state.status;
  }
  if (state.startTime && state.endTime) {
    params.startTime = state.startTime;
    params.endTime = state.endTime;
  }
  if (state.isUp) {
    params.isUp = state.isUp;
  }
  pageList.isLoading = true;
  VehicleApi.getRegisList(params).then((res: any) => {
    if (res.code === 200) {
      pageList.isLoading = false;
      pageList.list = pageList.list = pageList.list.concat(res.data.list);
      pageList.total = res.data.total;
    }
  });
};

function goDetail(item: any) {
  uni.navigateTo({
    url: "/pagesOrder/vehicle/detail?id=" + item.id + `&status=${item.status}`,
  });
}

getList();
</script>
<style lang="scss" scoped>
.filter {
  display: flex;
  justify-content: space-around;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  > view {
    display: flex;
    align-items: center;
  }
  ::v-deep.u-input__content__field-wrapper__field {
    font-size: 14px !important;
  }
}
.box {
  padding: 28rpx 20rpx;
  .scroll-view {
    white-space: nowrap;
    width: 100%;
    overflow: auto;
  }
  ::v-deep.uni-table {
    min-width: 700px !important;
  }
}
.btn-box-fix-btn {
  justify-content: center;
  view {
    width: 70%;
  }
}
.regis {
  font-size: 12px;
  text-align: center;
  padding-top: 15px;
  width: 100% !important;
  color: $u-primary;
  font-weight: bold;
}
</style>
