<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-col span="12" v-for="(item,index) in worksList" :key="index">
        <div class="worksItem" @click="toWorksViewHandler(item.worksCode)">
          <div
            class="worksThumb"
            v-bind:style="{backgroundImage:'url(' + 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-col span="24" v-if="worksList.length == 0 ">
        <div class="empty">
          <div class="empty-icon">
            <van-icon name="warn-o" />
          </div>
          <div class="empty-message">没有搜到任何作品 ！</div>
        </div>
      </van-col>
    </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";

Vue.use(Icon);
Vue.use(Row).use(Col);

export default {
  props: [""],
  data() {
    return {
      init: false,
      worksList: [],
      lastQuery: "",
      listForm: {
        query: "",
        page: 1,
        size: 10
      }
    };
  },
  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;
      }
      httpGet({ url: urls.list, data: this.listForm }).then(res => {
        let list = [];
        if (this.listForm.page != 1) {
          list = this.worksList;
        }
        list = list.concat(res.list);
        this.worksList = list;
      });
    }
  },
  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;
}

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

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

    div {
      font-size: 26px;
      height: 60px;
      line-height: 60px;
      text-align: left;
      text-overflow: ellipsis;
    }

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

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