<template>
  <div class="dynamic">
    <div class="top"></div>
    <Navbars></Navbars>
    <div>
      <img class="coverimg" :src="cover.coverImg"  />
      <!-- 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=" z-index: 50;margin-left: 16px;;width:140px;padding-left:0;padding-right:0;font-weight:bold">{{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" class="btn-link" @click="() => filterCase()" style="color:black;font-size: 24px;" :class="{btnactive:thisbtn==''}">全部动态</button>
          </el-col>-->
          <el-col :span="24">
            <van-picker class="values" :columns="columns" @cancel="drawer = false" @confirm="onConfirm" @change="onChange" />
          </el-col>
        </el-row>
        <button type="button" class="btn rebtn" @click="() => filterCase()"  style="text-align:center;color:black">确定</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: { type:'share', id: item.id }}" class="routelink">
            <case-card :thumb="item.listImg||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" class="btn rebtn" @click="more" v-if="!allLoaded">加载更多</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'

import 'vant/lib/picker/style';

export default {
  name: 'dynamic',
  data () {
    return {
      cover: {},
      casetype: [],
      caselist: [],
      conditions: {
        pageNum: 0,
        pageSize: 8,
        caseType: '',
      },

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

      currentTypeName: '全部动态',
      thisbtn: '',

      columns: ['全部动态'],
      indexs: [],

      value: '',
      index: '',
    }
  },
  components: {
    CaseCard,
    Navbars,
  },

  created () {
    // 封面
    request({
      ...apis.case.cover,
      params: { type: 'movement' },
    }).then(data => {
      this.cover = data[0];
    })
    request({
      ...apis.caseType.list,
      params: { pageNum: 1, pageSize: 999 }
    })
      .then(res => {
        this.casetype = (res.records || []).filter(x => x.type === 'movement');
        let type = (res.records || []).filter(x => x.type === 'movement');
        type.map((row, index) => {
          this.columns[index + 1] = row.typeName
          this.indexs[index] = row.id

        });
      })
    this.getCaseList()
  },
  computed: {
  },
  methods: {
    onChange (picker, value, index) {
  
      this.value = value
      this.index = index
      
    },

    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },

    getCaseList (filters = {}) {
      const params = {
        ...this.conditions,
        ...filters
      }
      return new Promise((resolve, reject) => {
        request({
          ...apis.case.list,
          params,
          urlData: { type: 'movement' },
        }).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) {

      if (this.value) {


        this.currentTypeName = this.value

        this.getCaseList({ pageNum: 1, caseType: this.value == '全部动态' ? '' : this.indexs[this.index - 1] })
        this.currentTypeName = this.value

        this.drawer = false;

      } else {
        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: 0px;
}

.dynamic {
  min-height: 90vh;
}

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

  border-radius: 0px;

  border: none;
  /* 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) {
  .rebtn {
    width: 120px;
  }
  .dynamic {
    background-color: #fafafa;
    padding-bottom: 3rem;
  }
  .comtype {
    display: none;
    border-bottom: 1px solid #bfbfbf;
  }
  .dyn-main {
    margin-top: 10px;

    padding-left: 1.6vw;
    padding-right: 1.6vw;
  }
  .marginTP {
    margin-top: 3.2vw;
  }
  .cards {
    padding-left: 1.6vw;
    padding-right: 1.6vw;
  }
  p {
    margin: 0;
  }
}
.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;
  }
  .dynamic {
    margin-top: 100px;
    margin-bottom: -100px;
    padding-bottom: 100px;
    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;
  }
}
.coverimg {
  width: 100vw;
 

  height:35.8vw;
  z-index: 90;
  /* padding-bottom: 35.8%;
  background-size: 100% 100% !important; */
}
.btn-link {
  outline: none;
  text-decoration: none;
}
.mobtype {
  padding: 0;
  margin-top: 0px;
}

@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 {
  /* width: 120px; */
  border-radius: 0px;
  border: 1px solid #aaa;
  background: none;
}
.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>

