<template>
  <div class="wrap">
    <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>
    <div class="con-list">
      <van-cell-group
        v-for="(item, index) in taskList"
        :key="index"
        inset
        @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)
              }}</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-overlay :show="showIndex == index">
          <div class="wrapper" @click.stop="showIndex = null">
            <van-button round type="primary" @click="goDetail(item)"
              >详情</van-button
            >
          </div>
        </van-overlay>
      </van-cell-group>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import LHeader from "@/components/header.vue";
import { timestampToTime, generateId } from "@/utils/format";
import { getFun, postFun } from "@/service/table.js";
export default {
  name: 'taskLedger',//任务台账
  data() {
    return {
      text: '任务台账',
      active: 0,
      searchValue: '',
      showIndex: null, // 是否显示遮罩层,
      taskList: [], // 是否显示遮罩层,
    }
  },
  components: {
    LHeader,
  },
  mounted() {
    this.getList()
  },
  methods: {
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT2", true);
    },
    getList() {
      getFun('/risk/plan/details/list').then(res => {
        console.log('%c [ res ]-77', 'font-size:13px; background:pink; color:#bf2c9f;', res)
        this.taskList = res.data
      })
    },
    //点击列表
    touchstart(index, item) {
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
    },
    // 详情
    goDetail(item) {
      this.$router.push({
        name: "riskTaskList",
        params: {
          id: item.id,
        },
      });
      sessionStorage.setItem("buildingId", "");

    },
    onSearch(searchValue) {

    }
  },
}
</script>

<style scoped lang="less">
.wrap {
  height: 100vh;
  width: 100vw;
}

.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%;
      }
    }
  }
}
</style>
