<template>
    <div class="dataImport-container">
      <div class="dataImport-seccion" >
        <div :class="item.bgcolor?'box-container':'nb'" v-for="item,index in sjdrList" :key="index">
          <div class="box-children">
            <img :src="item.img" alt="" @click="preImpInfo(item.name,item.type,item.bgcolor)">
            <div class="literal-description">
              <p @click="preImpInfo(item.name,item.type,item.bgcolor)">{{item.name}}</p>
              <!-- <p>
                <span @click="importTemplate(item.name,item.type)">查看模板</span>
                <span @click="preImpManager(item.name,item.type)">历史记录</span>
              </p> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import {  importTemplate } from "@/api/dimp/dataImport";
  export default {
    name: 'zhuan',
  
    data() {
      return {
        sjdrList:[
          {name:'专利统计', img:require('../assets/images/yxsj.png'),type:'rzlViewStatisticsInfo',bgcolor:true},
          {name:'地理标志统计', img:require('../assets/images/2.png'),type:'rzlViewStatisticsInfo',bgcolor:false},
          {name:'商标统计', img:require('../assets/images/3.png'),type:'rzlViewStatisticsInfo',bgcolor:false},
          {name:'集成电路统计', img:require('../assets/images/rksj.png'),type:'rzlViewStatisticsInfo',bgcolor:false},
        ]
      };
    },
  
    mounted() {
  
    },
  
    methods: {
      preImpInfo(title,type,bgc){
        console.log(type);
        if(bgc){
          let url=  '/patentstatist/patentvalid/'+type;
          this.$tab.openPage(title+'', url);
        }
        
      },
      preImpManager(title,type){
        let url=  '/dataImport2/'+type+'PreImp';
        this.$tab.openPage(title+'导入记录', url);
      },
      importTemplate(title,type){
        let url=  '/dimp/'+type+'PreImp/importTemplate';
        this.download(url,{}, type+`_${new Date().getTime()}.xlsx`);
        // importTemplate(type).then(response => {
        //   this.download(response.msg);
        // });
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .dataImport-container {
    width: 100%;
    min-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25vh 0;
  .dataImport-seccion{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    
    .box-container {
      position: relative;
      width: 170px;
      height: 180px;
      background-color: #2a8eed;
      border-radius: 10px;
      cursor: pointer;
      .box-children {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        text-align: center;
        padding: 0 20px;
        img {
          width: 55px;
          height: 55px;
        }
        .literal-description {
          margin-top: 5px;
          p {
            padding: 0;
            margin: 0;
            color: #fff;
            font-size: 14px;
            width: 140px;
          }
          &>p:nth-child(2) {
            padding: 10px 8px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
  }
  .nb{
    position: relative;
      width: 170px;
      height: 180px;
      background-color: #CCCCCC;
      border-radius: 10px;
      cursor: pointer;
      .box-children {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        text-align: center;
        padding: 0 20px;
        img {
          width: 55px;
          height: 55px;
        }
        .literal-description {
          margin-top: 5px;
          p {
            padding: 0;
            margin: 0;
            color: #fff;
            font-size: 14px;
            width: 140px;
          }
          &>p:nth-child(2) {
            padding: 10px 8px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
  }
  
  </style>
  