<template>
  <div class="main">
    <div class="tabBox">
      <div :class="selectTab === item.value ? 'selectTab' : 'tabItem'" v-for="(item, index) in tabList" :key="index"
        @click="handleChangeSelectTab(item.value)">
        {{ item.label || "-" }}
      </div>
    </div>

    <scroll-view class="content" scroll-y :refresher-enabled="true" @refresherrefresh="handleFreshData"
      :refresher-triggered="triggered">
      <div class="contentFirst" v-if="
        selectTab === 1 ||
        selectTab === 2 ||
        selectTab === 4 ||
        selectTab === 5 ||
        selectTab === 6
      ">
        <div class="orderList" v-if="orderList && orderList.length > 0">
          <div class="orderItem" v-for="(item, index) in orderList" :key="index" @click="goOrderDetail(item)">
            <div class="topItem">
              <div class="shopIconBox">
                <image class="shopIcon" :src="item.SHOPDOORIMG ||
                  'https://eshangtech.com/ShopICO/no-picture.png'
                  " />
              </div>
              <div class="messageBox">
                <div class="nameBox">
                  {{ item.SHOPNAME || "-" }}
                  <span class="notice" v-if="item.TAKE_TYPE === 2000">预</span>
                </div>
                <div class="time">{{ item.ORDER_DATE || "-" }}</div>
              </div>
              <div class="statusBox">{{ item.SALEBILL_STATE_TEXT || "-" }}</div>
            </div>

            <div class="shopList">
              <scroll-view class="shopLeftList" :scroll-x="true">
                <div class="leftShopItem" v-for="(item, index) in item.GOODSList" :key="index">
                  <image class="leftShopImg" :src="item.IMAGE_URL ||
                    'https://eshangtech.com/ShopICO/no-picture.png'
                    " />
                  <span class="shopName">{{ item.COMMODITY_NAME }}</span>
                </div>
              </scroll-view>

              <div class="shopRightList">
                <div class="priceBox">
                  <span class="unit">¥</span>
                  <span class="money">{{ item.ORDER_AMOUNT || "-" }}</span>
                </div>
                <div class="orderCount">共{{ item.RECORD_COUNT || "-" }}件</div>
              </div>
            </div>

            <div class="commentBox">
              <div class="commentItem" @click.stop="goEvaluate(item)" v-if="
                item.COMMENT_STATE === 0 &&
                item.SALEBILL_STATE !== 1010 &&
                item.SALEBILL_STATE >= 3000 &&
                item.SALEBILL_STATE < 8000
              ">
                评价得积分
              </div>
              <div class="commentItem" @click="goOrderDetail(item)" v-if="item.SALEBILL_STATE === 1005">
                去支付
              </div>
            </div>
          </div>
        </div>
        <div class="orderList" v-if="!(orderList && orderList.length > 0)">
          <no-data text="暂无数据" :isShow="true"></no-data>
        </div>
      </div>

      <div class="contentLast" v-if="selectTab === 3">
        <template v-if="myEvaluation && myEvaluation.length > 0">
          <div class="myEvaluate" v-for="(item, index) in myEvaluation" :key="index">
            <div class="evaluateTop">
              <div class="evaluateLeft">
                <image class="shopIcon" />
                <span class="shopName"></span>
                <span class="timeText"></span>
              </div>
              <div class="evaluateRight">
                <image class="deleteIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/deleteIcon.png" />
              </div>
            </div>

            <div class="rateBox">
              <uni-rate :size="12" allowHalf v-model="saveMsg.commentScore" @change="changeRate($event, saveMsg)" />
              <span class="rateText"></span>
            </div>

            <div class="contentText"></div>

            <div class="imgListBox">
              <div class="imgItem"></div>
            </div>

            <div class="shopText">
              <div class="shopTextTitle">商家回复：</div>
              <div class="shopText"></div>
            </div>
          </div>
        </template>
        <template v-if="!(myEvaluation && myEvaluation.length > 0)">
          <no-data text="暂无数据" :isShow="true" />
        </template>
      </div>
    </scroll-view>

    <div class="order" v-if="false">
      <div class="order-list" v-for="(item, index) in orderList" :key="index" @click="goOrderDetail(item)">
        <div class="order-top">
          <div class="img-box">
            <image class="order-img" mode="aspectFit" lazy-load="true" :src="item.SHOPDOORIMG ||
              'https://eshangtech.com/ShopICO/no-picture.png'
              "></image>
          </div>
          <div class="order-top-right">
            <div style="
                display: flex;
                align-item: center;
                justify-content: space-between;
              ">
              <div class="order-name-box" @click.stop="goShop(item)">
                <div class="order-name">{{ item.SHOPNAME }}</div>
                <van-icon name="arrow" size="24rpx" />
              </div>
              <span class="order-price" :class="{ appoint: item.TAKE_TYPE === 2000 }">{{ item.SALEBILL_STATE_TEXT
              }}</span>
            </div>

            <div class="order-date">
              <span>{{ item.ORDER_DATE }}</span>
            </div>
          </div>
        </div>

        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16rpx;
            padding-right: 24rpx;
          ">
          <div class="order-goods">
            {{ item.COMMODITY_NAME }}
            <span v-show="item.RECORD_COUNT > 1">
              等{{ item.RECORD_COUNT }}种商品</span>
          </div>
          <span class="order-price">￥{{ item.ORDER_AMOUNT }}</span>
        </div>
        <div class="order-btn-box">
          <span class="order-btn" v-if="item.SALEBILL_STATE === 1005">去付款</span>
          <block v-else>
            <!-- <span class="order-btn" @click.stop="goShop(item)" >再来一单</span> -->
            <span class="advice-btn" @click.stop="goEvaluate(item)"
              v-if="item.COMMENT_STATE === 0 && item.SALEBILL_STATE !== 1010">评价得积分</span>
          </block>
        </div>
      </div>
      <no-data :text="'您没有订单记录'" :isShow="!(orderList && orderList.length > 0)" />
    </div>
    <CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
  </div>
</template>

<script>
import noData from "@/components/noData.vue";
import { mapMutations, mapGetters } from "vuex";
import NoData from "../../../components/noData.vue";
import CustomLoading from "../../../components/customLoading.vue";
export default {
  data() {
    return {
      pageMsg: {
        isLoading: false,
        pageSize: 10,
        pageIndex: 1,
      },
      orderList: [],
      tabList: [
        {
          label: "全部",
          value: 1,
        },
        {
          label: "待付款",
          value: 2,
        },
        {
          label: "待制作",
          value: 3,
        },
        {
          label: "待取餐",
          value: 4,
        },
        {
          label: "待评价",
          value: 5,
        },
        {
          label: "退款",
          value: 6,
        },
      ],
      allList: [], // [0] 全部  [1] // 待评价
      selectTab: 1,
      myEvaluation: [], // 我的评价
      searchType: "",
      isLoading: false,
      triggered: false
    };
  },
  components: {
    noData,
    CustomLoading,
  },
  computed: {
    ...mapGetters(["user", "refresh"]),
  },
  methods: {
    ...mapMutations({
      setIsLoading: "setIsLoading",
      setFresh: "refresh",
    }),
    // 下拉刷新
    handleFreshData() {
      this.triggered = true
      this.orderList = [];
      let type =
        this.selectTab === 1
          ? "1005,1010,2000,3000,8000,8900"
          : this.selectTab === 2
            ? "1005"
            : this.selectTab === 3
              ? "1010"
              : this.selectTab === 4
                ? "2000"
                : this.selectTab === 5
                  ? "3000"
                  : this.selectTab === 6
                    ? "8000,8010,8020,8900,8999"
                    : "";
      this.handleGetOrderList(type);
    },
    handleChangeSelectTab(value) {
      this.selectTab = value;
      this.orderList = [];
      let type =
        this.selectTab === 1
          ? "1005,1010,2000,3000,8000,8900"
          : this.selectTab === 2
            ? "1005"
            : this.selectTab === 3
              ? "1010"
              : this.selectTab === 4
                ? "2000"
                : this.selectTab === 5
                  ? "3000"
                  : this.selectTab === 6
                    ? "8000,8010,8020,8900,8999"
                    : "";
      this.handleGetOrderList(type);
    },
    getorderList() {
      let _this = this;
      // uni.showLoading({
      //   title: "加载中...",
      // });
      this.isLoading = true;
      _this.$api
        .getCoop({
          action_type: "GetOrderList",
          salebillType: 6000,
          PageIndex: 1,
          pageSize: 999999,
        })
        .then((res) => {
          if (res.ResultCode === "100") {
            if (_this.pageMsg.pageIndex === 1) {
              _this.orderList = res.Data.List;
            } else {
              _this.orderList = _this.orderList.concat(res.Data.List);
            }

            if (res.Data.TotalCount > _this.orderList.length) {
              _this.pageMsg.isLoadMore = true;
            } else {
              _this.pageMsg.isLoadMore = false;
            }
          } else {
            _this.orderList = [];
          }

          let allList = [_this.orderList, []];
          let otherList = [];
          if (_this.orderList && _this.orderList.length > 0) {
            _this.orderList.forEach((item) => {
              if (item.COMMENT_STATE === 0) {
                otherList.push(item);
              }
            });
          }
          allList[1] = otherList;
          _this.allList = allList;
          _this.orderList = allList[_this.selectTab - 1];

          console.log("_this.orderList", _this.orderList);

          this.setIsLoading(false);
          // uni.hideLoading();
          this.isLoading = false;
        });
    },
    goShop(item) {
      // let arr = {
      //   id: item.SERVERPARTSHOP_ID,
      //   shopName: item.SHOPNAME,
      //   serverpartId: item.SERVERPART_ID

      // }
      // this.$store.commit('nowStore', arr)
      this.$store.commit("setprovinceCode", item.PROVINCE_CODE);
      uni.navigateTo({
        url:
          "/pages/shopPages/shop/index?id=" +
          item.SERVERPARTSHOP_ID +
          "&mid=" +
          item.MERCHANTS_ID,
      });
    },
    goEvaluate(item) {
      uni.navigateTo({
        url:
          "/pages/newEvaluate/index?merchantsId=" +
          item.MERCHANTS_ID +
          "&saleBillId=" +
          item.SALEBILL_ID,
      });
    },
    goOrderDetail(item) {
      uni.navigateTo({
        url: `/pages/orders/orderdetail/index?orderInternal=${item.SALEBILL_ID}`,
      });
      // uni.navigateTo({
      //   url:
      //     "/pages/orders/orderdetail/index?orderNumber=" +
      //     item.SALEBILL_CODE +
      //     "&orderInternal=" +
      //     item.SALEBILL_ID,
      // });
    },
    // 请求我的评价列表
    handleGetOurEvaluateList() {
      this.$api
        .getCoop({
          action_type: "GetCommentList",
          pageSize: 999999,
          pageIndex: 1,
        })
        .then((res) => {
          console.log("handleGetOurEvaluateList", res);
        });
    },
    // 拿到点餐列表
    async handleGetOrderList(status) {
      let _this = this;
      // uni.showLoading({
      //   title: "加载中...",
      // });
      this.isLoading = true;
      const req = {
        action_type: "GetOrderList",
        salebillType: 6000,
        salebillState: status || "",
        PageIndex: this.pageMsg.pageIndex,
        pageSize: this.pageMsg.pageSize,
        ownerUnitId: 911,
        requestType: "application/x-www-form-urlencoded",
      };
      const res = await this.$api.postCoop(req);

      if (res.ResultCode === "100") {
        if (_this.pageMsg.pageIndex === 1) {
          _this.orderList = res.Data.List;
        } else {
          _this.orderList = _this.orderList.concat(res.Data.List);
        }

        if (res.Data.TotalCount > _this.orderList.length) {
          _this.pageMsg.isLoadMore = true;
        } else {
          _this.pageMsg.isLoadMore = false;
        }
      } else {
        _this.orderList = [];
      }

      console.log("_this.orderList", _this.orderList);

      this.setIsLoading(false);
      // uni.hideLoading();
      this.isLoading = false;
      this.triggered = false
    },
  },
  onPullDownRefresh() {
    // this.orderList = []
    this.pageMsg.pageIndex = 1;
    // this.setIsLoading(true)
    // this.getorderList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onShow() {
    // this.orderList = []
    this.pageMsg.pageIndex = 1;
    // this.getorderList();
    this.setIsLoading(true);
    // this.handleGetOurEvaluateList();
  },
  onLoad(query) {
    if (query.type) {
      this.searchType = query.type;
      this.selectTab = Number(this.searchType);
    }
    let type =
      this.selectTab === 1
        ? "1005,1010,2000,3000,8000,8900"
        : this.selectTab === 2
          ? "1005"
          : this.selectTab === 3
            ? "1010"
            : this.selectTab === 4
              ? "2000"
              : this.selectTab === 5
                ? "3000"
                : this.selectTab === 6
                  ? "8000,8010,8020,8900,8999"
                  : "";
    // 获取订单数据
    this.handleGetOrderList(type);
    //   this.orderList = []
    //   this.pageMsg.pageIndex = 1
    //   this.setIsLoading(true)
    //   this.getorderList()
    this.$utils.addUserBehaviorNew();
  },
  onReachBottom() {
    if (this.pageMsg.isLoadMore) {
      this.pageMsg.pageIndex += 1;
      this.getorderList();
    }
  },
};
</script>

<style lang="less" scoped>
// bodyColor = #C6A376;

.main {
  width: 100vw;
  height: 100vh;
  background: #fff;

  .tabBox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 16rpx 0 0;
    border-bottom: 1px solid #f6f6f6;

    .tabItem {
      width: calc(100% / 3);
      height: 58rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #716f69;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }

    .selectTab {
      width: calc(100% / 3);
      height: 58rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #130f05;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
      position: relative;
    }

    .selectTab::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2rem;
      height: 6rpx;
      background: #ba922f;
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 76rpx);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 32rpx;

    .contentFirst {
      width: 100%;

      .orderList {
        width: 100%;

        .orderItem {
          width: 100%;
          box-sizing: border-box;
          padding-bottom: 40rpx;
          border-bottom: 1px solid #f0f0f0;
          margin-bottom: 40rpx;

          .topItem {
            display: flex;
            align-items: center;
            padding: 2rpx 0;
            position: relative;

            .shopIconBox {
              width: 80rpx;
              height: 80rpx;
              border-radius: 6rpx;
              overflow: hidden;
              margin-right: 16rpx;

              .shopIcon {
                width: 100%;
                height: 100%;
              }
            }

            .messageBox {
              width: calc(100% - 180rpx);

              .nameBox {
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;

                .notice {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #ba922f;
                  line-height: 32rpx;
                  text-align: center;
                  font-style: normal;
                  padding: 0 8rpx;
                  background: #fef7e5;
                  border-radius: 2rpx;
                  margin-left: 12rpx;
                }
              }

              .time {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #716f69;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                margin-top: 4rpx;
              }
            }

            .statusBox {
              position: absolute;
              right: 0;
              top: 0;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #716f69;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }

          .shopList {
            width: 100%;
            margin-top: 24rpx;
            display: flex;
            align-items: center;

            .shopLeftList {
              width: calc(100% - 112rpx);
              white-space: nowrap;

              .leftShopItem {
                display: inline-block;
                width: 136rpx;
                margin-right: 16rpx;

                .leftShopImg {
                  width: 168rpx;
                  height: 128rpx;
                  border-radius: 6rpx;
                  margin-bottom: 8rpx;
                  margin-right: 16rpx;
                }

                .shopName {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #716f69;
                  line-height: 36rpx;
                  text-align: left;
                  font-style: normal;
                  display: block;
                  width: 100%;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
            }

            .shopLeftList::-webkit-scrollbar {
              display: none;
            }

            .shopRightList {
              width: 112rpx;
              display: flex;
              flex-direction: column;
              align-items: flex-end;

              .priceBox {
                .unit {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 24rpx;
                  color: #090c1a;
                  line-height: 24rpx;
                  text-align: left;
                  font-style: normal;
                  margin-right: 4rpx;
                }

                .money {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 36rpx;
                  color: #130f05;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }

              .orderCount {
                margin-top: 8rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #716f69;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }

          .commentBox {
            width: 100%;
            display: flex;
            justify-content: flex-end;

            .commentItem {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #ba922f;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              padding: 10rpx 12rpx;
              border-radius: 6rpx;
              border: 2rpx solid #ba922f;
            }
          }
        }

        .orderItem:last-child {
          border-bottom: 0px solid #f0f0f0;
        }
      }
    }

    .contentLast {
      .myEvaluate {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 40rpx;
        border-bottom: 2rpx solid #f0f0f0;

        .evaluateTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .evaluateLeft {
            .shopIcon {
              width: 48rpx;
              height: 48rpx;
              margin-right: 12rpx;
            }

            .shopName {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
              display: inline-block;
              width: 250rpx;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              margin-right: 24rpx;
            }

            .timeText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: norma;
            }
          }

          .evaluateRight {
            .deleteIcon {
              width: 32rpx;
              height: 32rpx;
            }
          }
        }

        .rateBox {
          width: 100%;
          margin-top: 16rpx;

          .rateText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-left: 6rpx;
          }
        }

        .contentText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .imgListBox {
          width: 100%;
          margin-top: 16rpx;
          display: flex;
          flex-wrap: wrap;

          .imgItem {
            width: 160rpx;
            height: 160rpx;
            border-radius: 8rpx;
            margin-right: 16rpx;

            .img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .shopText {
          width: 100%;
          background: #f5f6f7;
          border-radius: 2rpx;
          padding: 16rpx 24rpx;

          .shopTextTitle {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }

          .shopText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }

  .content ::-webkit-scrollbar {
    display: none;
  }
}

.order-list {
  box-sizing: border-box;
  padding: 30rpx 0 0rpx 32rpx;
  background: #ffffff;
}

.order-top {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  padding-right: 24rpx;
  align-items: center;
}

.img-box {
  flex: 0.1;
}

.order-img {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
}

.order-top-right {
  // display flex
  flex: 0.9;
  // justify-content space-between
  margin-left: 20rpx;
  // padding-bottom 25rpx
  box-sizing: border-box;
  // border-bottom 2rpx solid #ddd
}

.order-name-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rpx;
}

.order-name {
  font-size: 30rpx;
  color: #383838;
  margin-right: 20rpx;
  // width 400rpx
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appoint {
  display: flex;
  align-items: center;
}

.appoint:after {
  content: "预";
  padding: 0 4rpx;
  font-size: 20rpx;
  height: 24rpx;
  line-height: 24rpx;
  margin-left: 16rpx;
  font-weight: normal;
  color: #fff;
  border-radius: 4rpx;
  background: #f5ba4f;
}

.order-date {
  color: #a4a5a8;
  line-height: 30rpx;
}

.order-goods {
  padding-left: 104rpx;
  color: #383838;
  font-size: 24rpx;
}

.order-price {
  color: #333;
  font-size: 28rpx;
}

.order-btn-box {
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: flex-end;
  padding: 24rpx 24rpx 24rpx 0;
}

.order-btn {
  color: #dc615a;
  border: 2rpx solid #dc615a;
  text-align: center;
  border-radius: 6rpx;
  font-size: 24rpx;
  width: 158rpx;
  height: 56rpx;
  line-height: 56rpx;
}

.advice-btn {
  color: bodyColor;
  border: 2rpx solid bodyColor;
  text-align: center;
  border-radius: 6rpx;
  font-size: 24rpx;
  padding: 0 16rpx;
  height: 56rpx;
  line-height: 56rpx;
}

.order-btn+.advice-btn {
  margin-left: 32rpx;
}
</style>
