<template>
  <div class="case">
    <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" style="color:black;font-size: 24px;padding: 25px" @click="() => filterCase()">全部案例</button>
        <button v-for="cas in casetype" :key="cas.id" @click="() => filterCase(cas)" type="button" class="btn1 btn-link app" style="color:black;font-size: 24px;padding: 25px">{{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;">{{currentTypeName}}</el-button>
      </div>
    </div>
    <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
      <div>
        <el-row style="text-align: center;">
          <el-col :span="24">
            <button type="button" @click="() => filterCase()"  class="btn-link" style="color:black;font-size: 24px;">全部案例</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">{{cas.typeName}}</button>
          </el-col>
          <el-col :span="24">
            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;padding-left: 40px;padding-right: 40px; margin-top:30px">返回</button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>

    <div class="contanier center-block dyn-main">
      <div class="row">
        <div class="col-md-6 col-xs-6" 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" @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'

export default {
  name: 'Case',
  components: {
    CaseCard,
  },
  data () {
    return {
      cover: {},
      casetype: [],
      caselist: [],

      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) {
      this.currentTypeName = caseType ? caseType.typeName : '全部案例'

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

    },
  }


}
</script>

<style scoped>

.routelink{
  text-decoration: none;
}

.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 !important;
}
 .btn1 {
    font-size: 24px !important;
    color: black !important;
    border: none !important;
  }
  .btn1:hover {
    color: red !important;
    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: 58px;
  }
  .comtype {
    display: none;
    border-bottom: 1px solid #bfbfbf;
  }
  .dyn-main {
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.row {
    margin: 0;
  }
.marginTP {
  margin-top: 3rem;
}

@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;
  }
  .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;
  }
  .btn:hover {
    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
}
</style>