<template>
  <view class="content">
    <!-- 顶部筛选菜单 -->
    <view class="uni-flex ai-center screen-box menu-list">
      <view
        class="menu"
        v-for="(item, index) in menuList"
        :key="index"
        @click="handleClick(item)"
      >
        <view
          class="menu-image round"
          style="height: 75rpx; width: 75rpx; padding: 18rpx"
          :style="
            activeType == item.id
              ? 'background:#f0f7fe;'
              : 'background:#f6f7f8;'
          "
        >
          <image
            :src="activeType == item.id ? item.active : item.src"
            mode="aspectFit"
            style="height: 100%"
          >
          </image>
        </view>
        <view
          class="menuName"
          :style="activeType == item.id ? 'color:#5B96E9' : 'color:#808D97'"
          >{{ item.name }}
        </view>
      </view>
    </view>
    <scroll-view
      scroll-y
      class="billList"
      v-if="pageList && pageList.length > 0"
      @scrolltolower="handleScrolltolower"
    >
      <!-- <list-unit
        v-for="(item, index) in pageList"
        :key="index"
        :item="item"
        :i="index"
        @goDetail="goDetail"
      ></list-unit> -->
      <view
        class="card"
        v-for="(item, index) in pageList"
        :key="index"
        @click="handleGoDetail(item)"
      >
        <!-- 卡片第一行数据 -->
        <view class="firstTitleBox">
          <!-- 左侧 -->
          <p class="contentName">{{ item.BusinessProcess_Name || "-" }}</p>
        </view>
        <!-- 卡片第一行角标 -->
        <view class="content-index">{{ index + 1 }}</view>
        <!-- 卡片第二行数据 -->
        <view class="secondTitleBox">
          <!-- 服务区名称 -->
          <p class="content-type-text">{{ item.Serverpart_Name || "-" }}</p>
        </view>
        <!-- 卡片第三行数据  -->
        <view
          class="thirdTitleBox"
          :style="{ color: item.BillState === 1 ? '' : 'red' }"
        >
          {{ item.BillState === 1 ? "已提单" : "未提单" }}
        </view>
        <!-- 第四行数据 -->
        <view class="fourthTitleBox">
          <view
            class="leftContent"
            :style="{ color: item.PaymentTerms === 1 ? 'red' : '' }"
          >
            {{
              item.PaymentTerms === 1
                ? "收款"
                : item.PaymentTerms === 0
                ? "退款"
                : "-"
            }}
          </view>
          <view class="rightContent">
            {{
              item.BusinessProcess_StartDate
                ? $moment(item.BusinessProcess_StartDate).format("YYYY/MM/DD")
                : ""
            }}
          </view>
        </view>
      </view>
      <!-- 底部提示 -->
      <view class="load-more" v-if="pageList.length > 0">
        <text>{{
          !pageMsg.isOver ? "正在加载,请稍后..." : "——— 我是有底线的 ———"
        }}</text>
      </view>
    </scroll-view>
    <!-- 无数据时的页面显示 -->
    <view v-else>
      <noFound
        :nodata="pageList && pageList.length > 0 ? false : true"
        :text="'暂无数据'"
      >
        <!-- <text name="other">请选择其它日期进行查询。</text> -->
      </noFound>
    </view>

    <uni-popup
      :show="showPop"
      @hidePopup="closePop"
      type="bottom"
      @touchmove.prevent
      round="true"
    >
      <view class="pop">
        <p class="title">服务区名称</p>
        <picker
          class="title-clock"
          mode="selector"
          @change="pickerChange"
          :value="pickerIndex"
          range-key="label"
          :range="severpartList"
        >
          <view class="box-center-title">{{
            severpartList[pickerIndex].label
          }}</view>
        </picker>
        <p class="title" style="margin-top: 20px">日期</p>
        <view class="selectTime">
          <picker
            class="time"
            mode="date"
            @change="handlechangeTime($event, 0)"
          >
            <text>{{ "请选择开始时间" }}</text>
          </picker>
          -
          <picker
            class="time"
            style="text-align: right"
            mode="date"
            @change="handlechangeTime($event, 1)"
          >
            <text>{{ "请选择结束时间" }}</text>
          </picker>
        </view>
        <view class="popbtn" @click="reloadList">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageMsg: {
        pageSize: 10,
        pageIndex: 1,
        isOver: false,
      }, // 列表查询条件
      searchText: "", // 业务名称搜索
      BillState: "", // 提单状态 1 已提单  0 未提单
      pageList: [], // 数据值
      activeType: 0, // 选择的提单
      menuList: [
        {
          name: "全部",
          src: "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifq.png",
          active:
            "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yifqz.png",
          id: 0,
        },
        {
          name: "已提单",
          src: "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenp.png",
          active:
            "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/shenpz.png",
          id: 1,
        },
        {
          name: "未提单",
          src: "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichl.png",
          active:
            "https://eshangtech.com/ShopICO/ahyd-BID/expense/type/yichlz.png",
          id: 2,
        },
      ],
      isFirst: true, // 是第一次
    };
  },
  onLoad() {
    //   请求列表数据
    this.handleGetList();
  },
  onShow() {
    if (!this.isFirst) {
      this.handleGetList();
    }
    if (this.isFirst) {
      this.isFirst = false;
    }
  },
  methods: {
    // 下拉到底部 触发的事件
    handleScrolltolower() {
      this.pageMsg.pageIndex = this.pageMsg.pageIndex + 1;
      this.handleGetList();
    },
    //   请求列表数据
    async handleGetList() {
      const req = {
        SearchParameter: {
          BillState: this.BillState,
          BusinessProcess_State: 9000,
          Operation_Type: 11,
          PendState: 3,
        },
        keyWord: this.searchText
          ? { key: "BusinessProcess_Name", Value: this.searchText }
          : "",
        PageIndex: this.pageMsg.pageIndex,
        PageSize: this.pageMsg.pageSize,
      };
      uni.showLoading({
        title: "加载中...",
      });
      const data = await this.$request.$webPost(
        "EShangApiMain/Finance/GetMonthAccountProinst",
        req
      );
      console.log("list", data);
      let list = data.Result_Data.List;
      let oldList = [];
      if (this.pageList && this.pageList.length > 0) {
        oldList = this.pageList;
      }
      if (list && list.length > 0) {
        list.forEach((item) => {
          item.BusinessProcess_Name = item.BusinessProcess_Name.split("】")[1];
        });

        if (list.length < 10) {
          this.pageMsg.isOver = true;
        }
      }
      this.pageList = oldList.concat(list);
      uni.hideLoading();
    },
    // 跳转去详情
    handleGoDetail(obj) {
      this.$util.toNextRoute(
        "navigateTo",
        `/pages/billOfLading/detail?id=${obj.BusinessApproval_ID}`
      );
    },
    // 修改顶部的tab
    handleClick(obj) {
      this.activeType = obj.id;
      this.BillState =
        obj.id === 0 ? "" : obj.id === 1 ? 1 : obj.id === 2 ? "0" : "";
      this.pageList = [];
      this.pageMsg = {
        pageSize: 10,
        pageIndex: 1,
        isOver: false,
      };
      this.handleGetList();
    },
  },
};
</script>

<style scoped lang="scss">
.menu-list {
  //顶部菜单样式
  width: 100%;
  background-color: #fff;
  flex-wrap: wrap;
}
.menu {
  text-align: center;
  //   min-width: 185rpx;
  width: calc(100% / 3);
  padding: 24rpx 0;
  box-sizing: border-box;
}

.round {
  border-radius: 50%;
}

.menuName {
  color: #120e2b;
  font-size: 24rpx;
  text-align: center;
  margin-top: 16rpx;
}

.menu-image {
  padding: 12rpx 8rpx;
  height: 80rpx;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: center;
}

.menu-image image {
  max-width: 100%;
  max-height: 100%;
}

.screen-box {
  background-color: #fff;
  padding: 0 0rpx;
  position: sticky;
  top: 0;
  z-index: 1;
}
.pop {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  text-align: left;
}
.pop .title {
  font-size: 14px;
  font-weight: 600;
}
.pop .title-clock {
  display: inline-block;
}
.pop .selectTime {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pop .selectTime .time {
  width: 45%;
}
.pop .popbtn {
  width: 639rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #fff;
  font-size: 28rpx;
  background: #5b96e9;
  border-radius: 8rpx;
  margin: 48rpx auto 24rpx auto;
  text-align: center;
}

.billList {
  width: 100%;
  height: calc(100vh - 100px);
  box-sizing: border-box;
  padding: 20rpx 24rpx;
  .card {
    width: 100%;
    box-shadow: 0 0px 6rpx #e2e2e2;
    box-sizing: border-box;
    padding: 24rpx;
    background: #fff;
    position: relative;
    margin-bottom: 24rpx;
    .firstTitleBox {
      width: 100%;
      .contentName {
        width: calc(100% - 48rpx);
        font-size: 28rpx;
        // height: 54rpx;
        margin-left: 36rpx;
        color: #333333;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 设置显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .secondTitleBox {
      .content-type-text {
        color: #686868;
        padding-left: 38rpx;
        font-size: 22rpx;
        line-height: 1.6;
        max-width: 306rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
    .thirdTitleBox {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 12rpx;
      font-size: 18px;
      line-height: 50px;
      margin: 0 4px;
      border-bottom: 2rpx solid #eee;
    }

    .fourthTitleBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24rpx;
      .leftContent {
        color: #686868;
        font-size: 24rpx;
      }
      .rightContent {
        color: #686868;
        font-size: 24rpx;
      }
    }
    .content-index {
      width: 42rpx;
      height: 32rpx;
      color: #fff;
      background-color: #fb8b56;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: -4rpx;
      top: 30rpx;
      box-shadow: 4rpx 4rpx 2rpx 0 rgba(238, 112, 27, 0.5);
    }
  }
}
</style>