<template>
  <div id="">
    <a-modal
      :title="dialogTitle"
      :open="dialogFormVisible"
      @cancel="dialogClose"
      :append-to-body="true"
      class="jqmm"
      width="70%">
      <a-row style="text-align:right;">
        <a-button :type="!addPicPanel ? 'primary' : 'danger'" :icon="!addPicPanel ? 'plus-circle' :'close-circle'" @click="addPic">{{ !addPicPanel ? "添加" : "取消" }}</a-button>
      </a-row>
      <a-row v-if="addPicPanel" style="text-align:center;">
        <upload ref="uploadFile" :url="`/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
        <a-button type="primary" @click="onSubmit">保 存</a-button>
      </a-row>
      <a-row>
        <a-tabs style="overflow-y: auto;margin:0px 5px">
          <a-tab-pane :tab="picturetabName" key="1" style="height: 350px;">
            <a-carousel arrows style="height: 350px;">
              <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                <a-icon type="left-circle" />
              </div>
              <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
              </div>
              <div v-for="(item,index) in pictureArray" :key="index">
                <a :href="`${item.filePath}`" target="_blank" v-if="item.filePath.indexOf('http')>-1">
                  <img style="height:100%;" :src="`${item.filePath}`">
                </a>
                <a :href="`${hostUrl}/${item.filePath}`" target="_blank" v-if="item.filePath.indexOf('http')<0">
                  <img style="height:100%;width: 100%;" :src="`${hostUrl}/${item.filePath}`">
                </a>
                <div class="image-preview-action">
                  <a-icon type="delete" @click="removeFile(item.id)" />
                </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 arrows style="height: 350px;">
              <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                <a-icon type="left-circle" />
              </div>
              <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
              </div>
              <div v-for="(item,index) in videoArray" :key="index">
                <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true"></video-player>
                <div class="image-preview-action">
                  <a-icon type="delete" @click="removeFile(item.id)" />
                </div>
              </div>
              <p v-if="videoArray.length==0" class="noPic">暂无视频信息</p>
            </a-carousel>
          </a-tab-pane>
          <a-tab-pane key="3" :tab="audiotabName">
            <a-table
              bordered
              :data-source="audioArray"
              :columns="columns"
              :style="{ height: testHeight + 'px' }"
              style="width: 100%;margin: 0 auto;"
              rowKey="id">
              <span slot="audio" slot-scope="text">
                <elaudio style="margin-left:15%;width:100px;height:30px;" :theUrl="`${hostUrl}/${text.filePath}`"></elaudio>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="4" :tab="filetabName">
            <a-table bordered :data-source="fileArray" :columns="columns1" style="width: 100%;margin: 0 auto;" rowKey="id">
              <span slot="txt" slot-scope="text">
                <!-- <a :href="`${hostUrl}/${text.filePath}`" target="_blank" rel="noopener noreferrer">
                  {{ text.fileName }}
                </a> -->
                <a @click="preview(text)">{{ text.fileName }}</a>
              </span>
              <span slot="action" slot-scope="text, record, index">
                <a-button size="small" type="primary" @click="downLoad(text)">下载</a-button>
                <a-button size="small" @click="removeFile(text.id, index)" type="danger">删除</a-button>
              </span>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { Base64 } from 'js-base64';
import { deleteFileById } from '../../api/duChaAPI.js';
import { fileUrl, hostUrl, previewUrl } from '../../utils/global_variable.js';
import request from '../../utils/gw_ajax_request';
import elaudio from '../../widgets/elAudioShort.vue';
import upload from '../../widgets/uploadFileAdjustment';
export default {
  name: 'TheRecentAppearance',
  props: ['bizId', 'bizType', 'objId'],
  components: {
    upload,
    elaudio,
  },
  data() {
    return {
      testHeight: 350,
      dialogFormVisible: true,
      dialogTitle: '相关文件',
      addPicPanel: false,
      pictureArray: [],
      videoArray: [],
      audioArray: [],
      fileArray: [],
      picturetabName: '',
      videotabName: '',
      audiotabName: '',
      filetabName: '',
      columns: [
        {
          title: '音频',
          dataIndex: 'audio',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
      columns1: [
        {
          title: '文档',
          dataIndex: 'txt',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
        },
      ],
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
  },
  mounted() {
    this.getPicArray();
  },
  created() {},
  methods: {
    dialogClose() {
      this.$emit('jqmmDialogClose');
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getPicArray() {
      var params = {
        // bizId: this.bizId,
        // bizType: this.bizType,
        // pageSize: 100
        objId: this.objId,
      };
      // request.post(`/file/findPageInfo`, params).then(res => {
      request.post(`/file/getPageListInfo`, params).then((res) => {
        if (res.success) {
          this.pictureArray = [];
          this.videoArray = [];
          this.audioArray = [];
          this.fileArray = [];
          res.data.list.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,
                  },
                ],
              });
            } else if (
              item.fileExt == 'mp3' ||
              item.fileExt == 'MP3' ||
              item.fileExt == 'm4a'
            ) {
              this.audioArray.push(item);
            } else {
              this.fileArray.push(item);
            }
          });

          this.picturetabName = '图片资料(' + this.pictureArray.length + ')';
          this.videotabName = '视频资料(' + this.videoArray.length + ')';
          this.audiotabName = '音频资料(' + this.audioArray.length + ')';
          this.filetabName = '其他资料(' + this.fileArray.length + ')';
        }
      });
    },
    onSubmit() {
      this.submitUpload();
    },
    // 文件上传
    submitUpload() {
      if (this.$refs.uploadFile.submitUpload(this.bizId, this.bizType)) {
        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('上传有误');
      }
    },
    preview(row) {
      const previewServerUrl = previewUrl;
      const fileUrl1 = fileUrl + row.filePath;
      const url =
        previewServerUrl + encodeURIComponent(Base64.encodeURI(fileUrl1));
      console.log(url, 'url');
      window.open(url);
    },
    downLoad(row) {
      const filePath = row.filePath;
      const fileName = row.fileName;
      const url = this.hostUrl + '/' + filePath;
      const a = document.createElement('a');
      a.setAttribute('download', fileName);
      a.setAttribute('target', '_blank');
      a.setAttribute('href', url);
      a.click();
    },
    // 删除多媒体文件
    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>
// .ant-carousel>>>.slick-slide {
//   text-align: center;
//   height: 160px;
//   line-height: 160px;
//   background: #364d79;
//   overflow: hidden;
// }

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

// .ant-carousel>>>.slick-slide h3 {
//   color: #fff;
// }
</style>
