<style>
.ping .ant-modal-content .ant-modal-footer {
  display: none !important;
}
.ping .ant-list-item-content {
  justify-content: space-between;
  cursor: pointer;
}
.ping-list .detele {
  display: none;
}
/* .ping-list:hover span {
  display: block;
} */
li {
  list-style-type: none;
}
</style>
<style lang="scss" scoped>
.actor-photo-list {
  display: flex;
  padding-left: 0;
  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 250px;
    border: 1px solid #f2f2f2;
    img,
    video {
      width: 100%;
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      bottom: 0;
      position: absolute;
      max-height: 250px;
    }
  }
}
</style>
<template>
  <div>
    <a-modal title="详情" v-model="detail" class="ping" :width="800">
      <!-- <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
        <a-tab-pane tab="演员图集" key="1" forceRender>
          <div>
            <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增图集</a>
            <ul class="actor-photo-list">
              <li v-for="(item,index) of photoList" :key="index">
                <a-icon
                  type="close-circle"
                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
                  @click="deteleImg(item.id)"
                />
                <img :src="item.photoUrl" alt />
              </li>
            </ul>
          </div>
          <div style="text-align:right">
            <a-pagination
              showQuickJumper
              :total="total"
              @change="pageChange"
              :pageSize.sync="pageSize"
            />
          </div>
        </a-tab-pane>
        <a-tab-pane tab="演员作品" key="2">
          <div>
            <a type="primary" style="margin-left:10px" @click="addVideo=true">新增作品</a>
            <ul class="actor-photo-list">
              <li v-for="(item,index) of videoList" :key="index">
                <a-icon
                  type="close-circle"
                  style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
                  @click="deteleVideo(item.id)"
                />
                <video
                  class="video"
                  :src="item.videoUrl"
                  controls="controls"
                  style="min-height:160px"
                >您的浏览器不支持 video 标签。</video>
              </li>
            </ul>
          </div>
          <div style="text-align:right">
            <a-pagination
              showQuickJumper
              :total="videoTotal"
              @change="pageChange"
              :pageSize.sync="pageSize"
            />
          </div>
        </a-tab-pane>
      </a-tabs> -->
    </a-modal>
    <!-- 新增图集 -->
    <a-modal
      v-model="addPhoto"
      title="新增图集"
      @ok="handleOk('photo')"
      @cancel="handleCancel('photo')"
    >
     <uploadFile :value.sync="imageUrl" :fileCount="1" uploadType="image" :multiple="false"  :sizeCheck="false"/>
      <!-- <upload-to-ali
        style="margin:10px"
        v-model="imageUrl"
        :customDomain="customDomain"
        preview
        :region="region"
        :bucket="bucket"
        :accept="acceptImage"
        :max="1"
        :size="1024000"
        :accessKeyId="accessKeyId"
        :accessKeySecret="accessKeySecret"
      ></upload-to-ali> -->
    </a-modal>
    <!-- 新增作品 -->
    <a-modal
      v-model="addVideo"
      title="新增作品"
      @ok="handleOk('video')"
      @cancel="handleCancel('video')"
    >
    <uploadFile :value.sync="videoUrl" :fileCount="1" uploadType="video" :multiple="false"  :sizeCheck="false"/>
      <!-- <upload-to-ali
        style="margin:10px"
        v-model="videoUrl"
        :customDomain="customDomain"
        preview
        :region="region"
        :bucket="bucket"
        :accept="acceptVideo"
        :max="1"
        :size="1024000"
        :accessKeyId="accessKeyId"
        :accessKeySecret="accessKeySecret"
      ></upload-to-ali> -->
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import {

} from '@/api/actor'
import UploadToAli from '@femessage/upload-to-ali'
import uploadFile from '@/components/uploadFile.vue'
import { closeAllVideoFun } from '@/utils/videoControl'
export default {
  name: 'VmCard',
  components: {
    UploadToAli,
    uploadFile
  },
  props: {},
  data: function() {
    return {
      addPhoto: false,
      addVideo: false,
      indexDetail: '1',
      to: null,
      comments: [],
      submitting: false,
      value: '',
      moment,
      visible: false,
      detail: false,
      customDomain: '',
      region: 'oss-cn-beijing',
      bucket: 'ctop-media',
      acceptVideo: 'video/mpeg,video/mp4',
      acceptImage: 'image/jpeg,image/jpg,image/png',
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      form: {
        name: '',
        birthday: '',
        sex: null,
        speciality: ''
      },
      noImgUrl: require('@/assets/img/noImg.png'),
      loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
      photoList: [],
      imageUrl: '',
      videoUrl: '',
      total: 1,
      videoTotal: 1,
      pageSize: 4,
      url: {
        list: '/ctop/actor/list'
      },
      columns: [
        {
          title: 'ID',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '生日',
          align: 'center',
          dataIndex: 'birthday'
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex_dictText'
        },
        {
          title: '特长',
          align: 'center',
          dataIndex: 'speciality'
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      currentPage: 1,
      videoList: []
    }
  },
  methods: {
      show(){
          this.detail=true
      },
      callback(){

      }
  }
}
</script>
