<template>
  <div class="wrap">
    <van-sticky offset-top="0">
      <LHeader :text="text"></LHeader>
    </van-sticky>
    <van-tabs
        v-model="active"
        color="#2980f7"
        animated
        :sticky="true"
      >
      <van-tab title="排序">
        <template #title> 排序 <van-icon name="down" /></template>
         <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>
      </van-tab>
      <van-tab title="筛选">
         <template #title> 筛选 <van-icon name="filter-o" /></template>
      </van-tab>
    </van-tabs>
  </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,
      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,
        },
      });
    }
  },
}
</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: 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>
