<template>
  <div class="order">
    <div class="fliter">
      <div class="tabs">
        <div
          :class="
            currentTab === item.value ? 'tabs_item tab_active' : 'tabs_item'
          "
          v-for="(item, idx) in tabList"
          :key="idx"
          @click="handleTab(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <!-- <text @click="handleGoEvaluateDetail">评价详情</text> -->
    <scroll-view
      v-if="orderList && orderList.length > 0"
      class="srcollView"
      scroll-y="true"
      refresher-enabled="true"
      @refresherrefresh="handleRefresherrefresh"
      :refresher-triggered="triggered"
    >
      <div
        @click="goEvaluate(item)"
        v-for="(item, idx) in orderList"
        :key="idx"
      >
        <OrderItem :obj="item" />
      </div>
    </scroll-view>

    <noData v-else :text="'您没有评价记录'" :isShow="orderList.length" />
  </div>
</template>

<script>
import noData from "@/components/noData.vue";
import OrderItem from "./components/orderItem.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isShowLoading: true,
      pageMsg: {
        isLoading: false,
        pageSize: 10,
        pageIndex: 1,
      },
      orderList: [],
      tabIndex: "",
      tabList: [
        {
          label: "全部评价",
          value: 1,
        },
        {
          label: "待评价",
          value: 2,
        },
        {
          label: "已评价",
          value: 3,
        },
      ],
      currentTab: 1,
      queryStatus: ["4000,5000", "4000", "5000"],
      pageType: "", // 页面类型
      triggered: false,
    };
  },
  components: {
    noData,
    OrderItem,
  },
  computed: {
    ...mapGetters(["user", "refresh"]),
  },
  onLoad(query) {
    this.pageMsg.pageIndex = 1;
    if (query.type) {
      this.currentTab = Number(query.type);
    }
    if (query.pageType) {
      this.pageType = query.pageType;
    }
    console.log("this.pageType", this.pageType);
    this.getorderList();
  },
  methods: {
    async handleRefresherrefresh() {
      this.triggered = true;
      await this.getorderList();
      this.triggered = false;
    },
    handleTab(item) {
      console.log("item", item);
      this.currentTab = item;
      this.getorderList();
    },
    // 拿到待评价列表
    async getorderList() {
      uni.showLoading({
        title: "正在加载...",
        mask: true,
      });
      const req = {
        action_type: "GetMallOrderList",
        salebillType: this.pageType === "UnionMall" ? 3001 : 3000,
        salebillState: 3000,
        PageIndex: this.pageMsg.pageIndex,
        pageSize: this.pageMsg.pageSize,
        ownerUnitId: 911,
        requestType: "application/x-www-form-urlencoded",
      };
      const data = await this.$api.postCoop(req);
      let res = [];
      if (data.Data && data.Data.List && data.Data.List.length > 0) {
        let list = data.Data.List;
        if (this.currentTab === 1) {
          res = list;
        } else {
          list.forEach((item) => {
            if (this.currentTab === 2 && item.COMMENT_STATE === 0) {
              res.push(item);
            } else if (this.currentTab === 3 && item.COMMENT_STATE === 1) {
              res.push(item);
            }
          });
        }
      }
      console.log("getorderList", res);
      this.orderList = res;
      uni.hideLoading();
    },
    // 跳转去评价详情页面
    handleGoEvaluateDetail() {
      uni.navigateTo({
        // ?id=${obj.SERVERPART_ID}
        url: `/pages/evaluateList/addEvaluate`,
      });
    },
    goEvaluate(obj) {
      console.log("obj", obj);
      uni.navigateTo({
        url:
          "/pages/evaluateList/addEvaluate?sellchildid=" +
          obj.SALEBILL_CHILD_ID +
          "&orderInternal=" +
          obj.SALEBILL_ID +
          "&orderStatus=" +
          obj.SALEBILL_STATE +
          "&SUPPLIER_NAME=" +
          obj.SUPPLIER_NAME,
      });
      // uni.navigateTo({
      //   url: `/pages/evaluateList/addEvaluate?SALEBILL_ID=${obj.SALEBILL_ID}&SALEBILL_CHILD_ID=${obj.SALEBILL_CHILD_ID}`,
      // });
    },
  },
  onReachBottom() {},
};
</script>

<style lang="less" scoped>
.order {
  background: #f2f4f5;
  height: 100%;
  width: 100%;
  position: relative;
  .selectBox {
    width: 100%;
    height: 100%;
    padding: 16px 18px;
    box-sizing: border-box;
    .title {
      font-size: 32rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #020e1a;
      line-height: 40rpx;
    }
    .tab {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 32rpx;
      .item {
        width: 106px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        font-size: 32rpx;
        background: #f2f4f5;
      }
      .active {
        width: 106px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        background: #e7f3ff;
        font-size: 32rpx;
        color: #1890ff;
      }
    }
    .btn {
      margin-top: 30px;
      width: 100%;
      height: 40px;
      background: #1890ff;
      border-radius: 8rpx;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      line-height: 40px;
    }
  }
  .srcollView {
    width: 100%;
    height: calc(100vh - 160rpx);
  }
}
.fliter {
  /*height: 258rpx;*/
  background: #fff;
  margin-bottom: 24rpx;
  .select_box {
    display: flex;
    flex-direction: row;
    padding: 16rpx 32rpx 8rpx;
    align-items: center;
    justify-content: space-between;
    .search_box {
      width: 558rpx;
      height: 72rpx;
      background: #f2f4f5;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-radius: 36rpx;
      img {
        width: 35rpx;
        height: 35rpx;
        margin: auto 16rpx auto 24rpx;
      }
      .select_input {
        width: 476rpx;
        border: none;
        height: 40rpx;
        font-size: 28rpx;
      }
    }
    .select_btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 28rpx;
      color: #6c737a;
      img {
        width: 35rpx;
        height: 35rpx;
        margin-right: 12rpx;
      }
    }
  }

  .tabs {
    width: 100%;
    height: 88rpx;
    display: flex;
    .tabs_item {
      text-align: center;
      color: #6c737a;
      font-size: 28rpx;
      line-height: 88rpx;
      flex: 1;
    }
    .tab_active {
      color: #1890ff;
      font-weight: 600;
      position: relative;
    }
    .tab_active:after {
      content: "";
      display: block;
      position: absolute;
      bottom: 2rpx;
      left: 50%;
      margin-left: -24rpx;
      width: 48rpx;
      height: 6rpx;
      background: #1890ff;
      border-radius: 2rpx;
    }
  }
  .sum_count {
    height: 72rpx;
    background: #fff;
    border-radius: 2rpx;
    padding-left: 32rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #6c737a;
    border-top: 2rpx solid #f2f4f5;
    span {
      color: #020e1a;
    }
  }
}
</style>
