<template>
  <div class="bgColor">
    <div slot="content" class="scroll-wrapper" style="height:100%;">
      <div class="demo" style="height:100%;">
        <div class="header">巡检列表</div>
        <div class="seatchHeader">
          <div class="search fl">
            <input
              class="searchInp"
              type="text"
              v-model="title"
              placeholder="搜索"
              @input="searchData()"
            />
          </div>
          <button class="selectBtn fr" @click="showPicker">筛选</button>
        </div>
        <div class="scroll-list-wrap">
          <cube-scroll
            ref="scroll"
            :data="items"
            :options="options"
            @pulling-down="onPullingDown"
            @pulling-up="onPullingUp" style="height:100%;"
          >
            <!-- <cube-select
              class="fr"
              v-model="stateValue"
              :options="stateData"
              @change="stateChange()"
            ></cube-select>-->
            <div class="conentBox">
              <div
                class="conent"
                v-for="(item, index) in items"
                @click="toDetail(item)"
                :key="index"
              >
                <div class="head">
                  <p>
                    <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
                    巡检单号：{{ item.sign }}
                    <span
                      :class="{
                        btn: true,
                        zhixingzhong: item.state == 0,
                        yiwancheng: item.state == 1
                      }"
                      >{{ item.stateName }}</span
                    >
                  </p>
                </div>
                <div class="center">
                  <p>
                    <span class="fl">巡检主题：</span>
                    <span class="grayFont overflowEllipsis2">{{
                      item.inspection.title
                    }}</span>
                  </p>
                </div>
                <div class="bottom">
                  <i
                    :class="{
                      iconfont: true,
                      'icon-yiyuqi': item.overdueType == 0,
                      'icon-zhengchang': item.overdueType == 1,
                      'icon-jijiang': item.overdueType == 2,
                      newPapir: true
                    }"
                  ></i>
                  <span>逾期时间：{{ item.overdueTime }}</span>
                </div>
              </div>
            </div>
            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
              <div
                v-if="props.pullDownRefresh"
                class="cube-pulldown-wrapper"
                :style="props.pullDownStyle"
              >
                <div
                  v-show="props.beforePullDown"
                  class="before-trigger"
                  :style="{ paddingTop: props.bubbleY + 'px' }"
                >
                  <span
                    :class="{
                      rotate: props.bubbleY > pullDownRefreshThreshold - 40
                    }"
                    >↓</span
                  >
                </div>
                <div class="after-trigger" v-show="!props.beforePullDown">
                  <div v-show="props.isPullingDown" class="loading">
                    <cube-loading></cube-loading>
                  </div>
                  <div v-show="!props.isPullingDown" class="text">
                    <span class="refresh-text">更新成功</span>
                  </div>
                </div>
              </div>
            </template>
            <div class="wushuju" v-show="!loadShow && !items.length">
              <img src="./../../static/images/wushuju.svg" alt />
              <p>暂无数据</p>
            </div>
          </cube-scroll>
        </div>
      </div>
    </div>
    <load-ing v-show="loadShow"></load-ing>
  </div>
</template>
<script>
import { debounce } from 'lodash';
import CubePage from "../components/cube-page.vue";
import SwitchOption from "../components/switch-option";
import InputOption from "../components/input-option";
import SelectOption from "../components/select-option";
import { formatDate } from "./../components/js/date.js";
import LoadIng from "./../views/loading.vue";
export default {
  data() {
    return {
      //   items: _foods,
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      menu: JSON.parse(localStorage.getItem("menu")),
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      items: [],
      pullDownRefresh: true,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: "Refresh success",
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "加载更多",
      pullUpLoadNoMoreTxt: "没有更多数据",
      customPullDown: true,
      title: "", //搜索内容
      stateData: [
        {
          text: "全部",
          value: "all"
        },
        {
          text: "待处理",
          value: "todo"
        },
        {
          text: "处理过",
          value: "done"
        }
      ],
      stateValue: "todo",
      sum: 10,
      idx: 0,
      stateClass: "",
      loadShow: true,
    };
  },
  components: {
    CubePage,
    SwitchOption,
    InputOption,
    SelectOption,
    LoadIng
  },
  computed: {
    options() {
      return {
        pullDownRefresh: this.pullDownRefreshObj,
        pullUpLoad: this.pullUpLoadObj,
        scrollbar: true
      };
    },
    pullDownRefreshObj: function() {
      return this.pullDownRefresh
        ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            txt: this.pullDownRefreshTxt
          }
        : false;
    },
    pullUpLoadObj: function() {
      return this.pullUpLoad
        ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          }
        : false;
    }
  },
  methods: {
    // 查看详情
    toDetail(item) {
      console.log(item);
      // return;2020年4月27日23:44:23
      var bxr = JSON.parse(localStorage.getItem("login_requester")); //bababa
      if(item.processUser){
        item.processUser.name = bxr.name;
        item.processUser.phone = bxr.mphone;
      }
      if (item.state == 1) {
        this.$router.push({
          name: "InspectionDoneDetail",
          params: {
            data: item
          }
        });
      } else {
        let chuli = false;
        let chuliFlag = false;
        // 判断权限
        for (let i = 0; i < this.menu.length; i++) {
          if (this.menu[i].link == "xunjianliebiao_chuli") {
            chuli = true;
          }
        }
        //判断状态和对象
        if (item.inspection.dictionary.value == 1) {
          // 按巡检人员
          if (
            item.processUser.id == this.loginUser.id &&
            item.stateName == "执行中"
          ) {
            chuliFlag = true;
          } else {
            chuliFlag = false;
          }
        } else if (item.inspection.dictionary.value == 3) {
          // 按工作组
          var hasGroup = this.loginUser.group.some(v => v.id == item.group.id);
          if (hasGroup && item.stateName == "执行中") {
            chuliFlag = true;
          } else {
            chuliFlag = false;
          }
        } else if (item.inspection.dictionary.value == 4) {
          // 系统默认
          if (item.online) {
            // 线上人
            if (
              item.processUser.id == this.loginUser.id &&
              item.stateName == "执行中"
            ) {
              chuliFlag = true;
            } else {
              chuliFlag = false;
            }
          } else {
            // 线下组
            var hasGroup = this.loginUser.group.some(
              v => v.id == item.group.id
            );
            if (hasGroup && item.stateName == "执行中") {
              chuliFlag = true;
            } else {
              chuliFlag = false;
            }
          }
        }
        if (chuli && chuliFlag) {
          this.$router.push({
            name: "InspectionDetail",
            params: {
              data: item
            }
          });
        } else {
          this.$router.push({
            name: "InspectionDoneDetail",
            params: {
              data: item
            }
          });
        }
      }
      window.localStorage.setItem("insDetailInfo", JSON.stringify(item));
    },
    getParamsState() {
      console.log(this.$route.params.state)
      if (this.$route.params.state) {
        console.log(this.$route.params.state);
        this.stateValue = this.$route.params.state;
      }
    },
    showPicker() {
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: "",
          data: [this.stateData],
          selectedIndex: [1],
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        });
      }
      this.picker.show();
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      console.log(selectedVal, selectedIndex, selectedText);

      this.stateValue = selectedVal[0];
      this.loadShow = true;
      this.items = [];
      this.getData();
    },
    cancelHandle() {},
    // 搜索
    searchData:debounce(function () {
      // 处理输入变化事件的逻辑
      this.loadShow = true;
      this.items=[]
      this.getData()
    }, 300),
    // 获取列表
    getData() {
      console.log(this.stateValue);
      var that = this;
      // that.items.length=0;
      let postData = {
        assignee: that.loginUser.id,
        idx: that.idx,
        sum: that.sum,
        inspectionProcessActual: {
          // inspection: {
          //   title: that.title,
          //   executeUser: { id: that.loginUser.id }
          // }
          typeSearch: that.title
          // processUser:{
          //   id:that.loginUser.id
          // }
        },
        searchType: that.stateValue
      };
      if (that.stateValue === "todo") {
        // 待处理添加筛选条件
        console.log(postData, "2022年5月30日");
        postData.candidateGroups = that.loginUser.group
          .map(v => v.id)
          .toString();
      } else {
        delete postData.candidateGroups;
      }
      this.$http
        .post(
          "service/bpm/InspectionProcessActual/fetchServiceTasks/ALL",
          postData
        )
        .then((res) => {
          if (res.data.data.length > 0) {
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].createTime) {
                res.data.data[i].createTime = formatDate(
                  new Date(res.data.data[i].createTime),
                  "yyyy-MM-dd hh:mm"
                );
              }
            }
            if (this.idx) {
              this.items = this.items.concat(res.data.data);
            } else {
              this.items = res.data.data;
            }
          } else {
            this.$refs.scroll.forceUpdate();
          }
          that.loadShow = false;
        });
    },
    onPullingDown() {
      // 模拟更新数据
      this.idx = 0;
      this.sum = 10;
      this.getData();
    },
    onPullingUp() {
      this.idx = this.idx + 1;
      this.getData();
    },
  },
  mounted() {
    this.getParamsState();
    setTimeout(()=>{
      this.getData();
    },0)
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.scroll-list-wrap {
  height: 90vh;
  border-radius: 5px;
  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden;
}

.foods-wrapper {
  .food-item {
    display: flex;

    /* padding: 18px */
    /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
    /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
    &:last-child {
      border-none();
      margin-bottom: 0;
    }

    .icon {
      flex: 0 0 57px;
      margin-right: 10px;
    }

    .food-content {
      flex: 1;

      .name {
        margin: 2px 0 8px 0;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: rgb(7, 17, 27);
      }

      .description, .extra {
        line-height: 10px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }

      .description {
        line-height: 12px;
        margin-bottom: 8px;
      }

      .extra {
        .count {
          margin-right: 12px;
        }
      }

      .price {
        font-weight: 700;
        line-height: 24px;

        .now {
          margin-right: 8px;
          font-size: 14px;
          color: rgb(240, 20, 20);
        }

        .old {
          text-decoration: line-through;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }
      }

      .cartcontrol-wrapper {
        position: absolute;
        right: 0;
        bottom: 12px;

        .scroll-wrapper {
          .cube-pulldown-wrapper {
            .before-trigger {
              font-size: 30px;
              line-height: 30px;
              align-self: flex-end;

              span {
                display: inline-block;
                transition: all 0.3s;
                color: #666;

                &.rotate {
                  transform: rotate(180deg);
                }
              }
            }

            .after-trigger {
              .refresh-text {
                color: grey;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
.demo{
  display:flex;
  flex-direction:column;
}
.bgColor {
  background-color: white;
}
.food-item {
  border-top: 0.16rem rgb(238, 238, 238) solid;
}
.food-content {
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title {
  display: flex;
  justify-content: space-between;
  height: 0.7rem;
  line-height: 0.7rem;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  padding: 0 0.24rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title i {
  font-size: 0.32rem;
  color: #005395;
}
.title div:nth-child(1) {
  font-size: 0.32rem;
}
.title div:nth-child(1) span {
  display: inline-block;
  margin-left: 0.08rem;
}
.title div:nth-child(2) {
  padding: 0.05rem 0.3rem;
  /* border: 0.01rem rgb(0,0,255) solid; */
  border-radius: 16px;
  /* color: rgb(0,0,255); */
  height: 0.25rem;
  line-height: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.24rem;
}
.weishouli {
  color: #991f00;
  border: 0.01rem #991f00 solid;
  background-color: #f4e8e5;
}
.bushouli {
  color: #666666;
  background-color: #eeeeee;
  border: 0.01rem #666666 solid;
}
.chulizhong {
  color: #003057;
  background-color: #e5eaee;
  border: 0.01rem #003057 solid;
}
.daipingjia {
  color: #825b00;
  background-color: #f2eee5;
  border: 0.01rem #825b00 solid;
}
.yijiejue {
  color: #40a19c;
  background-color: #ebf5f5;
  border: 0.01rem #40a19c solid;
}
.yichehui {
  color: #48a843;
  background-color: #ecf6ec;
  border: 0.01rem #48a843 solid;
}
.timeBox {
  display: flex;
  justify-content: space-between;
  font-size: 0.24rem;
  color: #999999;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0 0.24rem 0 0.64rem;
}
.wushuju {
  margin-top: 2.4rem;
  text-align: center;
  color: #999;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
.demo {
  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    color: #fff;
    font-size: 0.37rem;
    background: linear-gradient(#2e2f32, #414246);
  }
  .seatchHeader {
    width: 100%;
    background-color: #eee;
    padding: 0.16rem;
    box-sizing: border-box;
    .search {
      width: 5.74rem;
      height: 0.56rem;
      font-size: 0.26rem;
      color: #b2b2b2;
      box-sizing: border-box;
      .searchInp {
        text-align: center;
        background-color: #fff;
        width: 100%;
        height: 100%;
        border-radius: 0.09rem;
        border: none;
        &:focus {
          outline: none;
        }
      }
    }
    .selectBtn {
      width: 1.2rem;
      height: 0.56rem;
      font-size: 0.32rem;
      color: #005395;
      border-color: #005395;
      background-color: #fff;
      border-radius: 0.09rem;
      &:focus {
        outline: none;
      }
    }
  }
}
.conentBox {
  width: 100%;
  .conent {
    font-size: 0.32rem;
    font-weight: 400;
    line-height: 0.45rem;
    border-bottom: 0.16rem solid #e5e5e5;
    .head {
      border-bottom: 0.01rem solid #e6e6e6;
      p {
        padding: 0.24rem 0.48rem;
        i {
          color: #00559d;
        }
        .btn {
          float: right;
        }
      }
    }
    .center {
      color: #333333;
      border-bottom: 0.01rem solid #e6e6e6;
      padding: 0.24rem 0.48rem;
      p {
        .grayFont {
          color: #666;
        }
      }
    }
    .bottom {
      overflow: hidden;
      line-height: 0.86rem;
      border-bottom: 0.01rem solid #e6e6e6;
      font-size: 0.24rem;
      color: #999;
      padding: 0 0.24rem 0 0.48rem;
    }
  }
}
</style>
