<template>
  <div>
    <div class="message-wrap">
      <!-- 搜索 -->
      <div class="search-wrap">
        <van-search v-model="searchVal" placeholder="搜索" @input="onSearch" />
      </div>
      <!-- 内容列表 -->
      <div class="con-list" @touchmove="showIndex = null">
        <van-cell-group
          inset
          v-for="(item, index) in messageList"
          :key="index"
          @click="touchstart(index, item)"
        >
         <div class="approval-title">{{ item.taskName }} <span class="title-icon">待处理</span></div> 
          <div><span>作业类型</span>：{{ item.businessDes }}</div>
          <div><span>作业单号</span>：{{ item.businessId }}</div>
          <div><span>申请人</span>：{{ item.createBy }}</div>
          <div><span>作业地点</span>：{{ item.place }}</div>
          <div><span>开始时间</span>：{{ item.startTime }}</div>
          <van-overlay :show="showIndex == index">
            <div class="wrapper" @click.stop="closeOverlay">
              <van-button round type="info" @click="onClick(item)">
                处理
              </van-button>
            </div>
          </van-overlay>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { getFun,postFun } from '@/service/table'
import {debounce} from '@/utils/common.js'
export default {
  data() {
    return {
      searchVal: "",
      showIndex: null, // 是否显示遮罩层
      messageList: []
    };
  },
  mounted() {
    this.getList(this.searchVal);
  },
  methods: {
    // 搜索事件
    onSearch:debounce(function(){
        this.getList(this.searchVal)
     },500),
    getList(val) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      let formdata = new FormData();
      formdata.append("processDefinitionKey", "dhzy_main,yxkj_main");
      formdata.append("search", val);
      postFun("dhzyreport/list", formdata)
        .then(res => {
          this.messageList = res.data;
        })
     
    },
    touchstart(index, item) {
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
    },
    closeOverlay() {
      this.showIndex = null;
    },
    onClick(data) {
       this.showIndex = null;
       if (data.businessDes == "" || data.taskName == "") return;
      // 进入对应的操作页面
      switch (data.businessDes + "-" + data.taskName) {
        // 作业审批的情况
        case "动火作业-作业负责人确认": case "有限空间作业-作业负责人确认":
          this.$router.push({
            name: "approval-handle",
            params: {
              data: data
            }
          });
          break;
        case "动火作业-项目负责人审批": case "有限空间作业-项目负责人审批":
          this.$router.push({
            name: "project-handle",
            params: {
              data: data
            }
          });
          break;
        case "动火作业-会签部室会签": case "有限空间作业-会签部室会签":
          this.$router.push({
            name: "safe-dept-handle",
            params: {
              data: data
            }
          });
          break;
        case "动火作业-安全管理部门审批": case "有限空间作业-安全管理部门审批":
          this.$router.push({
            name: "safe-officer-handle",
            params: {
              data: data
            }
          });
          break;
        case "动火作业-主管领导审批": case "有限空间作业-主管领导审批":
          this.$router.push({
            name: "executive-director",
            params: {
              data: data
            }
          });
          break;
        // 现场作业的情况
        case "动火作业-重点人员签到":
          this.$router.push({
            name: "hot-work-confirm",
            params: {
              data: data
            }
          });
          break;
        case "动火作业-现场人员签字":
          this.$router.push({
            name: "site-confirm",
            params: {
              data: data
            }
          });
          break;
        case "动火作业-结束作业":
          this.$router.push({
            name: "work-patrol",
            params: {
              data: data
            }
          });
          break;
        case "动火作业-安全部门结束确认":
          this.$router.push({
            name: "check-accept",
            params: {
              data: data
            }
          });
          break;
        case "有限空间作业-重点人员签到":
          this.$router.push({
            name: "job-affirm",
            params: {
              data: data
            }
          });
          break;
        case "有限空间作业-交底上传":
          this.$router.push({
            name: "job-sign",
            params: {
              data: data
            }
          });
          break;
        case "有限空间作业-安全措施确认":
          this.$router.push({
            name: "safe-disclosure",
            params: {
              data: data
            }
          });
          break;
        case "有限空间作业-作业前确认":
          this.$router.push({
            name: "begin-work",
            params: {
              data: data
            }
          });
          break;

        case "有限空间作业-结束作业":
          this.$router.push({
            name: "end-work",
            params: {
              data: data
            }
          });
          break;
        default:
          break;
      }
    },
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.message-wrap {
  padding: 10px 10px 0;
  background-color: #f0f1f5;
  // 标签

  // 搜索
  .search-wrap {
    margin: 0 0 0.26667rem 0;
    .van-search {
      border-radius: 5px;
      padding: 5px 12px;
    }
    .van-search__content {
      background-color: #ffffff;
    }
  }
  //  内容
  .con-list {
    .van-cell-group--inset {
      margin: 0;
      margin-bottom: 0.266667rem;
      padding: 0.266667rem;
      position: relative;
      .approval-title{
        font-weight: bold;
        color: #000;
        .title-icon{
            text-align: center !important;
            font-weight: normal;
            background-color: #2980f7;
            color: white;
            font-size: .32rem;
            padding: .026667rem .08rem;
            height: -webkit-fill-available;
            display: inline;
            margin-left: .266667rem;
            position: relative;
            top: -0.026667rem;
        }
      }
    div {
        line-height: 0.7rem;
        font-size: 0.4rem;
        span {
          width: 1.733333rem;
          display: inline-block;
          text-align-last: justify;
        }
      }
      .operation {
        text-align: right;
        margin-right: 5px;
        color: #2980f7;
        font-weight: normal;
      }
      .van-overlay {
        position: absolute;
        .wrapper {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          height: 100%;
          .van-button__text {
            width: initial;
          }
        }
      }
    }
  }
}
</style>
