<template>
  <section class="AppContentManager">
    <AiNewsList :list="list" :loadmore="loadmore" @select="showDetail">
      <template #header>
        <div flex>
          <AiAreaPicker :areaId="user.areaId" @select="handleSelectArea" icon="Location2.png"/>
          <u-search placeholder="请输入标题" :show-action="false" v-model="search.title" @search="current=1,getData()"/>
        </div>
      </template>
    </AiNewsList>
    <AiFixedBtn>
      <div class="addBtn iconfont iconfont-iconfangda" @click="gotoAdd"/>
    </AiFixedBtn>
  </section>
</template>

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

export default {
  name: "AppContentManager",
  appName: "内容发布",
  computed: {
    ...mapState(['user']),
    loadmore() {
      return this.pages <= this.current ? 'loading ' : 'nomore'
    }
  },
  data() {
    return {
      list: [],
      current: 1,
      pages: 0,
      search: {}
    }
  },
  onLoad(params) {
    if (params.moduleId) {
      this.moduleId = params.moduleId
      this.getData(params.moduleId)
    }
  },
  methods: {
    getData(moduleId) {
      let {current, search} = this
      moduleId && this.$http.post("/app/appcontentinfo/list", null, {
        params: {moduleId, current, size: 10, ...search}
      }).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}`})
    },
    gotoAdd() {
      uni.navigateTo({url: `./contentAdd?moduleId=${this.moduleId}`})
    }
  },
  onReachBottom() {
    this.current++;
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.AppContentManager {
  ::v-deep.location {
    width: 60px;
    height: 60px;
    margin-right: 12px;
  }

  ::v-deep .u-search {
    margin-bottom: 0 !important;
    padding-left: 60px;
    box-shadow: none;

    .u-content {
      padding-left: 50px;
      box-sizing: border-box;
    }
  }

  .addBtn {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    font-size: 48px;
    color: $uni-color-primary;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
  }
}
</style>
