<!-- 导入固有风险模板列表 -->
<template>
  <div class="inherent-template">
    <van-sticky offset-top="0">
      <LHeader text="固有风险模板"></LHeader>
      <div class="content-wrap">
        <div class="search-wrap">
          <!-- <van-search v-model="searchVal" placeholder="搜索" @input="onInput" /> -->
          <van-search placeholder="请输入搜索关键词" show-action v-model="searchValue" @clear="toSearch">
            <template #action>
              <div @click="toSearch">搜索</div>
            </template>
          </van-search>
        </div>
      </div>
    </van-sticky>
    <van-pull-refresh v-model="list.refreshing" @refresh="onRefresh">
      <van-list v-model="list.loading" :finished="list.finished" finished-text="没有更多了" @load="getList" class="con-list">
        <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="10">风险点类型：</van-col>
                <van-col span="14">{{ item.pointType }}</van-col>
              </van-row>
              <van-row gutter="">
                <van-col span="9">风险因素：</van-col>
                <van-col span="15">{{ item.factor }}</van-col>
              </van-row>
            </van-col>
          </van-row>
          <van-overlay :show="showIndex == index">
            <div class="wrapper" @click.stop="showIndex = null">
              <van-button round type="info" @click="toImport(item)">导入</van-button>
              <van-button round type="primary" @click="toDetail(item)">详情</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>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getFun, postFun } from "@/service/table.js";
import LHeader from "@/components/header.vue";
import { timestampToTime, generateId } from "@/utils/format";
export default {
  components: { LHeader },
  data() {
    return {
      messageList: [],
      searchValue: '',
      showIndex: null,
      item: null,
      list: {
        refreshing: false,
        loading: false,
        finished: false,
      },
      page: {
        pageNum: 0,
        total: 0,
      },
    };
  },
  mounted() { },
  methods: {
    toSearch() {
      this.getList(true)
    },
    toDetail(item) {
      this.$store.commit("SET_INHERENT_TEMPLATE", item);
      this.$router.push({
        path: "/inherent/template/detail",
        query: {
          id: item.id,
        },
      });
    },
    toImport(item) {
      this.$store.commit("SET_INHERENT_TEMPLATE", item);
      this.$router.go(-1);
    },
    touchstart(index, item) {
      this.showIndex = index;
      this.item = item;
    },
    getList(isFresh = false) {
      if (isFresh) {
        this.page.pageNum = 0;
        this.page.total = 0;
        this.messageList = [];
      }
      this.page.pageNum++;
      getFun(`/risk/plan/inherent/template/list`, {
        pageNum: this.page.pageNum,
        pageSize: 10,
        name: this.searchValue
      })
        .then((res) => {
          setTimeout(() => {
            this.list.loading = false;
            this.list.refreshing = false;
            this.messageList = this.messageList.concat(res.rows);
            if (this.page.total == 0) {
              this.page.total = res.total;
              this.list.finished = false;  //不能再isFresh中改变值，load会导致再次调用getList方法
            }
            if (this.page.total && this.messageList.length >= this.page.total) {
              this.list.finished = true;
              return;
            }
          }, 300);
        })
        .catch(() => {
          this.$toast.fail("加载失败,请稍后再试");
        });
    },
    onRefresh() {
      this.getList(true);
    },
    timestampToTimes(time) {
      return timestampToTime(new Date(time), "DT2", true);
    },
  },
};
</script>

<style lang="less" scoped>
.inherent-template {
  .con-list {
    padding: 0;
    min-height: 10rem;
    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>
