<template>
  <!-- 提交 -->
  <div>
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <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>
    <van-tabs
      v-model="active"
      @change="
        postList(searchValue);
        showIndex = null;
      "
      color="#2980f7"
      animated
      :sticky="true"
      offset-top="2.93rem"
    >
      <van-tab v-for="(item, key) in tabs" :key="key" :title="item.title">
        <!-- 内容列表 -->
        <div
          class="con-list"
          @touchmove="showIndex = null"
          v-if="key == active"
        >
          <van-cell-group
            inset
            v-for="(item, index) in messageList"
            :key="index"
            @click="touchstart(index, item)"
          >
            <div style="font-size: 0.45rem;padding: 5px 0;">
              {{ item.name }}
            </div>

            <van-row gutter="">
              <van-col span="17">
                <van-row gutter="">
                  <van-col span="9">发起时间：</van-col>
                  <van-col span="15">{{
                    timestampToTimes(item.startTime) || item.startTime
                  }}</van-col>
                </van-row>
                <van-row gutter="">
                  <van-col span="9">处理人员：</van-col>
                  <van-col span="15">{{ item.leaderUserName }}</van-col>
                </van-row>
              </van-col>
              <van-col span="7" :style="{ color: '#03b615' }">
                {{ item.state }}
              </van-col>
            </van-row>

            <!-- <van-row gutter="">
                <van-col span="7">风险源：</van-col>
                <van-col span="17">{{ item.riskSource }}</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)" v-show="active==0"
                    >确认</van-button
                  > -->
              </div>
            </van-overlay>
          </van-cell-group>
          <div
            style="
              width: 100%;
              text-align: center;
              font-size: 0.48rem;
              position: fixed;
              top: 30%;
            "
            v-if="messageList['length'] == 0"
          >
            暂无数据
          </div>
        </div>
        <!-- 暂无数据 -->
        <!-- {{messageList}} -->
      </van-tab>
    </van-tabs>
    <div
      style="width: 60px;position: fixed;right: 5%;top: 80%;"
      @click="handadd"
    >
      <img src="@/assets/accidentIcon/add.svg" alt="" width="100%" />
    </div>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { timestampToTime, generateId } from "@/utils/format";
import { getFun, postFun } from "@/service/table.js";
//   import { postriskConList } from "@/service/risk";
export default {
  name: "risk-confirme",
  components: {
    LHeader
  },
  data() {
    return {
      text: "任务管理",
      searchValue: "",
      isHaveNews: false,
      messageList: [],
      Loop: "", // 定时器
      showIndex: null, // 是否显示遮罩层,
      active: 0,
      tabs: [
        {
          title: "待执行",
          api: "/risk/plan/create/list?status=wait"
        },
        {
          title: "执行中",
          api: "/risk/plan/create/list?status=running"
        },
        {
          title: "已执行",
          api: "/risk/plan/create/list?status=finish"
        }
      ]
    };
  },
  created() {
    this.postList();
  },
  methods: {
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT2", true);
    },
    handadd() {
      this.$router.push({
        name: "riskAdd",
        params: {
          title: "新增"
        }
      });
    },
    postList(select = "") {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      // let formdata = new FormData();
      // formdata.append("select", select);
      getFun(this.tabs[this.active]["api"])
        .then(res => {
          this.$toast.clear();
          this.messageList = res.data || 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;
    },

    // 详情
    goDetail(data) {
      this.$router.push({
        name: "riskTaskList",
        params: {
          id: data.businessId || data.id
        }
      });
      sessionStorage.setItem("pathAuth", "riskManage");
      sessionStorage.setItem("planId", data.id);
      sessionStorage.setItem("buildingId", "");
      this.showIndex = null;
    },
    // 确认
    goConfirm(data) {
      this.$router.push({
        name: "risk-affirm",
        params: {
          data: data
        }
      });
      this.showIndex = null;
    }
  }
};
</script>

<style lang="less" scoped>
#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: 8px;
    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%;
      }
    }
  }
}
/deep/.van-tab__pane {
  min-height: 8rem;
}
</style>
