<template>
  <view class="content">
    <view
      v-for="(item, index) in listCards"
      :key="index"
      class="example-box"
      style="position: relative; flex: 1"
      @click="toDetail(item, index)"
    >
      <dev-block
        :title="item.title"
        :titleNumber="item.titleNumber"
        :note="item.note"
        :extra="item.extra"
        :tagType="item.tagType"
        :contentList="item.contentList"
      ></dev-block>
      <uni-icons
        type="arrowright"
        size="20"
        color="#666"
        class="arrowright"
      ></uni-icons>
    </view>
    <uni-load-more :status="loading_status" v-if="!show_no"></uni-load-more>
    <xinsoft-no-record
      noRecordContent="暂无满足条件的内容,请输入关键字重新搜索"
      v-if="show_no"
    ></xinsoft-no-record>
    <view class="goHome" @click="goMain()">
      <img src="../../static/img/gohome.png" />
    </view>
  </view>
</template>

<script>
import devBlock from "@/components/xinsoft-dev-block/xinsoft-dev-block.vue";
import uniIcons from "@/components/uni-icons/uni-icons.vue";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import xinsoftNoRecord from "@/components/xinsoft-no-record/xinsoft-no-record.vue";
export default {
  components: {
    devBlock,
    uniIcons,
    uniLoadMore,
    xinsoftNoRecord,
  },
  data() {
    return {
      search_text: "",
      listCards: [],
      themeColor: "#000000",
      titleColor: "#666666",
      pagenumber: 1, //当前第几页
      pagesize: 20, //每页加载数据条数
      loading_status: "more", //more（loading前）、loading（loading中）、noMore（没有更多了）
      show_no: false,
    };
  },
  onShow() {
    var _this = this;
    this.$eventHub.$on("changestate", function (data) {
      var datajson = data;
      if (datajson.id) {
        for (var i = 0; i < _this.listCards.length; i++) {
          if (_this.listCards[i].id == datajson.id) {
            var str = _this.listCards[i].title;
            _this.listCards[i].title = str.split("-")[0] + "-" + datajson.state;
          }
        }
      }
      _this.$eventHub.$off("changestate");
    });
  },
  created() {
    this.getDateList();
  },
  //滚动到底部加载下一页
  onReachBottom(obj) {
    if (this.loading_status == "noMore") {
      return false;
    }
    this.pagenumber++;
    this.getDateList();
  },
  //下拉刷新
  onPullDownRefresh() {
    this.listCards = [];
    this.pagenumber = 1;
    this.loading_status = "more";
    this.show_no = false;
    this.getDateList();
  },
  methods: {
    //获取列表数据
    getDateList() {
      this.loading_status = "loading";
      var filterRes = {};
      filterRes.pageno = this.pagenumber;
      filterRes.pagesize = this.pagesize;
      filterRes.divceName = this.search_text;
      this.$http
        .request({
          url: "/apis/repairEvent/eventList",
          params: filterRes,
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          if (!res.data.data) {
            if (this.listCards.length == 0) {
              this.show_no = true;
            } else {
              this.loading_status = "noMore";
            }
          } else if (res.data.data.datas.length < this.pagesize) {
            this.loading_status = "noMore";
          } else {
            this.loading_status = "more";
          }

          if (res.data.code == 0) {
            this.listCards = this.listCards.concat(
              this.formaterData(res.data.data.datas)
            );
          }
        })
        .catch((err) => {
          console.log(err);
          this.loading_status = "noMore";
        });
    },
    //时间格式化
    setTime1(time) {
      if (time) {
        var t = time.split("-");
        return t[0] + "/" + t[1] + "/" + t[2].substring(0, 8);
      } else {
        return " ";
      }
    },
    //设置状态颜色
    setTag(val) {
      if (val == 50) {
        return "106";
      } else if (val == 999) {
        return "108";
      } else {
        return "106";
      }
    },
    //列表数据格式化
    formaterData(data) {
      var resData = [];
      data.forEach((vals, index) => {
        var combineJSON = {
          id: vals.reventId,
		  title:vals.deviceSerialno + "/" + vals.deviceName,
        //   title: vals.workOrderNo + "-" + vals.reventStatusName,
		  titleNumber:vals.workOrderNo + "-"+vals.reventLevelName,
		//   titleNumber: vals.deviceSerialno
        //     ? "[" + vals.deviceSerialno + "]" + vals.deviceName
        //     : " ",
          contentList: [
            {
              id: 2,
              isDouble: true,
              labelName: "报修人",
              labelContent: vals.createUserName,
            },
			{
              id: 4,
              isDouble: true,
              labelName: "维修责任人",
              labelContent: vals.engineerUserName,
            },
            {
              id: 1,
              isDouble: false,
              labelName: "报修时间",
              labelContent: this.setTime1(vals.createTime),
            },

            {
              id: 3,
              isDouble: false,
              labelName: "要求完成时间",
              labelContent: vals.planTime,
            },
            
          ],
          extra: vals.reventStatusName,
          tagType: this.setTag(vals.reventStatusId),
        };
        resData.push(combineJSON);
      });
      return resData;
    },
    //查看详情
    toDetail(item, index) {
      if (item.id == undefined) {
        // this.$http.request({
        // 	url: '/apis/patrolRecord/addRecordByPlan',
        // 	params: {inFormId:item.noticeId,patrolPlanId:item.patrolPlanId},
        // }).then(res => {
        // 	console.log(res)
        // 	if (res.statusCode == 200) {
        // 		this.listCards[index].id=res.data.id;
        // 		uni.navigateTo({
        // 		    url: "patrolDetail?id="+res.data.id
        // 		});
        // 		}
        // }).catch(err => {
        // });
      } else {
        uni.navigateTo({
          url: "repairDetail?id=" + item.id,
        });
      }
    },
  },
  onPageScroll: function (e) {
    uni.hideKeyboard();
  },
  //搜索框文本变化
  onNavigationBarSearchInputChanged(n) {
    this.search_text = n.text;
  },
  //点击软键盘搜索按钮
  onNavigationBarSearchInputConfirmed() {
    this.listCards = [];
    this.pagenumber = 1;
    this.loading_status = "more";
    this.show_no = false;
    this.getDateList();
  },
  //点击搜索按钮
  onNavigationBarButtonTap(obj) {
    this.listCards = [];
    this.pagenumber = 1;
    this.loading_status = "more";
    this.show_no = false;
    this.getDateList();
  },
};
</script>

<style>
page {
  height: 100%;
}
</style>
<style scoped>
>>> .noRecord {
  padding-top: 30%;
  margin-top: 0 !important;
}
.content {
  position: relative;
}
.filter_container {
  position: fixed;
  width: 50%;
  top: var(--window-top);
  background-color: #fff;
  height: 40px;
  z-index: 2;
  padding-top: 7px;
  box-sizing: border-box;
}

>>> .doubleList:nth-of-type(1) {
  width: 60%;
}

>>> .doubleList:nth-of-type(2) {
  width: 40%;
}

>>> .doubleList:nth-of-type(3) {
  width: 60%;
}
>>> .doubleList:nth-of-type(4) {
  width: 40%;
}
>>> .dev-label {
  white-space: nowrap;
}
>>> .select-tab-fixed-top {
  right: 0;
  width: 50%;
  z-index: 2;
  top: var(--window-top);
}
>>> .popup-layer {
  position: fixed;
  top: var(--window-top);
  margin-top: 40px;
}
.search_container {
  position: relative;
  padding-left: 30px;
  box-sizing: border-box;
  color: #bdbdbd;
  margin: auto;
  width: 80%;
  height: 26px;
  background-color: #f6f6f6;
  border-radius: 26px;
  font-size: 14px;
  line-height: 26px;
}
.search_icon {
  position: absolute;
  left: 5px;
  top: 3px;
}
.fliter_content {
  position: absolute;
  right: 15px;
  left: 85px;
  height: 100%;
  z-index: 2;
}
.arrowright {
  position: absolute;
  right: 30upx;
  bottom: 30upx;
  font-size: 40upx !important;
}
</style>
