<script>
import Vue from 'vue'
import { getTemplateList } from '@/api/template'
export default Vue.extend({
  name: 'Index',
  data() {
    return {
      current_page: 1,
      last_page: 1,
      total: 0,
      page_size: 20,
      loading: false,
      tempList: [],
      ossUrl: process.env.VUE_APP_OSS_DOMAIN
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      if (this.loading) return
      this.loading = true
      getTemplateList(this.current_page, this.page_size).then(res => {
        this.tempList = res.data.data || []
        this.total = res.data.total
      }).then(res => {

      })
        .catch(err => {

        })
    },
    gotoAdd() {
      this.$router.push({ path: '/invitation/add' })
    },
    gotoEdit(item) {
      sessionStorage.setItem('invitationInfo', JSON.stringify(item))
      this.$router.push({ path: '/invitation/edit/' + item.id })
    }
  }
})
</script>

<template>
  <div class="main-box">
    <div class="head">
      <el-button v-permission="'invitation.addList'" icon="el-icon-plus" type="primary" @click="gotoAdd">添加模板</el-button>
    </div>
    <div class="body">
      <div class="scroll-box">
        <div class="model-cont">
          <div class="no-item" v-if="tempList.length === 0">还没有邀请函模板,去新建一个把！</div>
          <div v-permission="'invitation.goto'" v-for="item in tempList" :key="item.id" class="model-box" @click="gotoEdit(item)">
            <div class="image loading">
              <img class="bg" :src="ossUrl+item.pic" alt="">
              <img class="pic" :src="ossUrl+item.pic" alt="">
            </div>
            <div class="info-box">
              <div class="name">{{ item.name }}</div>
              <div class="time">更新时间：{{ item.update_time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <el-pagination
        background
        :page-size="page_size"
        layout="total"
        :total="total"
      />
      <el-pagination
        v-permission="'invitation.changePage'"
        background
        @current-change="current_page=$event;getList()"
        :page-size="page_size"
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<style scoped>
.main-box{
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 24px;
  .body{
    height: 100%;
    position: relative;
    .scroll-box{
      padding: 2px;
      position: absolute;
      width: calc(100% + 13px);
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      .model-cont{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 24px;
        .no-item{
          font-weight: bold;
          font-size: 24px;
          height: 60vh;
          grid-column: span 3;
          display: flex;
          justify-content: center;
          align-items: center;
          color: gray;
        }
        .model-box{
          overflow: hidden;
          height: 500px;
          border-radius: 8px;
          box-shadow: 0 1px 2px 0 #00000022;
          transition-duration: 300ms;
          .image{
            overflow: hidden;
            position: relative;
            height: 360px;
            width: 100%;
            img{
              height: 100%;
              width: 100%;
              position: absolute;
              left: 0;
              top: 0;
              &.bg{
                scale: 1.1;
                object-fit: cover;
                filter: blur(10px);
              }
              &.pic{
                object-fit: contain;
              }
            }
          }
          .info-box{
            height: 100px;
            width: 100%;
            padding: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name{
              font-size: 23px;
              font-weight: bold;
            }
            .time{
              color: #6B7280;
            }
          }
          &:hover{
            scale: 1.02;
          }
        }
      }
    }
  }
  .head{
    display: flex;
    justify-content: flex-end;
  }
  .foot{
    display: flex;
    justify-content: space-between;
  }
}
</style>
