<template>
  <a-modal
    :title="title"
    :width="1300"
    :visible="visible"
    @cancel="handleCancel"
    cancelText="关闭"
    class="ad_cover_container"
  >
    <div>
      <a-row>
        <a-col :span="8" class="addetail_left">
          <a-tabs :defaultActiveKey="defaultActiveKey">
            <a-tab-pane tab="视频" key="1">
              <div class="item">
                <div class="player">
                  <video-player
                    class="vjs-custom-skin"
                    ref="videoPlayer"
                    :options="playerOptions"
                    :playsinline="true"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @ended="onPlayerEnded($event)"
                    @loadeddata="onPlayerLoadeddata($event)"
                    @waiting="onPlayerWaiting($event)"
                    @playing="onPlayerPlaying($event)"
                    @timeupdate="onPlayerTimeupdate($event)"
                    @canplay="onPlayerCanplay($event)"
                    @canplaythrough="onPlayerCanplaythrough($event)"
                    @ready="playerReadied"
                    @statechanged="playerStateChanged($event)"
                  ></video-player>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane tab="视频封面" key="2">
              <a-carousel class="cover_carousel_con">
                <div v-if="videoModel != null">
                  <img :src="videoModel.coverUrl" :width="360" />
                </div>
              </a-carousel>
            </a-tab-pane>
            <a-tab-pane tab="广告封面" key="3" class="cover_container">
              <a-carousel arrows class="cover_carousel_con">
                <div v-for="(item,index) in model" :key="index">
                  <img :src="item.coverUrl" :width="360" />
                </div>
                <div
                  slot="prevArrow"
                  slot-scope
                  class="custom-slick-arrow slick_arrow_left"
                  style="left: 10px;zIndex: 1"
                ></div>
                <div
                  slot="nextArrow"
                  slot-scope
                  class="custom-slick-arrow slick_arrow_right"
                  style="right: 10px;zIndex: 9"
                ></div>
              </a-carousel>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :span="16" class="addetail_right">
          <div v-if="videoModel != null">
            <detail-list :col="1">
              <detail-list-item term="标题">{{videoModel.caption}}</detail-list-item>
            </detail-list>
            <detail-list :col="3">
              <detail-list-item term="快手视频ID">
                <a :href="[videoModel.share_info]" target="_blank">{{videoModel.photo_id}}</a>
              </detail-list-item>
              <detail-list-item term="发布时间">{{videoModel.time}}</detail-list-item>
              <detail-list-item term="抓取时间">{{videoModel.createTime}}</detail-list-item>
            </detail-list>
            <detail-list :col="3">
              <detail-list-item term="展示数">{{videoModel.view_count}}</detail-list-item>
              <detail-list-item term="喜欢数">{{videoModel.like_count}}</detail-list-item>
              <detail-list-item term="评论数">{{videoModel.comment_count}}</detail-list-item>
            </detail-list>
          </div>
          <div v-if="userModel != null">
            <detail-list :col="3">
              <detail-list-item term="发布人">
                <a :href="[userModel.url]" target="_blank">{{userModel.name}}</a>
              </detail-list-item>
              <detail-list-item term="广告主">{{userModel.company}}</detail-list-item>
              <detail-list-item term="推广产品">{{userModel.product}}</detail-list-item>
            </detail-list>
            <detail-list :col="3">
              <detail-list-item term="行业分类">{{userModel.industryCategory}}</detail-list-item>
              <detail-list-item term="一级行业">{{userModel.firstIndustry}}</detail-list-item>
              <detail-list-item term="二级行业">{{userModel.secondIndustry}}</detail-list-item>
            </detail-list>
          </div>
          <a-table :columns="goodsColumns" :dataSource="model" :pagination="{ pageSize: 5 }" :scroll="{ y: 300 }">
            <!-- 图片预览 -->
            <div slot="ADcoverImagePreview" slot-scope="text, record">
              <div style="max-width:100px">
                  <img
                    style="width:100%;"
                    :src="record.coverUrl"
                    @click="coverPreviewShowModal(record,'preview')"
                  />
              </div>
              <a-modal
                title="图片预览"
                v-model="coverPreviewVisible"
                @ok="coverPreviewHandleOk"
                @cancel="coverPreviewHandleCancel"
                :footer="null"
                :maskStyle="coverPreviewMaskStyle"
              >
                <div style="text-align:center;">
                  <img style="width:350px;" :src="coverPreviewUrl" />
                </div>
              </a-modal>
            </div>
            <!-- 图片预览 E -->
          </a-table>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>
<script>
// custom skin css
// import '../src/custom-theme.css'
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import DetailList from '@/components/tools/DetailList'
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import { getAction, deleteAction, putAction, postAction } from '@/api/manage'

const DetailListItem = DetailList.Item
export default {
  components: {
    videoPlayer,
    PageLayout,
    DetailList,
    DetailListItem,
    STable
  },
  data() {
    return {
      goodsColumns: [
        {
          title: '封面ID',
          dataIndex: 'coverId',
          key: 'coverId'
        },
        {
          title: '封面预览',
          //   dataIndex: 'coverUrl',
          //   key: 'coverUrl',
          dataIndex: 'ADcoverImagePreview',
          scopedSlots: { customRender: 'ADcoverImagePreview' }
        },
        {
          title: '创意ID',
          dataIndex: 'creativeId',
          key: 'creativeId'
        },
        {
          title: '展示数',
          dataIndex: 'viewCount',
          key: 'viewCount'
        },
        {
          title: '喜欢数',
          dataIndex: 'likeCount',
          key: 'likeCount'
        },
        {
          title: '评论数',
          dataIndex: 'commentCount',
          key: 'commentCount'
        },
        {
          title: '质量分',
          dataIndex: 'score',
          key: 'score'
        },
        {
          title: 'App名称',
          dataIndex: 'appName',
          key: 'appName'
        },
        {
          title: '发布时间',
          dataIndex: 'time',
          key: 'time'
        }
      ],
      userId: 0,
      photoId: 0,
      title: '操作',
      visible: false,
      model: [],
      userModel: {},
      videoModel: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // videojs options
      playerOptions: {
        height: '640',
        width: '360',
        autoplay: false,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: 'video/mp4',
            // mp4
            src: ''
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ],
        poster: ''
      },
      loadGoodsData: () => {
        var params = {
          photoId: this.photoId,
          userId: this.userId
        }
        return getAction('/ctop/adcover/adlist', params).then(res => {
          this.model = res.result
          console.log(res.result)
          return res.result
        })
      },
      defaultActiveKey: '1',

      //   封面预览弹窗
      coverPreviewVisible: false,
      coverPreviewMaskStyle: {
        background: 'rgba(0,0,0,.08)'
      },
      coverPreviewUrl: ''
    }
  },
  mounted() {
    // console.log('this is current player instance object', this.player)
    setTimeout(() => {
      console.log('dynamic change options', this.player)
      // change src
      // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
      // change item
      // this.$set(this.playerOptions.sources, 0, {
      //   type: "video/mp4",
      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
      // })
      // change array
      // this.playerOptions.sources = [{
      //   type: "video/mp4",
      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
      // }]
      this.player.muted(false)
    }, 5000)
  },
  computed: {
    // player() {
    //   return this.$refs.videoPlayer.player
    // }
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      // console.log('player play!', player)
    },
    onPlayerPause(player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata(player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting(player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying(player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate(player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied(player) {
      // seek to 10s
      console.log('example player 1 readied', player)
      // player.currentTime(10)
      // console.log('example 01: the player is readied', player)
    },
    show(photoId, userId) {
      this.model = []
      this.userModel = {}
      this.videoModel = {}
      this.playerOptions.sources[0].src = ''
      this.photoId = photoId
      this.userId = userId
      this.loadDetail(photoId, userId)
      this.visible = true
      this.defaultActiveKey = '1'
    },
    loadDetail(photoId, userId) {
      var params = {
        photoId: photoId,
        userId: userId
      }
      console.log(params)
      getAction('/ctop/adcover/detail', params).then(res => {
        if (res.success) {
          console.log(res.result)
          this.userModel = res.result.user
          this.videoModel = res.result.video
          this.model = res.result.adlist
          if (res.result.video != null) {
            this.playerOptions.sources[0].src = res.result.video.mvUrl
          }

          // this.dataSource = res.result.records;
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.defaultActiveKey = '1'
    },
    handleCancel() {
      this.close()
      this.defaultActiveKey = '1'
    },

    // 封面预览弹窗
    coverPreviewShowModal(record) {
      this.coverPreviewVisible = true
      this.coverPreviewUrl = record.coverUrl
      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
    },
    coverPreviewHandleOk() {
      this.coverPreviewVisible = false
      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
    },
    coverPreviewHandleCancel() {
      this.coverPreviewVisible = false
      this.coverPreviewUrl = ''
      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
    }
  }
}
</script>
<style lang="scss">
.ant-carousel >>> .slick-slide {
  text-align: center;
  //   height: 160px;
  //   line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ad_cover_container .ant-card-body {
  padding: 0;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}
.addetail_left {
  padding-right: 56px;
  .custom-slick-arrow {
    width: 40px;
    height: 40px;
  }
  .slick_arrow_left {
    background: url(../images/arrow_left.png);
  }
  .slick_arrow_right {
    background: url(../images/arrow_right.png);
  }
    .slick_arrow_left:hover {
    background: url(../images/arrow_left.png)!important;
  }
  .slick_arrow_right:hover {
    background: url(../images/arrow_right.png)!important;
  }
}
</style>