<template>
  <div class="wrap">
    <div class="articles">
      <div class="top">
        <div class="search">
          <input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
          <i class="el-icon-search icon"></i>
        </div>
        <p class="result">{{ $i18n.locale === 'en' ? `Search results containing "${title}"` : `包含 “${title}” 的搜索结果`
          }} </p>
      </div>

      <ul v-if="articles.length" class="list">
        <li v-for="(item, i) in articles" :key="i">
          <h6 @click="toArtice(item)">{{ item.title }}</h6>
          <div class="des" v-html="item.mainBody"></div>
          <Breadcrumb :data.sync="item.routes" />
        </li>
      </ul>
      <div v-else class="none">
        <img src="@/assets/images/none.png" alt="">
        <p class="text">{{ $t('column.nothing') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import Setting from '@/setting'
import Util from '@/libs/util'
import mixins from '@/mixins/article'
import Breadcrumb from '@/components/breadcrumb'
export default {
  mixins: [mixins],
  data () {
    return {
      title: this.$store.state.content.keyword,
      searchTimer: null,
      articles: [],
    }
  },
  components: {
    Breadcrumb
  },
  computed: {
    ...mapState('content', [
      'keyword'
    ]),
  },
  watch: {
    keyword () {
      this.title = this.keyword
    },
    title () {
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.getArticle()
      }, 500)
    }
  },
  mounted () {
    this.getArticle()
  },
  methods: {
    ...mapMutations('content', [
      'setKeyword'
    ]),
    // 查询文章列表
    getArticle () {
      this.$post(this.api.newlyPublishedArticles, {
        siteId: this.site,
        pageNum: 1,
        pageSize: 1000,
        title: this.title
      }).then(({ data }) => {
        const list = Util.removeTag(data.records)
        // 添加面包屑参数
        list.map(e => {
          e.routes = [
            {
              name: e.columnName,
              query: {
                id: e.columnId
              }
            },
            {
              name: e.title
            }
          ]
        })
        this.articles = list
      }).catch(res => { })
    },
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat;
  background-color: #fff;
}

.articles {
  width: 70%;
  padding-top: 47px;
  margin: 0 auto;
}

.top {
  display: flex;
  align-items: center;

  .result {
    font-size: 18px;
    color: #969696;
  }
}

.search {
  position: relative;
  display: inline-flex;
  height: 62px;
  margin-right: 30px;
  border-radius: 6px;
  overflow: hidden;

  input {
    width: 510px;
    padding: 0 20px;
    font-size: 18px;
    color: #333;
    border: 0;
    outline: none;
    background: #f7f7f7;
  }

  .icon {
    position: absolute;
    top: 17px;
    right: 15px;
    font-size: 26px;
    color: #ccc;
    border-radius: 0px 6px 6px 0px;
  }
}

.list {
  li {
    margin-top: 30px;
    border-bottom: 1px dashed #e3e3e3;
  }

  h6 {
    margin-bottom: 10px;
    font-size: 22px;
    color: #1583ff;
    line-height: 30px;
    cursor: pointer;
  }

  .des {
    font-size: 18px;
    line-height: 36px;
    color: #333;
    @include mul-ellipsis(2);
  }

  .breadcrumb {
    margin: 15px 0 30px;
  }
}

.none {
  margin-top: 118px;
  text-align: center;

  .text {
    margin-top: 59px;
    font-size: 18px;
    color: #333;
  }
}

@media (max-width: 640px) {
  .articles {
    width: 90%;
  }

  .top {
    flex-direction: column;
    padding: 0 10px;
  }

  .search {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;

    input {
      width: 100%;
    }
  }
}
</style>