<template>
  <div>
    <van-sticky>
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <!--  -->
    <!-- tab标签 -->
    <van-tabs
      @click="onClickTab"
      animated
      color="#2980F7"
      :sticky="true"
      offset-top="1.5rem"
    >
      <van-tab title="隐患整改">
        <!-- 内容列表 -->
        <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="5">所属项目:</van-col>
              <van-col span="19">{{ item.proId }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">隐患级别:</van-col>
              <van-col span="19">{{ item.hdLev }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">适用范围:</van-col>
              <van-col span="19">{{ item.hdRange }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">隐患类型:</van-col>
              <van-col span="19">{{ item.hdType }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">发现时间:</van-col>
              <van-col span="19">{{ item.hdDiscoveryTime }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">超期标识:</van-col>
              <van-col span="19">{{ item.dueDate | formatTime }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">状态:</van-col>
              <van-col span="19">{{ item.taskName }}</van-col>
            </van-row>

            <!-- 长按显示遮罩层 -->
            <van-overlay :show="showIndex == index">
              <div class="wrapper" @click.stop="showIndex = null">
                <van-button round type="primary" @click="goDetail(item)"
                  >详情</van-button
                >
                <van-button round type="info" @click="goConfirm(item)"
                  >确认</van-button
                >
                <van-button round type="info" @click="goDelay(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="isHaveNews"
        >
          暂无数据
        </div>
      </van-tab>
      <van-tab title="隐患整改（已退回）">
        <!-- 内容列表 -->
        <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="5">所属项目:</van-col>
              <van-col span="19">{{ item.proId }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">隐患级别:</van-col>
              <van-col span="19">{{ item.hdLev }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">适用范围:</van-col>
              <van-col span="19">{{ item.hdRange }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">隐患类型:</van-col>
              <van-col span="19">{{ item.hdType }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">发现时间:</van-col>
              <van-col span="19">{{ item.hdDiscoveryTime }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">超期标识:</van-col>
              <van-col span="19">{{ item.dueDate | formatTime }}</van-col>
            </van-row>
            <van-row gutter="">
              <van-col span="5">状态:</van-col>
              <van-col span="19">{{ item.taskName }}</van-col>
            </van-row>

            <!-- 长按显示遮罩层 -->
            <van-overlay :show="showIndex == index">
              <div class="wrapper" @click.stop="showIndex = null">
                <van-button round type="primary" @click="goDetail(item)"
                  >详情</van-button
                >
                <van-button round type="info" @click="goConfirm(item)"
                  >确认</van-button
                >
                <van-button round type="info" @click="goDelay(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="isHaveNews"
        >
          暂无数据
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { dangerRect, list1, list2 } from "@/service/danger";
export default {
  components: {
    LHeader,
  },
  data() {
    return {
      text: "隐患整改",
      searchValue: "",
      isHaveNews: false,
      messageList: [],
      Loop: "", // 定时器
      showIndex: null, // 是否显示遮罩层
    };
  },
  created() {
    this.onClickTab(0);
  },
  methods: {
    onSearch(val) {},
    onClickTab(val) {
      this.showIndex = null;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0,
      });

      // 这里根据tab切换调用接口
      [list1, list2]
        [val]()
        .then((res) => {
          this.$toast.clear();
          this.messageList = res.rows;
          // 判断有无数据返回
          if (this.messageList.length == 0) {
            this.isHaveNews = true;
          }
        })
        .catch(() => {
          this.$toast.clear();
          this.$toast.fail("加载失败,请稍后再试");
        });
    },

    // 此接口暂时废弃
    // postList() {
    //   this.$toast.loading({
    //     message: "加载中...",
    //     forbidClick: true,
    //     loadingType: "spinner",
    //     duration: 0,
    //   });
    //   dangerRect("/rectification/list")
    //     .then((res) => {
    //       this.$toast.clear();
    //       this.messageList = res.rows;
    //       // 判断有无数据返回
    //       if (this.messageList.length == 0) {
    //         this.isHaveNews = true;
    //       }
    //     })
    //     .catch(() => {
    //       this.$toast.clear();
    //       this.$toast.fail("加载失败,请稍后再试");
    //     });
    // },

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

    // 详情
    goDetail(data) {
      this.$router.push({
        name: "normal-detail",
        params: {
          id: data.taskId,
        },
      });
      this.showIndex = null;
    },
    // 确认
    goConfirm(data) {
      this.$router.push({
        name: "change-info",
        params: {
          data: data,
        },
      });
      this.showIndex = null;
    },
    // 延期
    goDelay(data) {
      this.$router.push({
        name: "delay-info",
        params: {
          taskId: data.taskId,
          taskName: data.taskName,
        },
      });
      this.showIndex = null;
    },
  },
  filters: {
    formatTime: function (val) {
      if (new Date(val).getTime() <= new Date().getTime()) {
        return "超期";
      } else if (
        new Date(val).getTime() >= new Date().getTime() &&
        new Date(val).getTime() <= new Date().getTime() + 259200000
      ) {
        return "临期";
      } else {
        return "正常";
      }
    },
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.con-list {
  padding: 10px 10px 0.533333rem;
  background-color: #f0f1f5;
  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 13px;
    position: relative;
    .van-row {
      margin-bottom: 0.133333rem;
      line-height: 0.64rem;
    }
    .van-overlay {
      position: absolute;
      .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;
      }
    }
  }
}
</style>
