<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-sticky offset-top="1.5rem">
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索内容"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <!-- 内容列表 -->
    <div class="con-list" @touchmove="showIndex = null">
      <van-cell-group
        inset
        v-for="(item, index) in messageList"
        :key="index"
        @click="touchstart(index, item)"
      >
        <van-row gutter="">
          <van-col span="7">隐患单编号：</van-col>
          <van-col span="17">{{ item.businessId }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="7">所属项目：</van-col>
          <van-col span="17">{{ item.proId }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="7">隐患级别：</van-col>
          <van-col span="17">{{ item.hdLev | dangerText}}</van-col>
        </van-row>
        <!-- <van-row gutter="">
          <van-col span="7">发现时间：</van-col>
          <van-col span="17">{{ item.hdDiscoveryTime }}</van-col>
        </van-row> -->
        <van-row gutter="">
          <van-col span="7">适用范围：</van-col>
          <van-col span="17">{{ item.hdRange }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="7">隐患类型：</van-col>
          <van-col span="17">{{ item.hdType }}</van-col>
        </van-row>
        <van-row gutter="">
          <van-col span="7">工单状态：</van-col>
          <van-col span="17">{{ item.taskName }}</van-col>
        </van-row>
        <!-- {{ item.taskName }} -->

        <!-- 长按显示遮罩层 -->
        <van-overlay :show="showIndex == index">
          <div class="wrapper" @click.stop="showIndex = null">
            <van-button round type="primary" @click="goSubmit(item)"
              >上报</van-button
            >
            <van-button round type="warning" @click="goDelete(item)"
              >关闭</van-button
            >
          </div>
        </van-overlay>
      </van-cell-group>
    </div>
    <!-- 暂无数据 -->
    <div
      style="
        width: 100%;
        text-align: center;
        font-size: 0.48rem;
        position: fixed;
        top: 30%;
      "
      v-if="messageList.length==0"
    >
      暂无数据
    </div>
    <tab-bar :index="1"></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import { dangerReturn, dangerReturnDel } from "@/service/danger";
export default {
  components: {
    LHeader,
    tabBar,
  },
  data() {
    return {
      text: "上报退回",
      searchValue: "",
      isHaveNews: false,
      messageList: [],
      Loop: "", // 定时器
      showIndex: null, // 是否显示遮罩层
    };
  },
  created() {
    this.postList();
  },
  methods: {
    postList(select = "") {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0,
      });
      let formdata = new FormData();
      formdata.append("select", select);
      dangerReturn("/hdreport/list", formdata)
        .then((res) => {
          this.$toast.clear();
          this.messageList = res.rows;
          // 判断有无数据返回
          if (this.messageList.length == 0) {
            this.isHaveNews = true;
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    onSearch(val) {
      this.postList(this.searchValue);
    },
    touchstart(index, item) {
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
    },

    // 上报
    goSubmit(data) {
      this.$router.push({
        name: "add-danger",
        params: {
          status: "退回",
          taskId: data.taskId,
        },
      });
      // 存到缓存里 如果路由跳转或者是缓存中有 就是隐患上报退回
      localStorage.setItem("dangerAddTaskId", data.taskId);
      this.showIndex = null;
    },
    // 删除
    goDelete(data) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认要关闭此条隐患吗?",
        })
        .then((r) => {
          console.log(r, "确定");
          this.$toast.loading({
            message: "关闭中...",
            forbidClick: true,
            loadingType: "spinner",
            duration: 0,
          });
          dangerReturnDel(`/hdreport/delete/${data.taskId}`)
            .then((res) => {
              this.$toast.clear();
              this.$toast.success({
                message: "关闭成功",
                duration: 2000,
              });
              this.postList();
            })
            .catch(() => {
              this.$toast.clear();
              this.$toast.fail("关闭失败,请稍后再试");
            });
          this.showIndex = null;
        })
        .catch(() => {
          console.log("错了");
          this.$toast.clear();
          this.showIndex = null;
        });
    },
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
#app {
  font-family: "";
  color: #2c3e50;
}
.con-list {
  padding: 0;
  background-color: #f0f1f5;
  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 0.26667rem;
    padding: 0.25rem;
    font-size: 0.4rem;
    position: relative;
    border-radius: 4%;
    box-shadow: 0px 0px 10px 2px #f3f3f3;
    width: 90%;
    margin: 0.4rem auto;
    .van-row {
      font-size: 0.4rem;
      line-height: 0.8rem;
      margin-bottom: 0;
    }
    .van-overlay {
      position: absolute;
      .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;
      }
    }
  }
}
</style>
