<template>
  <div class="viewClass">
    <div class="search-panel">
      <div class="input-panel">
        <input v-model="listForm.query" />
      </div>
      <div class="search-btn" @click="searchWorksHandler('searchBtn')"></div>
    </div>
    <van-row>
      <van-list v-model="isLoading" :finished="!hasMore" finished-text @load="refreshMore">
        <van-cell v-for="(itemList,index1) in worksList" :key="index1">
          <van-col span="12" v-for="(item,index2) in itemList" :key="index2">
            <div class="worksItem" @click="toWorksViewHandler(item.worksCode)">
              <div
                class="worksThumb"
                v-bind:style="{backgroundImage:'url(' + (item.worksList && item.worksList[0] ? item.worksList[0].worksUrl : '') + ')'}"
              ></div>
              <div class="worksDescription">
                <div class="worksNo">{{item.worksNo}}</div>
                <div class="worksName">{{item.name}}</div>
                <div class="worksPriaseNo">{{item.praiseNumber}}</div>
                <div class="worksPraise"></div>
              </div>
            </div>
          </van-col>
        </van-cell>

        <van-col span="24" v-if="worksList.length == 0 && !isLoading">
          <div class="empty">
            <div class="empty-icon">
              <van-icon name="warn-o" />
            </div>
            <div class="empty-message">没有搜到任何作品 ！</div>
          </div>
        </van-col>
      </van-list>
    </van-row>
  </div>
</template>

<script>
let urls = {
  list: "/jiajiaCHApi/app/works/list"
};

import { httpGet } from "@/api/fetch-api";

import Vue from "vue";
import { Row, Col } from "vant";
import { Icon } from "vant";
import { List, Cell } from "vant";
import { Toast } from "vant";

Vue.use(Toast);
Vue.use(List).use(Cell);
Vue.use(Icon);
Vue.use(Row).use(Col);

export default {
  props: [""],
  data() {
    return {
      hasMore: true,
      isLoading: false,
      init: false,
      worksList: [],
      lastQuery: "",
      listForm: {
        query: "",
        page: 0,
        size: 20
      }
    };
  },
  methods: {
    // initActvity() {
    //   this.searchWorksHandler();
    // },
    toWorksViewHandler(code) {
      this.$emit("worksDetail", { worksCode: code });
    },
    searchWorksHandler(action) {
      if (action) {
        if (this.lastQuery == this.listForm.query) {
          return;
        }
        this.lastQuery = this.listForm.query;
        this.listForm.page = 1;
        Toast.loading({
          mask: true,
          message: "加载中..."
        });
      }
      console.log("this.listForm === ", this.listForm);
      httpGet({ url: urls.list, data: this.listForm }).then(res => {
        Toast.clear();
        let list = [];
        if (this.listForm.page != 1) {
          list = this.worksList;
        }

        let tempList = [];
        for (let index = 0; index < res.list.length; index++) {
          if (index % 2 == 0) {
            tempList = [];
            list.push(tempList);
          }
          tempList.push(res.list[index]);
        }
        // console.log(list);

        // list = list.concat(res.list);
        this.worksList = list;

        // 加载更多
        this.hasMore = res.list.length == this.listForm.size;
        this.isLoading = false;
      }).catch(e=>{
        Toast.clear();
      });
    },
    refreshMore() {
      // console.log("refresh more");
      this.listForm.page++;
      this.searchWorksHandler();
    }
  },
  created() {
    // this.initActvity();
  }
};
</script>

<style lang="scss" scoped>
.viewClass {
  width: 630px;
  margin: auto;
  padding-top: 30px;
}

.search-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 630px;

  .input-panel {
    width: 450px;
    height: 52px;
    border: 2px solid #82acae;
    background-color: #e8e8e8;
    line-height: 54px;
    border-radius: 26px;
    display: flex;
    input {
      height: 46px;
      width: 400px;
      line-height: 46px;
      border: none;
      background-color: transparent;
      padding-left: 20px;
      font-size: 28px;
      position: relative;
      z-index: 1000;
    }
  }

  .search-btn {
    width: 152px;
    height: 53px;
    background: url(../../../assets/imgs/list-search-btn.png);
    background-size: 100%;
    position: relative;
    z-index: 1000;
  }
}

.van-row {
  margin-top: 30px;
  min-height: 400px;
}

.van-cell {
  padding: 0;
}

.worksItem {
  margin: 0 auto 20px auto;
  width: 300px;
  height: 275px;
  border: solid 1px #d1d0d0;
  box-shadow: 2px 2px 2px #d1d0d0;
  border-radius: 20px;
  overflow: hidden;

  .worksThumb {
    width: 300px;
    height: 215px;
    background-size: cover;
  }
  .worksDescription {
    display: flex;
    align-items: center;
    padding-left: 10px;

    div {
      font-size: 22px;
      height: 60px;
      line-height: 60px;
      text-align: left;
      text-overflow: ellipsis;
      overflow: hidden;
      font-weight: 600;
    }

    .worksNo {
      width: 55px;
    }
    .worksName {
      width: 133px;
    }
    .worksPriaseNo {
      width: 60px;
      text-align: right;
      padding-right: 5px;
    }
    .worksPraise {
      width: 28px;
      height: 24px;
      background: url(../../../assets/imgs/list-heart-red.png);
      background-size: 100%;
    }
  }
}
.empty {
  padding-top: 30px;
  height: 300px;

  .empty-icon {
    font-size: 60px;
    color: #a1a1a1;
  }
  .empty-message {
    font-size: 24px;
    color: #a1a1a1;
  }
}
</style>