<template>
  <view class="main">
    <!-- <view class="tabBox">
      <view
        :class="item.value === selectFilter ? 'tabItem selectTab' : 'tabItem'"
        v-for="(item, index) in tabList"
        :key="index"
        @click="handleChangeSelect(item.value)"
        >{{ item.label }}
      </view>
    </view> -->
    <view class="tabBox">
      <MenuItem v-for="(item, index) in tabList" :key="index" :item="item" round="true" size="28"
        :src="selectFilter == item.id ? item.active : item.src"
        :nameStyle="selectFilter == item.id ? 'color:#5B96E9' : 'color:#808D97'" :imageBoxStyle="(selectFilter == item.id
          ? 'background:#f0f7fe;'
          : 'background:#f6f7f8;') +
          'height:75rpx;width:75rpx;padding: 18rpx;'
          " @handleClick="handleChangeSelect(item.id)">
      </MenuItem>
    </view>

    <scroll-view class="scrollbox" :scroll-y="true" @scrolltolower="handleScrollBottom">
      <view class="dataList">
        <view class="dataItem" v-for="(item, index) in dataList" :key="index" @click="handleGoDetail(item)">
          <div class="content-index">{{ index + 1 }}</div>
          <view class="itemRow">
            <view class="projectName">{{ item.placeName || "-" }}</view>
            <view v-if="item.situation !== 0" class="stateName" :style="{
              color:
                item.errorStatus === 0
                  ? 'red'
                  : item.errorStatus === 1
                    ? '#3B72FF'
                    : item.errorStatus === 2
                      ? '#139942'
                      : '',
            }">
              {{
                item.errorStatus === 0
                  ? "待处理"
                  : item.errorStatus === 1
                    ? "处理中"
                    : item.errorStatus === 2
                      ? "已处理"
                      : ""
              }}</view>
          </view>
          <view class="itemCenterRow" style="margin: 60rpx 0 20rpx">
            <view class="value">{{ item.uploadResult || "-" }}</view>
          </view>
          <view class="itemRow">
            <view class="leftName"></view>
            <!--          <view class="rightName">{{ $util.getMoney(item.REVENUE_AMOUNT) }}</view>-->

            <view class="rightName"><span :style="{
              color:
                item.situation === 0
                  ? '#139942'
                  : item.situation === 1
                    ? '#F75031'
                    : '',
            }">{{
              item.errorStatus === 2
                ? ""
                : item.situation === 0
                  ? "正常情况"
                  : item.situation === 1
                    ? "急需处理"
                    : "-"
            }}</span>
            </view>
          </view>

          <view class="line"></view>
          <view class="itemRow">
            <view class="leftName"><span class="radio" style="background: #44bea3"></span>{{ item.userName || "-" }}
            </view>
            <view class="rightName"></view>
          </view>
          <view class="itemRow">
            <view class="leftName"><span class="radio" style="background: #398efe"></span>{{
              item.createdAt
                ? $moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss")
                : "-"
            }}</view>
          </view>
        </view>
      </view>

      <view class="dataList" v-if="false">
        <view class="dataItem" v-for="(item, index) in dataList" :key="index" @click="handleGoDetail(item)">
          <view class="dataTop">
            <view class="topLeft">
              <image class="itemIcon" src="/static/images/mbwa/fixed.svg" />
              <span class="itemTitle">{{ item.title || "-" }}</span>
            </view>
            <view class="topRight" :style="{
              color:
                item.errorStatus === 0
                  ? 'red'
                  : item.errorStatus === 1
                    ? '#3B72FF'
                    : item.errorStatus === 2
                      ? '#139942'
                      : '',
            }">
              {{
                item.errorStatus === 0
                  ? "待处理"
                  : item.errorStatus === 1
                    ? "处理中"
                    : item.errorStatus === 2
                      ? "已处理"
                      : ""
              }}
            </view>
          </view>

          <view class="dataBottom">
            <view class="statusBox" :style="{
              color:
                item.situation === 0
                  ? '#139942'
                  : item.situation === 1
                    ? '#F75031'
                    : '',
              background:
                item.situation === 0
                  ? '#EBF7EF'
                  : item.situation === 1
                    ? '#FEF0ED'
                    : '',
            }">{{
              item.situation === 0
                ? "正常情况"
                : item.situation === 1
                  ? "急需处理"
                  : "-"
            }}</view>

            <view class="itemContent">{{
              item.uploadResult || "-"
            }}</view>

            <view class="userBox">
              <text class="userName">{{ item.userName || "-" }}</text>
              <text class="time">{{
                item.createdAt
                  ? $moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss")
                  : "-"
              }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="load-more" v-if="dataList && dataList.length > 0">
        <text>{{
          !isEnd ? "正在加载,请稍后..." : "——— 我是有底线的 ———"
        }}</text>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import MenuItem from "@/components/menu/menuItem.vue";
export default {
  data() {
    let stime = this.$util.cutDate(new Date(), "YYYY-MM-DD");
    return {
      tabList: [
        {
          name: "全部",
          src: "/static/images/expense/type/shenp.png",
          active: "/static/images/expense/type/shenpz.png",
          id: 1,
        },
        {
          name: "正常",
          src: "/static/images/expense/type/yichl.png",
          active: "/static/images/expense/type/yichlz.png",
          id: 2,
        },
        {
          name: "异常",
          src: "/static/images/expense/type/yifq.png",
          active: "/static/images/expense/type/yifqz.png",
          id: 3,
        },
        {
          name: "待我处理",
          src: "/static/images/expense/type/yichl.png",
          active: "/static/images/expense/type/yichlz.png",
          id: 4,
        },
        // { label: "全部", value: 1 },
        // { label: "正常", value: 2 },
        // { label: "异常", value: 3 },
        // { label: "待我处理", value: 4 },
      ],
      selectFilter: 1, // 选择的tab

      menu: {}, //当前的手机样式
      searchTime: stime, // 查询的时间
      selectIndex: 0, // 选择的服务区
      selectServiceList: [], // 服务区列表
      selectServerpartObj: {}, // 选择的服务区对象 label value

      dataList: [], // 下面的数据
      useInfo: {}, // 用户详情
      isEnd: false, // 判断是否到底了
      PageIndex: 1, // 默认的页数
    };
  },
  components: {
    MenuItem,
  },
  onLoad() {
    this.menu = uni.getMenuButtonBoundingClientRect();
    let userInfo = uni.getStorageSync("vuex");
    userInfo = JSON.parse(userInfo);
    if (userInfo) {
      this.useInfo = JSON.parse(JSON.stringify(userInfo));
    }
    // 拿到服务区的数据
    this.handleGetServerpartList();
  },
  methods: {
    // 跳转详情进行操作
    handleGoDetail(obj) {
      //   判断是否是异常的
      if (obj.situation === 1) {
        this.$util.toNextRoute(
          "navigateTo",
          `/pages/walkAroundManager/detail?id=${obj.id}&pageType=error`
        );
      } else if (obj.situation === 0) {
        // 正常的 查看详情
        this.$util.toNextRoute(
          "navigateTo",
          `/pages/walkAroundManager/detail?id=${obj.id}`
        );
      }
    },
    // 滚动到底部
    handleScrollBottom() {
      if (!this.isEnd) {
        this.PageIndex = this.PageIndex + 1;
        this.handleGetDataList();
      }
    },
    // 拿到时间
    handleGetTime(e) {
      console.log("e", e);
      this.searchTime = e.detail.value;
      this.dataList = [];
      this.handleGetDataList();
    },
    // 修改服务区
    handleChangeService(e) {
      console.log("e", e);
      this.selectIndex = Number(e.detail.value);
      this.dataList = [];
      this.handleGetDataList();
    },
    // 返回上一页
    handleBack() {
      uni.switchTab({ url: "/pages/index/index" });
    },
    // 改变tab
    handleChangeSelect(value) {
      this.selectFilter = value;
      this.dataList = [];
      this.isEnd = false;
      this.PageIndex = 1;
      this.handleGetDataList();
    },
    // 拿到滚动框里面的数据
    async handleGetDataList() {
      console.log("this.selectFilter", this.selectFilter);
      uni.showLoading({
        title: "加载中...",
      });
      const req = {
        // serverPartId: 0,
        startTime: "",
        endTime: "",
        pageNum: this.PageIndex,
        pageSize: 10,
        // serverPartId: this.selectServiceList[this.selectIndex].value,
        // startTime: `${this.searchTime} 00:00:00`,
        // endTime: `${this.searchTime} 23:59:59`,
        extend:
          this.selectFilter === 1
            ? null
            : this.selectFilter === 2
              ? [
                {
                  key: "situation",
                  value: 0,
                },
              ]
              : this.selectFilter === 3
                ? [
                  {
                    key: "situation",
                    value: 1,
                  },
                ]
                : this.selectFilter === 4
                  ? [
                    {
                      key: "person.STAFF_NAME",
                      value: this.useInfo.userData.UserName,
                      //   this.useInfo.userData.UserId
                    },
                  ]
                  : null,

        // any:
        //   this.selectFilter === 4
        //     ? [
        //         {
        //           key: "STAFF_NAME",
        //           value: this.selectFilter === 4 ? "李玉" : undefined,
        //         },
        //         // {
        //         //   key: "userId",
        //         //   value:
        //         //     this.selectFilter === 4
        //         //       ? this.useInfo.userData.UserId
        //         //       : undefined,
        //         // },
        //       ]
        //     : undefined,
        // 1 待我处理,
      };
      console.log("req", req);

      const data = await this.$request.$webJavaPOST(
        `questionnaire-responses/getList`,
        req
      );
      console.log("datadatadatadata", data);
      let list = data.Result_Data.List;
      if (list && list.length > 0) {
        if (list.length < 10) {
          this.isEnd = true;
        }

        // list.forEach((item) => {
        // let extendObj = {};
        // if (item.extend) {
        //   extendObj = JSON.parse(item.extend);
        // }
        // item.extendObj = extendObj;
        // });
      } else {
        this.isEnd = true;
      }

      this.dataList = this.dataList.concat(list);
      console.log("this.dataList", this.dataList);
      uni.hideLoading();
    },
    // 拿到服务区的数据
    async handleGetServerpartList() {
      const req = {
        UserIdEncrypted: this.useInfo.userData.UserIdEncrypted,
      };
      const data = await this.$request.$webGet(
        "EShangApiMain/Logging/GetPassportInfoById",
        req
      );
      console.log("Info", data);
      const secondReq = {
        ServerpartCodes: data.Result_Data.CityAuthority || "",
        ServerpartType: 1000,
        StatisticsType: "1000,2000",
      };
      const secondData = await this.$request.$webGet(
        "EShangApiMain/BaseInfo/GetServerpartDDL",
        secondReq
      );
      console.log("secondData", secondData);
      secondData.Result_Data.List.unshift({
        label: "蜀越公司",
        value: 530,
      });
      this.selectServiceList = secondData.Result_Data.List;

      // 拿到下面实际数据
      this.handleGetDataList();
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100vw;
  min-height: 100vh;
  background: #f5f7f9;
  box-sizing: border-box;

  .tabBox {
    width: 100%;
    display: flex;
    align-items: center;
    background: #fff;

    // width: 100%;
    // height: 74rpx;
    // box-sizing: border-box;
    // padding: 16rpx 0 18rpx;
    // display: flex;
    // align-items: center;
    // background: #ffffff;
    .tabItem {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 30rpx;
      color: #010b18;
      line-height: 40rpx;
      font-style: normal;
    }

    .selectTab {
      position: relative;
    }

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

  .scrollbox {
    width: 100vw;
    height: calc(100vh - 180rpx - 48rpx);
    background: #f6f7f9;
    box-sizing: border-box;
    margin-top: 24rpx;
    // padding: 0 32rpx;
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容 iOS 11.2+ */
    padding-bottom: constant(safe-area-inset-bottom);

    .dataList {
      width: 100%;
      box-sizing: border-box;
      padding: 24rpx 24rpx 0;

      .dataItem {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        padding: 16rpx;
        margin: 24rpx 0;
        border-radius: 8rpx;
        box-shadow: 0 0px 6rpx #e2e2e2;
        position: relative;

        .content-index {
          width: 42rpx;
          height: 32rpx;
          line-height: 32rpx;
          font-size: 24rpx;
          color: #fff;
          text-align: center;
          background-color: #fb8b56;
          position: absolute;
          top: 26rpx;
          left: -4rpx;
          box-shadow: 4rpx 4rpx 2rpx 0 rgba(238, 112, 27, 0.5);
        }

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

          .projectName {
            width: 60%;
            font-size: 30rpx;
            height: 54rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333333;
            box-sizing: border-box;
            padding-left: 40rpx;
          }

          .leftName {
            color: #686868;
            font-size: 24rpx;

            .radio {
              display: inline-block;
              width: 14rpx;
              height: 14rpx;
              border-radius: 14rpx;
              margin: 0 8px 0 5px;
            }
          }

          .stateName {
            font-size: 28rpx;
            color: #999999;
          }

          .rightName {
            color: #686868;
            font-size: 24rpx;

            .radio {
              display: inline-block;
              width: 14rpx;
              height: 14rpx;
              border-radius: 14rpx;
              margin: 0 8px 0 5px;
            }

            .month {
              font-family: DINAlternate-Bold, DINAlternate;
            }
          }
        }

        .itemCenterRow {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .value {
            font-family: DINAlternate-Bold, DINAlternate;
            font-size: 28rpx;
            font-weight: 600;
            color: #ff814fff;
            width: 70%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 设置显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
          }
        }

        .line {
          height: 2rpx;
          width: 100%;
          background-color: #eee;
          margin-bottom: 18rpx;
          margin-top: 16rpx;
        }
      }
    }
  }

  .scrollbox ::-webkit-scrollbar {
    display: none;
    width: 0;
  }

  //   .top {
  //     width: 100%;
  //     background-image: url("https://eshangtech.com/ShopICO/yxcl/settlementApproval/pageBg.png");
  //     background-repeat: no-repeat;
  //     background-size: cover;
  //     box-sizing: border-box;
  //     padding: 0 32rpx;
  //     z-index: 4;
  //     position: relative;
  //     .arrowBox {
  //       width: 100%;
  //       display: flex;
  //       align-items: center;
  //       .img {
  //         width: 48rpx;
  //         height: 48rpx;
  //       }
  //       .selectServiceBox {
  //         margin-left: 16rpx;
  //         display: flex;
  //         align-items: center;
  //         .serviceIcon {
  //           width: 80rpx;
  //           height: 80rpx;
  //           position: relative;
  //           z-index: 2;
  //         }
  //         .nameBox {
  //           font-family: "PingFangSC";
  //           font-weight: 600;
  //           font-size: 28rpx;
  //           color: #160002;
  //           line-height: 40rpx;
  //           text-align: left;
  //           font-style: normal;
  //           padding: 12rpx 34rpx 12rpx 48rpx;
  //           display: inline-block;
  //           border-top-right-radius: 200rpx;
  //           border-bottom-right-radius: 200rpx;
  //           background: #fff;
  //           transform: translateX(-20px);
  //           .moreIcon {
  //             width: 24rpx;
  //             height: 24rpx;
  //             margin-left: 14rpx;
  //           }
  //         }
  //       }
  //     }

  //     .timeBox {
  //       height: 28px;
  //       margin-top: 12px;
  //       display: flex;
  //       align-items: center;
  //       .timeSelect {
  //         display: flex;
  //         align-items: center;
  //         .monthNumber {
  //           font-family: "DINAlternate";
  //           font-size: 42rpx;
  //           font-weight: bold;
  //         }
  //         .monthUnit {
  //           margin-left: 4rpx;
  //           font-family: "PingFangSC";
  //           font-weight: 400;
  //           font-size: 28rpx;
  //           color: #242729;
  //         }
  //         .year {
  //           font-family: "DINAlternate";
  //           font-weight: 400;
  //           font-size: 28rpx;
  //           color: #786b6c;
  //           line-height: 32rpx;
  //           text-align: left;
  //           font-style: normal;
  //           margin-left: 8rpx;
  //         }
  //       }

  //       .bottomArrow {
  //         width: 32rpx;
  //         height: 32rpx;
  //         margin-left: 8rpx;
  //       }
  //     }

  //     .TabsBox {
  //       width: 100%;
  //       height: 32px;
  //       margin-top: 16px;
  //       box-sizing: border-box;
  //       display: flex;
  //       align-items: center;
  //       .tabItemList {
  //         width: calc(100% - 140rpx);
  //         display: flex;
  //         align-items: center;
  //         justify-content: space-between;
  //         height: 62rpx;
  //         margin-right: 30rpx;
  //         .tabItem {
  //           display: inline-block;
  //           font-family: PingFangSC, PingFang SC;
  //           font-weight: 400;
  //           font-size: 28rpx;
  //           height: 62rpx;
  //           color: #242729;
  //           line-height: 40rpx;
  //           text-align: left;
  //           font-style: normal;
  //         }
  //         .selectTabItem {
  //           font-family: PingFangSC, PingFang SC;
  //           font-weight: 500;
  //           font-size: 28rpx;
  //           color: #fd7f21;
  //           line-height: 40rpx;
  //           text-align: left;
  //           font-style: normal;
  //           position: relative;
  //         }
  //         .selectTabItem:after {
  //           content: "";
  //           height: 6rpx;
  //           position: absolute;
  //           width: 100%;
  //           left: 0;
  //           bottom: 0;
  //           background: #fd7f21;
  //         }
  //       }
  //       .otherItem {
  //         width: 110rpx;
  //         height: 62rpx;
  //         font-family: PingFangSC, PingFang SC;
  //         font-weight: 400;
  //         font-size: 28rpx;
  //         color: #786b6c;
  //         line-height: 40rpx;
  //         text-align: left;
  //         font-style: normal;
  //         position: relative;
  //         box-sizing: border-box;
  //         display: flex;
  //         justify-content: flex-end;
  //         padding-left: 10rpx;
  //         .filterIcon {
  //           width: 32rpx;
  //           height: 32rpx;
  //           margin-right: 4rpx;
  //           margin-top: 4rpx;
  //         }
  //       }
  //       .otherItem:before {
  //         content: "";
  //         width: 1px;
  //         height: 36rpx;
  //         background: #e4e4e4;
  //         position: absolute;
  //         top: 0;
  //         left: 0;
  //       }
  //     }
  //   }

  //   .contentBox {
  //     width: 100%;
  //     height: 100%;
  //     background-color: #f3f3f3;
  //     .dataList {
  //       width: 100%;
  //       box-sizing: border-box;
  //       padding: 24rpx 24rpx 0;
  //       .dataItem {
  //         width: 100%;
  //         box-sizing: border-box;
  //         background: #fff;
  //         padding: 16rpx;
  //         margin: 24rpx 0;
  //         border-radius: 8rpx;
  //         box-shadow: 0 0px 6rpx #e2e2e2;
  //         position: relative;
  //         .content-index {
  //           width: 42rpx;
  //           height: 32rpx;
  //           line-height: 32rpx;
  //           font-size: 24rpx;
  //           color: #fff;
  //           text-align: center;
  //           background-color: #fb8b56;
  //           position: absolute;
  //           top: 26rpx;
  //           left: -4rpx;
  //           box-shadow: 4rpx 4rpx 2rpx 0 rgba(238, 112, 27, 0.5);
  //         }
  //         .itemRow {
  //           width: 100%;
  //           display: flex;
  //           align-items: center;
  //           justify-content: space-between;
  //           .projectName {
  //             width: 60%;
  //             font-size: 28rpx;
  //             height: 54rpx;
  //             overflow: hidden;
  //             text-overflow: ellipsis;
  //             white-space: nowrap;
  //             color: #333333;
  //             box-sizing: border-box;
  //             padding-left: 40rpx;
  //           }
  //           .leftName {
  //             color: #686868;
  //             font-size: 24rpx;
  //             .radio {
  //               display: inline-block;
  //               width: 14rpx;
  //               height: 14rpx;
  //               border-radius: 14rpx;
  //               margin: 0 8px 0 5px;
  //             }
  //           }
  //           .stateName {
  //             font-size: 28rpx;
  //             color: #999999;
  //           }
  //           .rightName {
  //             color: #686868;
  //             font-size: 24rpx;
  //             .radio {
  //               display: inline-block;
  //               width: 14rpx;
  //               height: 14rpx;
  //               border-radius: 14rpx;
  //               margin: 0 8px 0 5px;
  //             }
  //             .month {
  //               font-family: DINAlternate-Bold, DINAlternate;
  //             }
  //           }
  //         }
  //         .itemCenterRow {
  //           width: 100%;
  //           display: flex;
  //           flex-direction: column;
  //           align-items: center;
  //           .value {
  //             font-family: DINAlternate-Bold, DINAlternate;
  //             font-size: 16px;
  //             font-weight: 600;
  //             color: #ff814fff;
  //             width: 70%;
  //             display: -webkit-box;
  //             -webkit-line-clamp: 2; /* 设置显示的行数 */
  //             -webkit-box-orient: vertical;
  //             overflow: hidden;
  //             text-overflow: ellipsis;
  //             text-align: center;
  //           }
  //           .label {
  //             font-size: 12px;
  //             color: #999999;
  //           }
  //         }
  //         .line {
  //           height: 2rpx;
  //           width: 100%;
  //           background-color: #eee;
  //           margin-bottom: 18rpx;
  //           margin-top: 16rpx;
  //         }
  //       }
  //     }
  //     .load-more {
  //       text-align: center;
  //       width: 100%;
  //       height: 80rpx;
  //       color: #9999;
  //       font-size: 24rpx;
  //     }
  //   }
}
</style>
