<template>
  <div id="">
    <a-modal :title="dialogTitle" :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"></upload>
      </a-row>
      <a-row v-else>
        <viewer :images="pictureArray">
          <div v-for="(item,index) in pictureArray" :key="index" style="overflow:hidden">
            <div class="img_wrapper">
              <img style="width: 100%;height:100%;" :src="`${hostUrl}/${item.filePath}`">
              <div class="image-action">
                <a-icon type="delete" @click="removeFile(item.id)"/>
              </div>
            </div>
            <span>描述信息：{{ item.keyWord }}</span>
          </div>
        </viewer>
        <p v-if="pictureArray.length==0" class="noPic">暂无图片信息</p>
      </a-row>
      <div slot="footer" class="dialog-footer">
        <a-button @click="dialogFormVisible = false">取 消</a-button>
        <eal-button type="primary" @click="onSubmit" v-if="openType">保 存</eal-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',
    'type',
    'openType',
  ],
  components: {
    upload,
  },
  data() {
    return {
      dialogFormVisible: true,
      addPicPanel: false,
      pictureArray: [],
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    },
  },
  mounted() {
    this.getPicArray();
  },
  methods: {
    dialogClose() {
      this.$emit('jqmmDialogClose');
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getPicArray() {
      const params = {
        bizId: this.jqmmEngId,
        bizType: this.type,
      };
      request.post(`/file/findPageInfo`, params).then((res) => {
        if (res.success) {
          this.pictureArray = res.data.list;
        }
      });
    },
    onSubmit() {
      this.submitUpload();
    },
    // 文件上传
    submitUpload() {
      if (this.$refs.uploadFile.submitUpload(this.jqmmEngId, this.type)) {
        this.removeNewSupervision();
      }
    },
    removeNewSupervision(arg) {
      if (arg) {
        this.$message.success('上传成功');
        this.getPicArray();
        this.$emit('jqmmDialogClose');
        // this.pictureArray = [];
        this.$refs.uploadFile.init();
        this.addPicPanel = !this.addPicPanel;
      } 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>
