<template>
  <a-skeleton active :loading="loading" :paragraph="{rows: 24}">
  <div style="padding: 10px;">
      <a-row>
        <a-col :span="span" v-for="(movie, index) in movies" :key="index" style="padding: 1rem;">
          <a-card class="movie-card" style="width: 200px" @click="detail(movie.id)">
            <img :src="movie.img" style="width: 198px; height: 300px;" alt="海报"/>
            <div class="movie-desc">
              <div class="movie-title" :title="movie.tCn"><p>{{movie.tCn}}</p></div>
              <p style="color: #aaa;margin-bottom: 0">{{movie.movieType}}</p>
              <div class="movie-score" style="margin-bottom: .5rem">
                <a-rate :defaultValue="0.5" allowHalf disabled v-if="movie.r < 1"/>
                <a-rate :defaultValue="1" allowHalf disabled v-else-if="movie.r < 2"/>
                <a-rate :defaultValue="1.5" allowHalf disabled v-else-if="movie.r < 3"/>
                <a-rate :defaultValue="2" allowHalf disabled v-else-if="movie.r < 4"/>
                <a-rate :defaultValue="2.5" allowHalf disabled v-else-if="movie.r < 5"/>
                <a-rate :defaultValue="3" allowHalf disabled v-else-if="movie.r < 6"/>
                <a-rate :defaultValue="3.5" allowHalf disabled v-else-if="movie.r < 7"/>
                <a-rate :defaultValue="4" allowHalf disabled v-else-if="movie.r < 8"/>
                <a-rate :defaultValue="4.5" allowHalf disabled v-else-if="movie.r < 9"/>
                <a-rate :defaultValue="5" allowHalf disabled v-else-if="movie.r < 10"/>
                <a-rate :defaultValue="0" allowHalf disabled v-else/>
                <span style="color: #aaa;font-weight: 600">{{movie.r === -1 ? '暂无' : movie.r}}</span>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    <!-- 电影详情 -->
    <a-modal
      class="movie-detail"
      v-model="detailShow"
      :width="700"
      :keyboard="false"
      :centered="true"
      @cancel="detailClose"
      :maskClosable="false"
      :mask="false"
      :footer="null">
      <a-tabs ref="movieTabs" :activeKey="activeKey" @change="changeTab">
        <a-tab-pane tab="电影详情" key="1">
          <a-skeleton active :loading="detailLoading" :paragraph="{rows: 14}">
            <span>
              <a-row :gutter="2">
                <a-col :span="12" class="poster">
                  <img alt="电影海报" :src="movieDetail.basic.img" class="poster-img">
                </a-col>
                <a-col :span="12">
                  <p>片名：{{movieDetail.basic.name}}</p>
                  <p>片长：{{movieDetail.basic.mins}}</p>
                  <p>是否3D：{{movieDetail.basic.is3D ? '是' : '否'}}</p>
                  <p>是否IMAX：{{movieDetail.basic.isIMAX ? '是' : '否'}}</p>
                  <p>上映日期：{{movieDetail.basic.releaseDate}}</p>
                  <p>上映国家 / 地区：{{movieDetail.basic.releaseArea}}</p>
                  <p>综合评分：{{movieDetail.basic.overallRating === -1 ? '暂无评分' : movieDetail.basic.overallRating}}</p>
                  <p v-if="movieDetail.boxOffice.todayBoxDesUnit">{{movieDetail.boxOffice.todayBoxDesUnit}}：{{movieDetail.boxOffice.todayBoxDes}}</p>
                  <p v-if="movieDetail.boxOffice.totalBoxUnit">{{movieDetail.boxOffice.totalBoxUnit}}：{{movieDetail.boxOffice.totalBoxDes}}</p>
                  <p>预告片：<a @click="video(movieDetail.basic.video.hightUrl)">点击查看</a></p>
                  <a-popover :title="movieDetail.basic.director.name">
                    <template slot="content">
                      <img alt="头像" :src="movieDetail.basic.director.img" style="width:140px; height: 180px"/>
                    </template>
                    <p>导演：<a>{{movieDetail.basic.director.name}}</a></p>
                  </a-popover>
                  <div style="margin-bottom: .4rem">
                    主演：
                    <template v-for="(actor, index) in movieDetail.basic.actors">
                      <a-popover :key="index" :title="actor.name">
                        <template slot="content">
                          <div>
                            <p style="max-width: 140px">扮演：{{actor.roleName ? actor.roleName : '未知 X_X'}}</p>
                            <img alt="头像" :src="actor.img" style="width:140px; height: 180px"/>
                          </div>
                        </template>
                        <span v-if="actor.name">
                          <span v-if="index === 0"><a style="margin-left: -6px;">{{actor.name}}</a> · </span>
                          <span v-else-if="index === movieDetail.basic.actors.length - 1"><a>{{actor.name}}</a></span>
                          <span v-else><a>{{actor.name}}</a> · </span>
                        </span>
                      </a-popover>
                    </template>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col>
                  <a-divider orientation="left">电影简介</a-divider>
                  <div style="text-indent: 1rem;margin-bottom: 2rem">{{movieDetail.basic.story}}</div>
                </a-col>
              </a-row>
            </span>
          </a-skeleton>
        </a-tab-pane>
        <a-tab-pane tab="电影评论" key="2">
          <div>
            <a-list
              itemLayout="horizontal"
              :dataSource="comments">
              <a-list-item slot="renderItem" slot-scope="comment, index">
                <a-list-item-meta
                  :description="comment.content">
                  <div slot="title">
                    {{comment.nickname}}&nbsp;
                    <span style="color: #aaa;font-weight: 400; font-size: 13px">{{getDate(comment.commentDate)}}</span>
                  </div>
                  <a-avatar slot="avatar" :src="comment.headImg" />
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
  </a-skeleton>
</template>
<script>
export default {
  name: 'MovieHot',
  data () {
    return {
      loading: true,
      detailShow: false,
      movies: [],
      span: '',
      screenWidth: document.body.clientWidth,
      timer: null,
      movieDetail: {
        boxOffice: {
          todayBoxDesUnit: '',
          todayBoxDes: '',
          totalBoxUnit: '',
          totalBoxDes: ''
        },
        basic: {
          img: '',
          actors: [],
          director: {
            img: '',
            name: ''
          }
        }
      },
      activeKey: '1',
      detailLoading: true,
      comments: []
    }
  },
  methods: {
    detail (id) {
      this.activeKey = '1'
      this.detailShow = true
      this.detailLoading = true
      this.$get('movie/detail?id=' + id).then((r) => {
        let data = JSON.parse(r.data.data)
        data = data.data
        this.movieDetail = data
        this.detailLoading = false
        this.$get('movie/comments?id=' + id).then((r) => {
          let data = JSON.parse(r.data.data)
          data = data.data
          this.comments = this.comments.concat(data.mini.list)
          this.comments = this.comments.concat(data.plus.list)
        })
      })
    },
    detailClose () {
      this.detailShow = false
      this.comments = []
    },
    video (url) {
      window.open(url)
    },
    changeTab (tab) {
      this.activeKey = tab
    },
    getDate (tm) {
      return new Date(tm * 1000).toLocaleString()
    }
  },
  mounted () {
    const that = this
    let val = window.innerWidth
    if (val > 1660) {
      this.span = 4
    } else if (val > 1250) {
      this.span = 6
    } else if (val > 1000) {
      this.span = 8
    } else if (val > 900) {
      this.span = 10
    } else {
      this.span = 12
    }
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
    this.$get('movie/hot').then((r) => {
      let data = JSON.parse(r.data.data)
      this.movies = data.ms
      this.loading = false
    })
  },
  watch: {
    screenWidth (val) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.screenWidth = val
        if (val > 1660) {
          this.span = 4
        } else if (val > 1250) {
          this.span = 6
        } else if (val > 1000) {
          this.span = 8
        } else if (val > 900) {
          this.span = 10
        } else {
          this.span = 12
        }
      }, 100)
    }
  }
}
</script>
<style lang="less">
  .movie-card {
    .ant-card-body {
      padding: 0 !important;
    }
    .movie-desc {
      padding: 1rem 0 0 0;
      text-align: center;
      .movie-title {
        font-size: .9rem;
        p {
          margin-bottom: 0 !important;
        }
      }
    }
    &:hover {
      cursor: pointer;
      box-shadow: 4px 0 8px 0 rgba(29, 35, 41, 0.1);
    }
  }
  .movie-detail {
    p {
      margin-bottom: .4rem;
    }
    .poster {
      margin-right: -4rem;
      .poster-img {
        width: 198px;
        height: 300px;
      }
    }
  }
</style>
