<!-- 导入固有风险模板列表 -->
<template>
  <div class="inherent-template">
    <LHeader text="固有风险模板"></LHeader>
    <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: [],
      showIndex: null,
      item: null,
      list: {
        refreshing: false,
        loading: false,
        finished: false,
      },
      page: {
        pageNum: 0,
        total: 0,
      },
    };
  },
  mounted() {},
  methods: {
    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,
      })
        .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;
            }
            if (this.page.total && this.messageList >= 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>
