<template>
  <view class="page-container">
    <view class="details-header">
      <view class="details-bg" :style="{backgroundImage: 'url('+data.vod_pic+')'}"></view>
      <view class="details-mask"></view>
      <view class="details-intro">
        <view class="vod-image">
          <image :src="data.vod_pic" mode="aspectFill" />
        </view>
        <view class="vod-info">
          <view class="vod-name">
            {{data.vod_name}}
          </view>
          <view class="vod-type">
            {{data.type_name_1}} {{data.vod_year}} 
          </view>
          <view class="vod-tags">
            <u-tag v-for="(tag, i) in data.vod_class" :key="i" bgColor="#f2f5fa" color="#1a1a1a" borderColor="#f2f5fa" size="mini" :text="tag" class="vod-tags-item" />
          </view>
          <view class="vod-info-item">
            <text class="item-title">导演：</text>
            <view class="item-value">
              <text v-for="(director, i) in data.vod_director" :key="i">{{director}}</text>
            </view>
          </view>
          <view class="vod-info-item">
            <text class="item-title">演员：</text>
            <view class="item-value">
              <text v-for="(actor, i) in data.vod_actor" :key="i">{{actor}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="video-intro">
      <view class="intro-title">影片简介</view>
      <view class="intro-value">
        {{data.vod_content}}
      </view>
    </view>
    <view class="video-comment">
      <view class="comment-title">网友点评</view>
      <view class="comment-list">
        <view v-for="(item, index) in comment" :key="index" class="comment-item">
          <image :src="item.user_portrait || '/static/avatar/noavatar.png'" mode="aspectFill" class="user-avatar" />
          <view class="item-content">
            <view class="item-title-box">
              <text class="user-name">{{item.user_nick_name || item.user_name}}</text>
              <view style="flex:1 1 0%"></view>
              <view class="item-statistics">
                <uni-icons type="heart" color="#b9bbbd" size="16"></uni-icons>
                <text>{{item.comment_up}}</text>
              </view>
            </view>
            <text class="comment-content">
              {{item.comment_content}}
            </text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="data.hot_list" class="video-like">
      <view class="video-like-titlebox">
        <text class="video-like-title">猜您喜欢</text>
      </view>
      <view class="vod-container">
        <vod-item v-for="(vod, vodIndex) in data.hot_list" :key="vodIndex" :item="vod" />
      </view>
    </view>
    <u-loading-page :loading="loading" bgColor="none" fontSize="16"></u-loading-page>
  </view>
</template>

<script>
import vodItem from '@/components/vod-item-row.vue'
import { app, comment } from '@/utils/api'

export default {
  components: {
    vodItem
  },
  data() {
    return {
      id: 0,
      data: {},
      comment: [],
      loading: true
    }
  },
  onLoad(option) {
    if (option.id) {
      this.id = parseInt(option.id)
    }
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      await app.vodDetails(this.id).then(res => {
        if (res.code == 1) {
          this.data = res.data
          comment.list(this.id, 1, 1).then(res => {
            const resData = res.data
            if (resData.list.length > 0) {
              this.comment = resData.list
              this.comment.shift()
            }
          }).catch(e => {})
        } else {
          uni.showToast({
              icon: 'none',
              title: res.msg,
              duration: 3000
          })
          setTimeout(() => {
            this.back()
          }, 1500)
        }
      }).catch(e => {
        setTimeout(() => {
          this.back()
        }, 1500)
      })
      this.loading = false
    }
  }
}
</script>

<style lang="scss">
.page-container {
  background-color: $uni-bg-color;
  .details-header {
    position: relative;
    width: 100%;
    height: 250px;
    .details-bg {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      filter: blur(10px) brightness(1.2);
    }
    .details-mask {
      background-color: rgba(0,0,0,0.6);
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    .details-intro {
      position: absolute;
      padding: 0 16px;
      top: 60px;
      left: 0;
      right: 0;
      display: flex;
      .vod-image {
        width: 120px;
        height: 170px;
        margin-right: 15px;
      }
      .vod-info {
        color: #fff;
        flex: 1 1 0%;
        overflow: hidden;
        .vod-name {
          margin-top: 5px;
          font-size: 18px;
          font-weight: 700;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .vod-type {
          margin-top: 11px;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .vod-tags {
          margin: 11px 0 10px;
          display: flex;
          flex-wrap: wrap;
          .vod-tags-item {
            margin-right: 5px;
          }
        }
        .vod-info-item {
          margin-top: 5px;
          display: flex;
          .item-title {
            width: 45px;
            font-size: 14px;
            font-weight: 700;
            line-height: 25px;
          }
          .item-value {
            flex: 1 1 0%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            uni-text {
              margin: 0 5px;
              font-size: 14px;
              line-height: 25px;
            }
          }
        }
      }
    }
  }
  .video-intro {
    margin: 20px 15px 0;
    .intro-title {
      font-size: 17px;
      font-weight: 700;
      color: #1a1a2a;
    }
    .intro-value {
      margin-top: 10px;
      font-size: 14px;
      color: #60606c;
      line-height: 25px;
    }
  }
  .video-comment {
    margin: 20px 15px 0;
    .comment-title {
      font-size: 17px;
      font-weight: 700;
      color: #1a1a2a;
    }
    .comment-list {
      padding: 10px 0 0;
      .comment-item {
        padding: 5px 0;
        display: flex;
        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .item-content {
          margin-left: 10px;
          padding-bottom: 15px;
          flex: 1 1 0%;
          border-bottom: 1px solid #f2f5fa;
          .item-title-box {
            margin: 2px 0 10px;
            display: flex;
            align-items: center;
            .user-name {
              font-size: 14px;
              font-weight: 700;
              color: #1a1a2a;
            }
            .item-top-icon {
              margin-left: 8px;
              padding: 1px 4px;
              text-align: center;
              background-color: #ff5b5b;
              border-radius: 2px;
              font-size: 11px;
              color: #fff;
            }
            .item-statistics {
              font-size: 13px;
              color: #b9bbbd;
              .uni-icons {
                margin-right: 4px;
              }
            }
          }
          .comment-content {
            font-size: 14px;
            color: #60606c;
            line-height: 1.4;
          }
        }
      }
    }
  }
  .video-like {
    margin: 20px 15px 0;
    .video-like-titlebox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .video-like-title {
        font-size: 17px;
        font-weight: 700;
        color: #1a1a2a;
      }
      .video-like-more {
        font-size: 14px;
        color: #60606c;
      }
    }
    .vod-container {
      padding: 15px 0;
    }
  }
}
</style>