<template>
  <view class="page">
    <view class="example-body" v-if="listCards.length > 0">
      <view
        v-for="(item, index) in listCards"
        :key="index"
        class="example-box"
        style="position: relative; flex: 1"
        @click="toDetail(item)"
      >
        <dev-block
          :title="item.title"
          :titleNumber="item.titleNumber"
          :note="item.note"
          :extra="item.extra"
          :tagType="item.tagType"
          :contentList="item.contentList"
        ></dev-block>
      </view>
      <uni-load-more
        :loadingType="loadingType"
        :contentText="contentText"
      ></uni-load-more>
    </view>
    <view class="example-body" v-else>
      <no-record></no-record>
    </view>
    <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 uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import noRecord from "@/components/xinsoft-no-record/xinsoft-no-record";

export default {
  components: {
    devBlock,
    uniLoadMore,
    noRecord,
  },
  data() {
    return {
      listCards: [],
      fixed: false,
      themeColor: "#000000",
      titleColor: "#666666",
      page: 1, //当前第几页S
      pageSize: 5, //每页加载数据条数
      //上拉刷新，下拉加载
      loadingText: "加载中...",
      loadingType: 0, //定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
      },
      search: "",
    };
  },
  created() {
    this.getDateList({});
  },
  onPullDownRefresh: function () {
    //下拉刷新的时候请求一次数据
    this.getDateList();
  },
  onReachBottom: function () {
    //触底的时候请求数据，即为上拉加载更多
    this.getDateListMore();
  },
  methods: {
    //获取列表数据

    getDateList() {
      var _this = this;
      this.page = 1;
      this.loadingType = 0;
      this.$http
        .request({
          url: "/apis/upkeepPlan/addValidRecords",
          params: {
            pageno: this.page,
            pagesize: this.pageSize,
            deviceName: this.search,
          },
        })
        .then((res) => {
          if (
            !res.data.data ||
            !res.data.data.datas ||
            res.data.data.datas.length == 0
          ) {
            //没有数据
            this.listCards = [];
            uni.hideNavigationBarLoading(); //关闭加载动画
            return;
          }
          if (res.data.code == 0) {
            this.page++; //得到数据之后page+1
            uni.hideNavigationBarLoading();
            uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
            if (res.data.data.datas.length > 0) {
              _this.listCards = _this.formaterData(res.data.data.datas);
            }
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "获取信息失败",
            duration: 2000,
            icon: "none",
          });
        });
    },
    getDateListMore() {
      if (this.loadingType !== 0) {
        //loadingType!=0;直接返回
        return false;
      }
      this.loadingType = 1;
      uni.showNavigationBarLoading(); //显示加载动画
      this.$http
        .request({
          url: "/apis/upkeepPlan/addValidRecords",
          params: {
            pageno: this.page,
            pagesize: this.pageSize,
            deviceName: this.search,
          },
        })
        .then((res) => {
          if (
            !res.data.data ||
            !res.data.data.datas ||
            res.data.data.datas.length == 0
          ) {
            //没有数据
            this.loadingType = 2;
            uni.hideNavigationBarLoading(); //关闭加载动画
            return;
          }
          if (res.data.code == 0) {
            this.page++; //每触底一次 page +1
            this.loadingType = 0; //将loadingType归0重置
            uni.hideNavigationBarLoading(); //关闭加载动画
            var resultData = this.formaterData(res.data.data.datas);
            this.listCards = [...this.listCards, ...resultData];
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "没有更多数据了",
            duration: 2000,
            icon: "none",
          });
        });
    },
    formaterData(data) {
      var resData = [];
      data.forEach((vals, index) => {
        var combineJSON = {
          id: vals.id,
		  title:vals.device_serialno + "/" + vals.deviceName,
          titleNumber: vals.work_orderNo
            ? vals.work_orderNo:'--',
        //   title: vals.work_orderNo
        //     ? vals.work_orderNo + "-" + vals.result_name
        //     : vals.result_name,
        //   titleNumber: "[" + vals.device_serialno + "]" + vals.deviceName,
          contentList: [
            {
              id: 1,
              isDouble: true,
              labelName: "保养名称",
              labelContent: vals.planName,
            },
            {
              id: 2,
              isDouble: true,
              labelName: "保养负责人",
              labelContent: vals.username,
            },
            {
              id: 6,
              isDouble: false,
              labelName: "计划开始时间",
              labelContent: vals.start_time,
            },
            {
              id: 7,
              isDouble: false,
              labelName: "计划结束时间",
              labelContent: vals.end_time || "-",
            },
            // {
            // 	id: 3,
            // 	isDouble: true,
            // 	labelName: '保养工时',
            // 	labelContent: (vals.man_hour)?vals.man_hour+'小时':'小时'
            // },
            // {
            // 	id: 4,
            // 	isDouble: true,
            // 	labelName: '保养工时费',
            // 	labelContent: vals.manhourCost?vals.manhourCost+'元':'元'
            // },{
            // 	id: 5,
            // 		isDouble: true,
            // 		labelName: '保养材料费',
            // 		labelContent: vals.cost?vals.cost+'元':'元'
            // },{
            // 	id: 6,
            // 	isDouble: false,
            // 	labelName: '保养时间',
            // 	labelContent:vals.start_time+'~'+(vals.end_time||'-')
            // }
          ],
          extra: vals.result_name,
          tagType: this.setTag(vals.result),
        };
        resData.push(combineJSON);
      });
      return resData;
    },
    //设置状态颜色
    setTag(val) {
      if (val == 50) {
        return "106";
      } else if (val == 999) {
        return "108";
      } else {
        return "106";
      }
    },
    //查看详情
    toDetail(item) {
      uni.navigateTo({
        url: "upkeepDetail?id=" + item.id,
      });
    },
  },

  onNavigationBarSearchInputConfirmed(e) {
    let text = e.text;
    if (!text) {
      uni.showModal({
        title: "提示",
        content: "请输入搜索设备编号或设备名称",
        success: (res) => {
          if (res.confirm) {
          }
        },
      });
      return;
    } else {
      this.search = text;
      uni.hideKeyboard();
      this.getDateList();
    }
  },
  /**
   *  点击导航栏 buttons 时触发
   */
  onNavigationBarButtonTap() {
    var inputText = document.querySelector("input").value;
    // const currentWebview = this.$mp.page.$getAppWebview();
    // var inputText = currentWebview.getTitleNViewSearchInputText();
    if (inputText) {
      this.search = inputText;
      // this.wwebViewContent.nameAndType = inputText;
      uni.hideKeyboard();
      this.getDateList();
    } else {
      uni.showModal({
        title: "提示",
        content: "请输入搜索设备编号或设备名称",
        success: (res) => {},
      });
    }
  },
};
</script>

<style scoped>
.topBox {
  /* position: fixed; */
  width: 100%;
  height: 40px;
  /* top: var(var(--window-top)); */
  z-index: 2;
  box-sizing: border-box;
  background-color: #fff;
}
.filter_container {
  padding-top: 7px;
  box-sizing: border-box;
  -webkit-flex: 1;
  flex: 1;
  position: relative;
}
</style>
