<style>
  .contractTW {
    padding-top: 70px;
    padding-bottom: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .contractTW .title {
    font-size: 25px;
    font-weight: bold;
    color: #666;
  }

  .contractTW .download-block {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }

  .contractTW .download-block li {
    list-style-type: none;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
    transition: transform .2s ease, box-shadow .2s ease;
    ;
    width: calc(20% - 16px);
    text-align: center;
  }

  .contractTW .download-block li::before {
    content: '';
    float: left;
    padding-top: 100%;
  }

  .contractTW .download-block a i {
    margin-bottom: 15px;
    font-size: 100px;
    color: #ddd;
  }

  .contractTW .download-block a {
    text-decoration: none;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .contractTW .download-block a p {
    font-size: 16px;
    color: #666;
  }

  @media only screen and (max-width: 1200px) {
    .contractTW .download-block li {
      width: 100%;
      margin-right: 0;
    }

    .contractTW .download-block a {
      padding: 15px 20px;
      justify-content: flex-start;
      flex-direction: row;
      text-align: left;
      align-items: center;
    }

    .contractTW .download-block a i {
      margin-bottom: 0;
      font-size: 60px;
    }

    .contractTW .download-block a p {
      padding-left: 20px;
    }

    .contractTW .download-block li::before {
      padding-top: 0;
    }

    .contractTW {
      max-width: 768px;
    }
  }

  .download-block li:hover {
    -webkit-transform: translate(0, -4px);
    -moz-transform: translate(0, -4px);
    -ms-transform: translate(0, -4px);
    -o-transform: translate(0, -4px);
    transform: translate(0, -4px);
    -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
  }

</style>
<template>
  <q-page>
    <div class="contractTW">
      <h1 class="title">旅遊合約書下載</h1>
      <ul class="download-block">
        <li v-for="(item,index) in ContractList" :key="index">
          <a :href="item.Url" target="_blank">
            <i class="iconfont iconpdf" v-if="item.Type==1"></i>
            <i class="iconfont iconword" v-if="item.Type==2"></i>
            <i class="iconfont iconPPT" v-if="item.Type==3"></i>
            <i class="iconfont iconimage" v-if="item.Type==4"></i>
            <i class="iconfont icontext" v-if="item.Type==5"></i>
            <p>{{item.Name}}</p>
          </a>
        </li>
      </ul>
    </div>
  </q-page>
</template>
<script>
  export default {
    props: [],
    data() {
      return {
        RB_Group_Id: 0,
        ContractList: [],
        isShowType: 0
      };
    },
    created() {
      var jObj = JSON.parse(window.localStorage.getItem('groupinfo'));
      this.RB_Group_Id = jObj.GroupId;
    },
    mounted() {
      this.getContract();
    },
    methods: {
      getContract() {
        this.apipost(
          "ws_get_GetContractPage", {
            RB_Group_Id: this.RB_Group_Id
          },
          res => {
            if (res.data.resultCode == 1) {
              if (res.data.data) {
                this.ContractList = res.data.data;
                if(this.ContractList&&this.ContractList.length>0){
                  this.ContractList.forEach(x=>{
                    let PdfUrl = x.Url.indexOf('pdf');
                    let wordUrl = x.Url.indexOf('word');
                    let pptUrl = x.Url.indexOf('ppt');
                    let jpgUrl = x.Url.indexOf('jpg');
                    let pngUrl = x.Url.indexOf('png');
                    let textUrl = x.Url.indexOf('txt');
                    if(PdfUrl>-1){
                      x.Type=1
                    }
                    if(wordUrl>-1){
                      x.Type=2
                    }
                    if(pptUrl>-1){
                      x.Type=3
                    }
                    if(jpgUrl>-1||pngUrl>-1){
                      x.Type=4
                    }
                    if(textUrl>-1){
                      x.Type=5
                    }
                  })
                }
              }
            }
          },
          err => {}
        );
      }
    },
  };

</script>
