<template>
  <div id="">
    <a-modal :title="dialogTitleNew" :open="dialogFormVisible" @cancel="dialogClose" width="60%" 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" :picType="picType">
        </upload>
      </a-row>
      <a-row>
        <a-tabs style="overflow-y: auto;margin:5px;">
          <a-tab-pane :label="picturetabName" 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}`" alt>
                </a>
              </div>
              <div v-if="pictureArray.length == 0">
                <p>暂无图片信息</p>
              </div>
            </a-carousel>
          </a-tab-pane>
        </a-tabs>
      </a-row>
      <div slot="footer" class="dialog-footer">
        <a-button @click="dialogFormVisible = false">取 消</a-button>
        <a-button type="primary" @click="onSubmit" v-if="openType">保 存</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { deleteFileById } from '../../../api/duChaAPI.js';
import { hostUrl } from '../../../utils/global_variable.js';
import request from '../../../utils/gw_ajax_request';
import upload from '../../../widgets/uploadPicWithDesc';
export default {
  name: 'TheRecentAppearance',
  props: [
    'jqmmShow',
    'jqmmEngId',
    'dialogTitle',
    'currentObjectName',
    'picType',
    'openType',
  ],
  components: {
    upload,
  },
  data() {
    return {
      dialogFormVisible: true,
      addPicPanel: false,
      pictureArray: [],
      videoArray: [],
      picturetabName: [],
      videotabName: [],
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
    isHistoryPic() {
      if (this.picType == 'history') {
        return true;
      } else {
        return false;
      }
    },
    dialogTitleNew() {
      if (this.isHistoryPic) {
        return this.dialogTitle + '历史图片';
      } else {
        return this.dialogTitle + '佐证材料';
      }
    },
  },
  mounted() {
    this.getPicArray();
  },
  methods: {
    dialogClose() {
      this.$emit('jqmmDialogClose');
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getPicArray() {
      const url = '/file/findPageInfo';
      const data = {
        bizId: this.jqmmEngId,
        bizType: 'history',
        pageSize: 100,
        pageNum: 1,
      };
      if (this.isHistoryPic) {
        data.bizType = 'history';
      } else {
        data.bizType = 'proff';
      }
      request.post(url, data).then((res) => {
        if (res.success && res.data.list.length) {
          const dataList = res.data.list;
          this.pictureArray = [];
          this.videoArray = [];
          dataList.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>
.img_wrapper {
  width: 120px;
  min-height: 120px;
  max-height: 200px;
  position: relative;
  float: left;

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

  +span {
    margin-left: 20px;
  }
}

.image-action {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  opacity: 0;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  cursor: pointer;
  line-height: 40px;
}

.image-action .el-icon-delete {
  font-size: 20px;
  color: #fff;
}

.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;
}

.viewer-container {
  z-index: 9999 !important;
}
</style>
