<template>
  <view>
    <u-sticky>
      <view style="background-color: #fff">
        <u-subsection
          mode="subsection"
          :list="list"
          :current="current"
          @change="sectionChange"
          activeColor="#7ba746"
          :fontSize="30"
        >
        </u-subsection>
      </view>
      <u-search
        placeholder="请输入客户名称"
        v-model="keyword"
        :showAction="false"
        @search="searchList()"
      ></u-search>
    </u-sticky>
    <view class="list">
      <view class="item" v-for="item in dataList" :key="item.id">
        <view class="line">
          <view class="text-normal">合同编号: {{ item.contractNo }}</view>
        </view>
        <view class="line">
          <view class="text-normal">客户名称: {{ item.customerName }}</view>
        </view>
        <view class="line">
          <view class="text-small"
            >合同约定数量: {{ item.contractVehicleQuantity }}</view
          >
        </view>
        <view class="line">
          <view class="text-small"
            >待备车数量: {{ item.standbyVehicleQuantity }}</view
          >
        </view>
        <view class="line">
          <view class="text-small left"
            >合同签订时间: {{ formatDateTime(item.signingDate) }}</view
          >
          <view class="text-small"
            >约定交车时间: {{ formatDateTime(item.appointedDate) }}</view
          >
        </view>
        <view class="buttons">
          <!-- 仅待运维备车的数据才显示编辑按钮 -->
          <button
            v-if="
              submitButton &&
              item.approvalStatus != 6 &&
              item.standbyVehicleQuantity &&
              item.standbyVehicleQuantity > 0
            "
            @tap="goto"
            :data-url="`/pages/standbyVehicle/detail?id=${item.id}`"
          >
            备车办理
          </button>
          <button
            @tap="goto"
            :data-url="`/pages/standbyVehicle/detail?isRead=1&id=${item.id}`"
          >
            查看
          </button>
        </view>
      </view>

      <view class="no-more" v-if="noMoreData">没有更多数据了</view>
    </view>

    <u-loading-page
      bg-color="#ffffff"
      :loading="loading"
      color="#7ba746"
      font-size="24"
    ></u-loading-page>
  </view>
</template>

<script>
import stora from "@/utils/storage";
import { checkButtonPermission } from "@/utils/permission.js";
export default {
  options: {
    styleIsolation: "shared", // 解除样式隔离
  },
  data() {
    return {
      current: 0,
      list: ["待处理", "全部"],
      queryPage: {
        pageNo: 1, // 页码
        pageSize: 10, //每页查询条数
        total: 0, //总页数
        pages: -1, //总页数
        approvalStatuss: [4], // 审批状态, 4表示待运维备车，
        filterCompleted: true, //增加参数 filterCompleted=true 过滤备车完成的记录
        customerName: "", //客户名称
      },
      dataList: [],
      //   testRecord: {
      //     contractNo: "LNZLHTJX2023051201",
      //     customerName: "中外运物流华东有限公司",
      //     contractVehicleQuantity: 10,
      //     standbyVehicleQuantity: 10,
      //     signingDate: 1728489600000,
      //     appointedDate: 1728489600000,
      //   },
      pageNo: 1,
      noMoreData: false,
      loading: false,
      pageCode: "standbyVehicle",
      keyword: "",
    };
  },
  computed: {
    submitButton: function () {
      return checkButtonPermission("standbyVehicleSubmit", this.pageCode);
    },
  },
  methods: {
    // 新增的搜索方法
    searchList() {
      this.queryPage.customerName = this.keyword.trim(); // 设置车牌号条件
      this.queryPage.pageNo = 1; // 重置页码为1
      this.dataList = []; // 清空数据列表
      this.noMoreData = false; // 重置没有更多数据的标志
      this.loadmore(); // 重新加载数据
    },
    sectionChange(index) {
      this.keyword = ""; // 清空搜索关键字
      this.queryPage.customerName = undefined; // 清空搜索关键字
      this.current = index;
      if (index == 1) {
        // 待业务编辑	1
        // 待审批	2
        // 审批中	3
        // 待运维备车	4
        // 备车完成	5
        // 已撤销	6
        // 部分待业务编辑	7
        // 终止	8
        // 已全部交车	9
        // 全部 （待运维备车 + 备车已完成）
        this.queryPage.approvalStatuss = [4, 5, 1];
        this.queryPage.filterCompleted = false; //增加参数 filterCompleted=true 过滤备车完成的记录
      } else {
        // 仅显示待运维备车
        this.queryPage.approvalStatuss = [4, 1];
        this.queryPage.filterCompleted = true; //增加参数 filterCompleted=true 过滤备车完成的记录
      }

      this.queryPage.pageNo = 1;
      this.dataList = [];
      this.loadmore();
    },
    submitEvent() {
      this.current = 1;
      //提交后删除缓存
      stora.remove("fault_fromData");
    },
    formatDateTime(obj) {
      if (obj == null) {
        return "";
      }
      let date = new Date(obj);
      let y = 1900 + date.getYear();
      let m = "0" + (date.getMonth() + 1);
      let d = "0" + date.getDate();
      return (
        y +
        "-" +
        m.substring(m.length - 2, m.length) +
        "-" +
        d.substring(d.length - 2, d.length)
      );
    },
    loadmore() {
      this.loading = true;
      this.$api.standbyVehicle
        .queryPageList(this.queryPage)
        .then((res) => {
          this.queryPage.pageNo = res.data.current;
          this.queryPage.pages = res.data.pages;
          this.queryPage.total = res.data.total;
          this.dataList.push(...(res.data.records || []));
          this.loading = false;
        })
        .catch((errors) => {
          this.loading = false;
        });
    },
    goto(e) {
      uni.navigateTo({ url: e.target.dataset.url });
    },
  },
  onLoad() {
    // this.loadmore();
  },
  onShow() {
    this.sectionChange(this.current);
  },
  onPullDownRefresh() {
    this.sectionChange(this.current);
    uni.stopPullDownRefresh(); //刷新数据之后停止刷新效果
  },
  destroyed() {
    //页面销毁删除掉数据缓存
    stora.remove("fault_fromData");
  },
  onReachBottom() {
    console.log("触底了");

    //当前页数小于总页数
    if (this.queryPage.pageNo < this.queryPage.pages) {
      this.queryPage.pageNo++;
      this.loadmore();
    } else {
      this.noMoreData = true;
      console.log("没有更多数据了");
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .u-search {
  background: #d7d7d7 !important;
  padding: 20rpx 10rpx !important;
}
.list {
  background: #d7d7d7;
  padding: 0 20px 20rpx;

  .item {
    background: white;
    width: calc(100% - 40rpx);
    padding: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    border-radius: 15rpx;

    .line {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;

      .left {
        margin-right: 50rpx;
        width: 300rpx;
      }

      .text-small {
        font-size: x-small;
      }

      .text-normal {
        font-size: small;
      }
    }

    .buttons {
      position: absolute;
      top: 20rpx;
      right: 20rpx;

      button {
        width: 130rpx;
        height: 50rpx;
        padding: 12rpx 0;
        font-size: 26rpx;
        line-height: 26rpx;
        margin-bottom: 10rpx;
      }
    }
  }

  .no-more {
    width: 100%;
    text-align: center;
    font-size: xx-small;
    color: white;
  }
}
</style>
