<template>
  <section class="AiNewsList">
    <AiTopFixed class="header">
      <slot name="header"/>
    </AiTopFixed>
    <slot v-if="$slots.content" name="content"/>
    <div class="listPane" v-else-if="list.length>0">
      <div class="card" v-for="item in list" :key="item.id" @click="$emit('select',item)">
        <slot v-if="$slots.row" name="row" :row="item"/>
        <div class="title" v-text="item[props.title]"/>
        <div flex class="subTitle">
          <div class="tag" v-text="item[props.type]"/>
          <span class="fill" v-text="item[props.createTime]"/>
          <div flex>
            <div class="count" v-text="item[props.count]||0"/>
            人看过
          </div>
        </div>
      </div>
      <u-loadmore :status="loadmore" color="#999" font-size="24"
                  margin-top="32" margin-bottom="80"/>
    </div>
    <div class="no-message" v-else>
      <image src="https://cdn.cunwuyun.cn/wxAdmin/img/message.png"/>
      <p>暂无数据</p>
    </div>
  </section>
</template>

<script>

export default {
  name: "AiNewsList",
  props: {
    list: {default: () => []},
    props: {
      default: () => ({
        title: 'title',
        type: "type",
        createTime: "createTime",
        count: "count",
      })
    },
    loadmore: {default: "loadmore"}
  }
}
</script>

<style lang="scss" scoped>
.AiNewsList {
  height: 100vh;
  background: #f3f6f9;

  .listPane {
    padding: 24px 32px 36px;

    .card {
      background: #FFFFFF;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
      border-radius: 16px;
      padding: 32px;
      margin-bottom: 32px;

      .title {
        height: 50px;
        font-size: 36px;
        font-weight: 500;
        color: #333333;
        line-height: 50px;
        margin-bottom: 24px;
      }

      .subTitle {
        color: #999;
        width: 100%;

        .tag {
          height: 48px;
          background: #EEEEEE;
          border-radius: 24px;
          text-align: center;
          line-height: 48px;
          margin-right: 16px;
        }

        .count {
          color: #4181FF;
        }
      }
    }
  }

  .no-message {
    margin-top: 140px;
    text-align: center;
    color: #888;
    font-size: 30px;

    b {
      font-size: 32px;
      color: $uni-color-primary;
      padding: 0 8px;
    }

    image {
      width: 320px;
      height: 240px;
    }
  }
}
</style>
