<template>
  <div
    class="{{multi ? 'book-wrap__multi' : 'book-wrap'}}"
    style="{{bookSimpleStyle()}}"
    @click="getBooks(book)"
  >
    <block if="!multi">
      <image
        style="height: {{width * 1.33}}px"
        class="book-cover__simple"
        src="{{book.cover_url}}"
      ></image>
      <text
        class="book-name {{lines ? 'book-name__line2' : ''}}"
        if="{{isshowtext}}"
        >{{ book.book_name }}</text
      >
      <slot></slot>
    </block>
    <block else>
      <image
        style="{{bookMultiStyle()}}"
        class="book-cover__multi"
        src="{{book.cover_url}}"
      ></image>
      <slot>
        <div class="book-info__multi">
          <text class="name">{{ book.book_name }}</text>
          <text class="intro">{{ book.book_summary }}</text>
        </div>
      </slot>
    </block>
  </div>
</template>

<script>
import router from '@system.router'

export default {
  props: {
    multi: {
      type: Boolean,
      default: false
    },
    prevent: {
      type: Boolean,
      default: false
    },
    read: {
      type: Boolean,
      default: false
    },
    similar: {
      type: Boolean,
      default: false
    },
    book: {
      type: Object,
      default: {}
    },
    width: {
      type: Number,
      default: 200
    },
    lines: {
      type: Boolean,
      default: false
    },
    isshowtext: {
      type: Boolean,
      default: true
    }
  },
  bookSimpleStyle() {
    if (!this.multi) {
      return {
        width: this.width + 'px'
      }
    }
  },
  bookMultiStyle() {
    if (this.multi) {
      return {
        width: this.width + 'px',
        height: this.width * 1.33 + 'px'
      }
    }
  },
  getBooks(book) {
    if (this.prevent) return

    if (this.read) {
      router.push({
        uri: '/views/Reader',
        params: {
          bid: book.book_id,
          chapter_id: book.recent_cid
        }
      })
      return
    }
    if (this.similar) {
      router.replace({
        uri: '/views/Detail',
        params: {
          bid: book.book_id || ''
        }
      })
    } else {
      router.push({
        uri: '/views/Detail',
        params: {
          bid: book.book_id || ''
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.book-wrap {
  width: 200px;
  flex-shrink: 0;
  flex-direction: column;

  .book-cover__simple {
    width: 100%;
    height: 264px;
    border-radius: 6px;
  }

  .book-name {
    font-size: 24px;
    color: #999;
    margin-top: 14px;
    margin-bottom: 36px;
    lines: 1;
    text-overflow: ellipsis;

    &__line2 {
      lines: 2;
    }
  }
}

.book-wrap__multi {
  /* flex: 1; */
  flex-direction: row;
  width: 100%;
  .book-cover__multi {
    width: 200px;
    flex-shrink: 0;
    height: 266px;
    border-radius: 6px;
  }

  .book-info__multi {
    flex: 1;
    height: 266px;
    flex-direction: column;
    margin-left: 38px;
    margin-bottom: 40px;

    .name {
      font-size: 36px;
      color: #333;
      margin-bottom: 54px;
      lines: 1;
      text-overflow: ellipsis;
    }

    .intro {
      font-size: 26px;
      color: #666;
      line-height: 40px;
      lines: 4;
      text-overflow: ellipsis;
    }
  }
}
</style>
