<template>
  <section class="contentManager">
    <AiNewsList :list="list" :loadmore="loadmore" @select="showDetail">
      <template #header>
        <div class="search-wrap">
          <div class="search">
            <u-icon name="search" color="rgba(255,255,255,0.5)" size="40"></u-icon>
            <input placeholder="请输入需要搜索的内容" class="desc" placeholder-style="color:rgba(255,255,255,0.5);"
                   confirm-type="search" @change="onChange"/>
          </div>
        </div>
      </template>
    </AiNewsList>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "contentManager",
  appName: "搜索结果",
  computed: {
    ...mapState(['user']),
    loadmore() {
      return this.pages <= this.current ? 'loading ' : 'nomore'
    }
  },
  data() {
    return {
      list: [],
      current: 1,
      pages: 0,
      name: "",
    }
  },
  onLoad(params) {
    if (params.moduleId) {
      this.moduleId = params.moduleId
      this.getData(params.moduleId)
    }
  },
  methods: {
    onChange(val) {
      this.current = 1;
      this.getData(val.detail.value);
    },
    getData(title = "") {
      let {current} = this
      this.moduleId && this.$instance.post("/app/appcontentinfo/list", null, {
        params: {moduleId: this.moduleId, current, size: 10, title}
      }).then(res => {
        if (res?.data) {
          this.list = current > 1 ? [...this.list, ...res.data.records] : res.data.records
          this.pages = res.data.pages
        }
      })
    },
    handleSelectArea(e) {
      this.search.areaId = e.id
      this.getData()
    },
    showDetail(row) {
      uni.navigateTo({url: `./contentDetail?id=${row.id}`})
    },
  },
  onReachBottom() {
    this.current++;
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
::v-deep .search-wrap {
  width: 750px;
  height: 112px;
  box-sizing: border-box;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4181FF;

  .search {
    width: 100%;
    height: 64px;
    background: rgba(0, 0, 0, .2);
    border-radius: 32px;
    box-sizing: border-box;
    padding: 0 32px;
    display: flex;
    align-items: center;

    .desc {
      flex: 1;
      font-size: 28px;
      color: #FFFFFF;
      margin-left: 16px;
    }
  }
}
</style>
