<template>
  <div class="case">
    <Navbars></Navbars>
    <div>
      <img :src="cover.coverImg" width="100%" />
      <!-- width="100%" height="300"> -->
    </div>

    <div class="border-bottom comtype">
      <div>
        <button type="button" class="btn1 btn-link app" @click="() => filterCase()" :class="{btnactive:thisbtn==''}">全部案例</button>
        <button v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)" type="button" class="btn1 btn-link app" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
      </div>
    </div>

    <div class="row mobtype border-bottom">
      <div class="col-xs-6">
        <div>
          <p style="line-height:40px">选择想看的案例类型：</p>
        </div>
      </div>
      <div class="col-xs-6">
        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;width:140px;padding-left:0;padding-right:0">{{currentTypeName}}</el-button>
      </div>
    </div>

    <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%" style="text-align: center;">
      <div >
        <el-row style="text-align: center;height:72.5vh;display: grid;">
          <el-col :span="24">
            <button type="button" @click="() => filterCase()" class="btn-link" style="color:black;font-size: 24px;" :class="{btnactive:thisbtn==''}">全部案例</button>
          </el-col>
          <el-col :span="24" v-for="cas in casetype" :key="cas.id">
            <!-- @click="() => filterCase(cas)" -->
            <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px" :class="{btnactive:thisbtn==cas.typeName}">{{cas.typeName}}</button>
          </el-col>
          
        </el-row>
        <button type="button" class="btn btn-default rebtn" @click="drawer = flase" style="text-align:center;color:black;font-size: 24px;padding-left: 40px;padding-right: 40px;">返回</button>
      </div>
    </el-drawer>

    <div class="contanier center-block dyn-main">
      <div class="row">
        <div class="col-md-6 col-xs-6 cards" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
          <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
            <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
          </router-link>
        </div>
      </div>
    </div>
    <!--  -->
    <div style="margin-top:40px">
      <button type="button" v-if="!allLoaded" class="btn btn-default rebtn" @click="more">加载更多</button>
      <p v-else>已经到底了~更多案例敬请期待~</p>
    </div>
  </div>
</template>


<script>
// @ is an alias to /src

import request from '../../utils/request'
import apis from '../config/api'
import CaseCard from '../components/CaseCard'
import Navbars from '../components/Navbars'

export default {
  name: 'Case',
  components: {
    CaseCard,
    Navbars,
  },
  data () {
    return {
      cover: {},
      casetype: [],
      caselist: [],
      thisbtn: '',
      conditions: {
        pageNum: 0,
        pageSize: 8,
        caseType: '',
      },

      allLoaded: false,//数据全部加载
      drawer: false,
      navdrawer: false,
      direction: 'rtl',
      currentTypeName: '全部案例',
    }
  },

  created () {
    // window.console.log(this.cover, "543");
    // 封面
    request({
      ...apis.case.cover,
      params: { type: 'case' }
    }).then(data => {
      this.cover = data[0];
    })

    // 分类
    // axios.get('http://localhost:8080/pc/caseType/list')
    request({
      ...apis.caseType.list,
    })
      .then(res => {
        this.casetype = (res.records || []).filter(x => x.type === 'case');
      })

    this.getCaseList()
  },

  computed: {

  },

  methods: {
    getCaseList (filters = {}) {
      const params = {
        ...this.conditions,
        ...filters
      }

      return new Promise((resolve, reject) => {
        request({
          ...apis.case.list,
          params,
          urlData: { type: 'case' },
        }).then(con => {
          if (con.current > 1) {
            this.caselist = this.caselist.concat(con.records);
          } else {
            this.caselist = con.records;
          }

          this.conditions.pageNum = con.current
          this.allLoaded = con.current >= con.pages
          resolve(con)
        }).catch((err) => {
          window.console.error(err)
          reject(err)
        })
      })
    },

    more () {
      if (!this.allLoaded) {
        this.getCaseList({ pageNum: this.conditions.pageNum + 1 })
      }
    },

    filterCase (caseType) {
      // console.log(caseType.typeName)
      this.currentTypeName = caseType ? caseType.typeName : '全部案例'

      this.getCaseList({ pageNum: 1, caseType: caseType ? caseType.id : '' })
      this.drawer = false;
      this.thisbtn = caseType ? caseType.typeName : ''
    },
  }


}
</script>

<style scoped>
.routelink {
  text-decoration: none;
}

.mobtype {
  padding: 0;
  margin-top: 10px;
}

.case{
  min-height: 90vh;
}

/* .casecard {
  width: 100%;

  padding-bottom: 100%;
  background-size: 100% 100% !important; */
/* position: relative; */

/* margin: 0;
} */

.border-bottom {
  /* display: none; */
  border-bottom: 1px solid #bfbfbf;
  margin-top: 10px;
}
.btn1 {
  font-size: 24px;
  padding: 25px;
  color: black;
  border: none;
}
.btn1:hover {
  color: #e03723;
  text-decoration: none;
}
.mobbtn {
  color: #e03723;

  padding: 12px 40px;

  border-radius: 0px;

  background-color: rgb(252, 151, 252);
  /* border: 2px solid #bfbfbf; */
}

.text-left {
  color: #000;
}

.case-ph {
  bottom: 0;
  width: 100%;

  height: 0;
  padding-bottom: 65%;
  background-size: 100% 100% !important;
}

@media (max-width: 992px) {
  .case {
    margin-top: 47.8px;
    margin-bottom: -47.8px;
    padding-bottom: 47.8px;
    background-color: #fafafa;
  }
  .comtype {
    display: none;
    border-bottom: 1px solid #bfbfbf;
  }
  .dyn-main {
    margin-top: 20px;

    padding-left: 1.6vw;
    padding-right: 1.6vw;
  }
  .marginTP {
    margin-top: 3.2vw;
  }
  .cards {
    padding-left: 1.6vw;
    padding-right: 1.6vw;
  }
}
.row {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 992px) {
  .main {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
    justify-content: center;
  }
  .marginTP {
    margin-top: 3rem;
  }
  .case {
    margin-top: 116px;
    margin-bottom: -116px;
    padding-bottom: 116px;
    background-color: #fafafa;
  }

  .mobtype {
    display: none;
  }

  .btn {
    font-size: 24px;
    margin-top: 88px;
    padding: 12px 150px;
    border-radius: 0px;
    color: #000;
    background-color: #fff;
    border: 1px solid #aaaaaa;
    outline: none;
  }
  .btn:hover {
    color: #e03723;
    border: 1px solid #e03723;
    outline: none;
  }
  .btn:active{
    color: #e03723;
    border: 1px solid #e03723;
  }

  .btn-default:active:focus{
color: #e03723;
    background-color: #fff;
    border: 1px solid #e03723;
     outline: none;
  }
  .btn:active:focus{
    color: #e03723;
    border: 1px solid #e03723;
  }

  .dyn-main {
    padding-top: 55px;
    width: 80%;
  }

  .border-bottom {
    /* display: block; */
    font-size: 24px;
    border-bottom: 1px solid #bfbfbf;
    padding: 10px;
  }
}
.btn-link {
  outline: none;
  text-decoration: none;
}
.mobtype {
  padding: 0;
  margin-top: 10px;
}

@media (min-width: 992px) and (max-width: 1550px) {
  .btn1 {
    font-size: 20px;
    padding: 21px;
  }
  .border-bottom {
    padding: 0;
    margin-top: 0px;
  }

  .btn {
    padding: 9px 105px;
    font-size: 17px;
    margin-top: 28px;
  }
}
.btnactive {
  color: #e03723 !important;
}
.rebtn {
  border-radius: 0px;
}
.rebtn:hover {
  color: #e03723 !important;
  border: 1px solid #e03723;
  background: #fff;
}
</style>


<style lang="less" scoped>
@media (min-width: 992px){
.cards:hover {
  
  .casecard {
    transition: all 0.4s;
    margin-top: -20px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.12);
  }
}
}
@media (min-width: 992px) and (max-width: 1500px) {
  .cards:hover {
    transition: all 0.4s;
    .casecard {
      margin-top: -10px;
      margin-bottom: 10px;
      box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.12);
    }
  }
}
</style>

