<template>
  <view class="page-css">
    <view class="page-header-txt">科研医疗建筑运维平台</view>
    <scroll-view class="wxaSortPickerList" scroll-y="true"> </scroll-view>
    <view class="page-search-top">
      <betone-new-input v-model="searchInfo.name" placeholder="搜索维修单单号" icon="search" style="margin-bottom: 32rpx"
        @changevalue="searchData()" />
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"
        bg-color="rgba(248, 248, 248, 1)"></u-tabs>
    </view>
    <view class="order-box">
      <!-- orderData -->
      <view class="order-item" v-for="(item, index) in orderData" :key="index">
        <view class="item-top">
          <view class="item-left">
            <text class="item-orderNo">单号：{{ item.requirementCode }}</text>
            <text class="item-time"> {{ item.fillingTime }}</text>
          </view>
          <view class="item-right">
            <u-tag :text="statusName(item.status)" type="success" mode="dark" shape="circle"
              :bg-color="tagColor[statusName(item.status)]" />
          </view>
        </view>
        <view class="item-con">
          <view class="con-left">
            <image src="@/static/images/pic-default.png" alt="" />
          </view>
          <view class="con-right">
            <text class="con-title">提报类型：{{ item.faultType }}</text>
            <text class="con-content">{{ item.faultDescribe }}</text>
            <view class="con-btn">
              <!-- 所有状态都有 -->
              <u-button size="mini" plain style="margin-right: 32rpx" @click="goPage(item, 'view')">查看</u-button>
              <!-- 待提报 --提报 修改-->
              <block v-if="item.status == -1">
                <u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true" type="primary"
                  @click="subOrder(item)">提报</u-button>
                <u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true" type="primary"
                  @click="goPage(item, 'edit')">修改</u-button>
              </block>
              <!-- 待维修 -- 查看位置-->
              <block v-if="(item.status == 1 || item.status == 2 || item.status == 3)">
                <u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true"
                  type="primary">查看位置</u-button>
              </block>

              <block v-if="item.status == 4">
                <u-button size="mini" :plain="true" style="margin-right: 32rpx" :hair-line="true"
                  type="primary">评价</u-button>
              </block>

            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore margin-top="10" margin-bottom="40" :status="loadingState" />

    <betone-tabbar ref="tabbarRef" />
    <betone-loading ref="BetLoading" />
  </view>
</template>

<script>
export default {

  data() {
    return {
      searchInfo: {
        name: "",
        status: '',//状态
      },
      list: [
        {
          name: "全部",
          key: "",
        },
        {
          name: "待提报",
          key: "-1",
        },
        {
          name: "维修中",
          key: "",
        },
        {
          name: "已完成",
          key: "6",
        },
      ],
      current: 0,
      loadingState: "loadmore",
      isNomore: false,
      noDataFlag: false,
      tagColor: {
        维修中: "#3A62D7",
        待确认: "#81B337",
        待维修: "#3A62D7",
        待提报: "#81B337",
        已完成: "#CECECE"
      },
      orderData: [],
      page: {
        currentPage: 1,
        pageSize: 3,
      },
    };
  },
  computed: {
    noData() {
      return this.orderData && this.orderData.length == 0;
    },
  },
  onReachBottom() {
    if (this.isNomore) {
      return;
    }
    this.page.currentPage++;
    this.getRecordsList();

  },
  onPullDownRefresh() {
    this.isNomore = false
    this.page.currentPage = 1;
    this.getRecordsList();
    uni.stopPullDownRefresh();
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.tabbarRef.getPermission();
      this.getRecordsList()
    });
  },
  methods: {
    getRecordsList() {
      this.$refs.BetLoading.show();
      this.loadingState = "loading";
      let query = {
        current: this.page.currentPage,				          //页数
        size: this.page.pageSize,				            //条数
        dataType: 1,//数据权限
      }

      this.$u.api.getWorkOrderRecords(query).then(res => {
        if (res.code == 200) {

          var totalPage = res.data.total;
          var newOrders = res.data.records;
          if (this.page.currentPage == 1) {
            this.orderData = [];
          }

          this.orderData = [...this.orderData, ...(res.data.records || [])];
          if (newOrders.length == 0) {
            this.loadingState = "nomore";
            this.isNomore = true;
          }
          if (totalPage == this.orderData.length) {
            this.loadingState = "nomore";
            this.isNomore = true;
          }
          this.$refs.BetLoading.hide();
        }
      }).catch(err => {

      })
    },
    searchData() { },
    change(index) {
      this.current = index;
    },
    // 获取状态信息
    statusName(item) {
      if (item == -1) {
        return '待提报'
      }
      if (item == 0) {
        return '待接单'
      }
      if (item == 1 || item == 2 || item == 3) {
        return '待维修'
      }
      if (item == 4) {
        return '维修完成'
      }
      if (item == 5) {
        return '待评价'
      }
      if (item == 6) {
        return '已完成'
      }
    },
    refreshData() {
      this.page.currentPage = 1;
      this.orderData = [];
      this.loadingState = "loading";
      // if (this.tabCurrent == 0) {
      //   this.findByPage();
      // } else {
      //   this.findByIntegralPage();
      // }
      this.getRecordsList();
    },
    // 提报按钮
    subOrder(row) {
      console.log(111111111, row)
    },
    //   跳转详情
    goPage(item) {
      uni.navigateTo({
        url: "/pages/submission/recordsdetails",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-css {
  padding: 0;
  padding-top: var(--status-bar-height);

  .page-search-top {
    height: 210rpx;
    background-color: rgba(248, 248, 248, 1);
    padding: 0 40rpx 0;
  }

  .order-box {
    margin-top: 20rpx;

    .order-item {
      height: 414rpx;
      margin: 0 24rpx 20rpx;
      border-radius: 20rpx;
      background: #fff;
      display: flex;
      flex-direction: column;

      .item-top {
        height: 114rpx;
        border-bottom: 1px solid rgba(239, 239, 239, 1);
        display: flex;
        flex-direction: row;
        width: 100%;

        .item-left {
          flex: 1;

          text {
            display: block;
          }

          .item-orderNo {
            color: rgba(51, 51, 51, 1);
            font-size: 28rpx;
            padding: 12rpx 0 0 26rpx;
          }

          .item-time {
            color: rgba(190, 190, 190, 1);
            font-size: 24rpx;
            padding: 12rpx 0 0 26rpx;
          }
        }

        .item-right {
          width: 132rpx;
          height: 48rpx;
          margin: 36rpx 24rpx 0 0;
        }
      }

      .item-con {
        flex: 1;
        display: flex;
        flex-direction: row;

        .con-left {
          width: 150rpx;
          height: 150rpx;
          margin: 24rpx 28rpx 0 28rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .con-right {
          flex: 1;
          margin-right: 24rpx;
          display: flex;
          flex-direction: column;

          text {
            display: block;
          }

          .con-title {
            margin-top: 12rpx;
            line-height: 60rpx;
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
          }

          .con-content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: rgba(108, 108, 108, 1);
            font-size: 24rpx;
            line-height: 36rpx;
            margin-top: 14rpx;
            flex: 1;
          }

          .con-btn {
            margin-top: 56rpx;
            margin-bottom: 32rpx;
            display: inline-block;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>