<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) {
      let link = location.origin + location.pathname;
      link += "?worksCode=" + code;
      as.setShare(link, null, null, null);
      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(true);
          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(true);
        });
    },
    refreshMore() {
      // console.log("refresh more");
      this.listForm.page++;
      this.searchWorksHandler();
    }
  },
  created() {
    // if (!this.isLoading && this.listForm.page == 0) {
    //   this.refreshMore();
    // }
    // 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: 100;
    }
  }

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

.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) no-repeat;
      background-size: 100%;
    }
  }
}
.empty {
  padding-top: 30px;
  height: 300px;

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