<template>
  <div id="">
    <a-modal :title="dialogTitle" :open="dialogFormVisible" @cancel="dialogClose" class="jqmm">
      <a-row style="text-align: right;">
        <a-button :type="!addPicPanel ? 'primary' : 'danger'" :icon="!addPicPanel ? 'plus-circle' : 'close-circle'" @click="addPic" v-if="openType">{{ !addPicPanel?"添加多媒体":"取消" }}</a-button>
      </a-row>
      <a-row v-if="addPicPanel" style="text-align:center;">
        <upload ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
      </a-row>
      <a-row>
        <a-tabs style="overflow-y: auto;margin:5px;" :style="{'max-height':testHeight-40+'px',}">
          <a-tab-pane :tab="picturetabName" key="1" style="height: 350px;">
            <a-carousel autoplay style="height: 350px;">
              <div v-for="(item,index) in pictureArray" :key="index">
                <a :href="`${hostUrl}/${item.filePath}`" target="_blank">
                  <img style="height:100%;" :src="`${hostUrl}/${item.filePath}`">
                </a>
                <div class="image-preview-action">
                  <a-icon type="delete" @click="removeFile(item.id)" style="font-size: 36px;" />
                </div>
              </div>
              <p v-if="pictureArray.length==0" class="noPic">暂无图片信息</p>
            </a-carousel>
          </a-tab-pane>
          <a-tab-pane :tab="videotabName" key="2">
            <a-carousel autoplay style="height: 350px;">
              <div v-for="(item,index) in videoArray" :key="index">
                <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true"></video-player>
                <div>
                  <a-button type="danger" icon="delete" @click="removeFile(item.id)"></a-button>
                </div>
              </div>
              <p v-if="pictureArray.length==0" class="noPic">暂无视频信息</p>
            </a-carousel>
          </a-tab-pane>
        </a-tabs>
      </a-row>
      <template slot="footer">
        <a-button @click="dialogFormVisible = false">取 消</a-button>
        <a-button v-if="openType" @click="onSubmit" type="primary">保 存</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { deleteFileById } from '../../api/duChaAPI.js';
import { hostUrl } from '../../utils/global_variable';
import request from '../../utils/gw_ajax_request';
import upload from '../../widgets/uploadFile';
export default {
  name: 'TheRecentAppearance',
  props: [
    'jqmmShow',
    'jqmmEngId',
    'dialogTitle',
    'currentObjectName',
    'openType',
  ],
  components: {
    upload,
  },
  data() {
    return {
      dialogFormVisible: true,
      addPicPanel: false,
      pictureArray: [],
      videoArray: [],
      picturetabName: [],
      videotabName: [],
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
  },
  mounted() {
    this.getPicArray();
  },
  methods: {
    dialogClose() {
      this.$emit('jqmmDialogClose');
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getPicArray() {
      request
        .post(`/file/findFileByBiz?bizId=${this.jqmmEngId}`)
        .then((res) => {
          if (res.success) {
            this.pictureArray = [];
            this.videoArray = [];
            res.data.forEach((item) => {
              if (
                item.fileExt == 'jpg' ||
                item.fileExt == 'JPG' ||
                item.fileExt == 'png' ||
                item.fileExt == 'PNG' ||
                item.fileExt == 'JPEG' ||
                item.fileExt == 'jpeg'
              ) {
                this.pictureArray.push(item);
              } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                this.videoArray.push({
                  height: '320',
                  width: '500',
                  id: item.id,
                  bizId: item.bizId,
                  autoplay: false,
                  muted: true,
                  language: 'en',
                  playbackRates: [0.7, 1.0, 1.5, 2.0],
                  sources: [
                    {
                      type: 'video/mp4',
                      src: this.hostUrl + item.filePath,
                    },
                  ],
                });
              }
            });

            this.picturetabName = '图片资料(' + this.pictureArray.length + ')';
            this.videotabName = '视频资料(' + this.videoArray.length + ')';
          }
        });
    },
    onSubmit() {
      this.submitUpload();
    },
    // 文件上传
    submitUpload() {
      if (this.$refs.uploadFile.submitUpload(this.jqmmEngId)) {
        this.removeNewSupervision();
      }
    },
    removeNewSupervision(arg) {
      if (arg) {
        this.$message.success('上传成功');
        this.addPicPanel = false;
        this.getPicArray();
        // this.$emit('jqmmDialogClose');
        // this.pictureArray = [];
        this.$refs.uploadFile.init();
      } else {
        this.$message.error('上传有误');
      }
    },
    // 删除多媒体文件
    removeFile(id, index) {
      this.$confirm({
        title: '提示',
        content: '此操作将永久删除该文件, 是否继续?',
        okType: 'warning',
        onOk: () => {
          deleteFileById(id, localStorage.getItem('userid')).then((res) => {
            if (res.success) {
              this.getPicArray();
            } else {
              this.$message.error(res.message);
            }
          });
        },
      });
    },
  },
};
</script>

<style lang='less' scoped>
.jqmm {
  .image-preview-action {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    cursor: pointer;
    line-height: 300px;
  }

  .image-preview-action .el-icon-delete {
    font-size: 36px;
  }

  .image-preview-action:hover {
    opacity: 1;
  }

  .noPic {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
    font-size: 17px;
    font-weight: bold;
  }

  .jqmm span.el-dialog__title {
    font-weight: bold;
  }

  /*.el-carousel.el-carousel--horizontal {*/
  /*text-align: center;*/
  /*}*/
  .el-dialog__body {
    padding: 0 30px 20px;
  }
}
</style>
