<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 :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']" style="border:1px solid black">
    <div
      class="card-img"
      style="height:250px;border-bottom:1px solid #f2f2f2"
      :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
    >
      <!-- <img :src="img" alt="" height="250"> -->
      <div v-if="editable && type == 'vertical'" class="control">
        <span class="edit">
          <a href="javascript:;">
            <a-icon type="edit" @click="handleDetail(record)"></a-icon>
          </a>
        </span>
        <span class="delete">
          <a-icon type="message" @click="getComment"></a-icon>
        </span>
      </div>
    </div>
    <div class="card-desc panel-body">
      <h2>{{ title }}</h2>
      <p>{{ desc }}</p>
      <a :href="detailUrl" @click="getDetail">详情 ></a>
      <a :href="detailUrl" @click="deleteItemCard" style="float:right">删除 </a>
    </div>
    <a-modal title="评论" v-model="visible" class="ping">
      <div>
        <div style="height:300px;overflow:auto">
          <a-list
            v-if="comments.length"
            :dataSource="comments"
            :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
            itemLayout="horizontal"
          >
            <a-list-item slot="renderItem" slot-scope="item, index" class="ping-list">
              <a-comment
                :author="item.createBy"
                :avatar="item.avatar"
                :content="item.comment"
                :datetime="item.createTime"
              ></a-comment>
              <span class="detele" style="margin:20px;color:red;" @click="detele(item,index)">删除</span>
            </a-list-item>
          </a-list>
          <div v-else style="height：300px;text-align:center;line-height:300px">暂无评论</div>
        </div>
        <a-comment>
          <!-- <a-avatar
            slot="avatar"
            :src="loginInfo.value.avatar"
            alt="Han Solo"
          />-->
          <img :src="loginInfo.value.avatar" alt slot="avatar" />
          <div slot="content">
            <a-form-item>
              <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
            </a-form-item>
            <a-form-item>
              <a-button
                htmlType="submit"
                :loading="submitting"
                @click="handleSubmit"
                type="primary"
              >添加</a-button>
            </a-form-item>
          </div>
        </a-comment>
      </div>
    </a-modal>

    <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">
          <div style="display:flex;flex-direction:row;height:200px;">
            <div
              style="height:200px;width:30%;border:1px solid #f2f2f2;"
              :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
            ></div>
            <div style="flex:1;margin:15px">
              <a-form :form="form">
                <a-form-item label="姓名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <span>{{form.name}}</span>
                </a-form-item>
                <a-form-item label="性别" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <span>{{form.sex==1?"男":"女"}}</span>
                </a-form-item>
                <a-form-item label="出生年月" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <span>{{form.birthday}}</span>
                </a-form-item>
              </a-form>
            </div>
          </div>
          <div style="margin-top:20px">
            <a-collapse accordion>
              <a-collapse-panel header="个人信息" key="1">
                <p>{{form.speciality}}</p>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </a-tab-pane>
        <a-tab-pane tab="演员图集" key="2" 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="3">
          <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>
    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList" @close="closeVideo"></actor-modal>
  </div>
</template>
<script>
import moment from 'moment'
import {
  actorDetail,
  actorCommentList,
  actorCommentAdd,
  actorCommentDetele,
  actorPhotoList,
  actorVideoList,
  actorPhotoDelete,
  actorVideoDelete,
  actorPhotoAdd,
  actorVideoAdd
} from '@/api/actor'
import actorModal from './ActorModal'
import UploadToAli from '@femessage/upload-to-ali'
  import uploadFile from '@/components/uploadFile.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { closeAllVideoFun } from '@/utils/videoControl'
export default {
  name: 'VmCard',
  mixins: [JeecgListMixin],
  components: {
    actorModal,
    UploadToAli,
    uploadFile
  },
  props: {
    type: {
      type: String,
      default: 'vertical'
    },
    editable: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'Title'
    },
    img: {
      type: String,
      default: require('@/assets/img/noImg.png')
    },
    desc: {
      type: String,
      default:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
    },
    detailUrl: {
      type: String,
      default: '#'
    },
    editUrl: {
      type: String,
      default: '#'
    },
    deleteUrl: {
      type: String,
      default: '#'
    },
    id: {
      default() {
        return 0
      }
    },
    record: {
      default() {
        return {}
      }
    }
  },
  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: {
    updateList() {
      this.$emit('updateList')
    },
    pageChange: function(page) {
      console.log(page)
      this.currentPage = page
      if (this.indexDetail == '2') {
        this.getPhoto()
      } else if (this.indexDetail == '3') {
        this.getVideo()
      }
    },
    handleSubmit() {
      if (!this.value) {
        return
      }

      this.submitting = true

      actorCommentAdd({ actorId: this.id, comment: this.value }).then(res => {
        this.submitting = false
        if (res.code == 200) {
          this.getComment()
          this.value = ''
        }
      })
      //   setTimeout(() => {}, 1000)
    },
    handleChange(e) {
      this.value = e.target.value
    },
    // 删除
    deleteItemCard(){
      this.$emit('delete-ok', {id:this.id})
    },
    getDetail() {
      this.indexDetail = '1'
      this.detail = true
      actorDetail({ actorId: this.id }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.form.name = res.result.name
          this.form.birthday = res.result.birthday
          this.form.sex = res.result.sex
          this.form.speciality = res.result.speciality
        }
      })
    },
    getComment() {
      this.visible = true
      this.comments = []
      actorCommentList({ actorId: this.id }).then(res => {
        if (res.code == 0) {
          console.log(res)
          this.comments = res.result.records.reverse()
        }
      })
    },
    detele(item, index) {
      console.log(item, index)

      actorCommentDetele({ id: item.id }).then(res => {
        if (res.code == 200) {
          this.comments.splice(index, 1)
        }
      })
    },
    closeVideo() {
      closeAllVideoFun()
    },
    callback(key) {
      console.log(key)
      if (key == '2') {
        this.closeVideo()
        this.currentPage = 1
        this.getPhoto()
      } else if (key == '3') {
        this.currentPage = 1
        this.getVideo()
      } else if (key == '1') {
        this.closeVideo()
      }
    },
    getPhoto() {
      actorPhotoList({ pageNo: this.currentPage, pageSize: 4, actorId: this.id }).then(res => {
        if (res.code == 0) {
          console.log(res)
          this.photoList = res.result.records
          this.total = res.result.total
        }
      })
    },
    getVideo() {
      actorVideoList({ pageNo: this.currentPage, pageSize: 4, actorId: this.id }).then(res => {
        if (res.code == 0) {
          console.log(res)
          this.videoList = res.result.records
          this.videoTotal = res.result.total
        }
      })
    },
    deteleImg(id) {
      actorPhotoDelete({ id: id }).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.getPhoto()
        }
      })
    },
    deteleVideo(id) {
      actorPhotoDelete({ id: id }).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.getPhoto()
        }
      })
    },
    handleOk(type) {
      const that = this
      if (type == 'photo') {
        actorPhotoAdd({ actorId: that.id, photoUrl: that.imageUrl })
          .then(res => {
            if (res.success) {
              this.getPhoto()
              this.handleCancel('photo')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.handleCancel('photo')
          })
      } else {
        actorVideoAdd({ actorId: that.id, videoUrl: that.videoUrl })
          .then(res => {
            if (res.success) {
              this.getVideo()
              this.handleCancel('video')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.handleCancel('video')
          })
      }
    },
    handleCancel(type) {
      if (type == 'photo') {
        this.imageUrl = ''
        this.addPhoto = false
      } else {
        this.videoUrl = ''
        this.addVideo = false
      }
    }
  }
}
</script>
