<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
              inset
               @click="touchstart(0)"
            >
              <div style="font-size: 0.45rem;padding: 5px 0;">项目评估任务单1</div>

              <van-row gutter="">
                <van-col span="17">
                    <van-row gutter="">
                        <van-col span="9">发起时间：</van-col>
                        <van-col span="15">2023-07-05</van-col>
                    </van-row>
                    <van-row gutter="">
                        <van-col span="9">处理人员：</van-col>
                        <van-col span="15">孔德龙</van-col>
                    </van-row>
                </van-col>
                <van-col span="7" :style="{'color':'#03b615'}">
                    发起
                </van-col>
              </van-row>
              <!-- 长按显示遮罩层 -->
              <van-overlay :show="showIndex == 0">
                <div class="wrapper"  @click.stop="showIndex = null">
                  <van-button round type="primary" @click="goDetail()"
                    >详情</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";

export default {
  name:'taskLedger',//任务台账
  data() {
    return {
      text:'任务台账',
      active: 0,
      showIndex: null, // 是否显示遮罩层,
    }
  },
  components: {
    LHeader,
  },
  mounted() {
    
  },
  methods: {
    //点击列表
    touchstart(index, item) {
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
    },
      // 详情
    goDetail(){
      this.$router.push({
        name: "taskDetail",
        params: {
          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>
