<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">
          <div class="cell">
            <div 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>
            </div>
          </div>
        </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>

        <div class="bottom-line"></div>
      </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, "", "", "");
      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);
            }
            this._changeImageList(res.list[index]);
            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);
        });
    },
    _changeImageList(works) {
      let worksList = works.worksList;
      if (!worksList || worksList.length == 0) {
        return;
      }
      if (worksList[0].worksType == "pic") {
        return;
      }
      let changeIndex = -1;
      for (let index = 0; index < worksList.length; index++) {
        if (worksList[index].worksType == "pic") {
          changeIndex = index;
          break;
        }
      }
      if (changeIndex > -1) {
        let worksTmp = worksList.splice(changeIndex, 1);
        worksList.unshift(worksTmp[0]);
        works.worksList = worksList;
      }
    },
    refreshMore() {
      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: 55px;
    border: 2px solid #82acae;
    background-color: #e8e8e8;
    line-height: 55px;
    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;
}
.cell {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.worksItem {
  margin: 0 auto 30px auto;
  width: 296px;
  height: 215px;
  border: solid 2px #d1d0d0;
  box-shadow: 0 0 2px #d1d0d0;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;

  .worksThumb {
    width: 298px;
    height: 168px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .worksDescription {
    display: flex;
    align-items: center;
    padding-left: 10px;

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

    .worksNo {
      padding-left: 10px;
      width: 55px;
    }
    .worksName {
      flex: 1;
      padding: 0 10px;
    }
    .worksPriaseNo {
      width: 60px;
      text-align: right;
      padding-right: 10px;
    }
    .worksPraise {
      width: 28px;
      height: 24px;
      background: url(../../../assets/imgs/list-heart-red.png) no-repeat;
      background-size: 100%;
      margin-right: 10px;
    }
  }
}
.empty {
  padding-top: 30px;
  height: 300px;

  .empty-icon {
    font-size: 60px;
    color: #a1a1a1;
  }
  .empty-message {
    font-size: 24px;
    color: #a1a1a1;
  }
}
.bottom-line {
  height: 200px;
}

.van-cell:not(:last-child)::after {
  border: none !important;
}
</style>