<template>
  <image-viewer v-if="show" ref="viewer" :tool-loading="loading" :options="options" :name-list="files.map(val => val.oldName)" :url-list="srcList" :initial-index="initialIndex" :on-switch="onSwitch" @download="download" @print="print" @edit="edit" @check="check" @delete="deleteImage" :onClose="close"></image-viewer>
</template>

<script>
import ImageViewer from './image-viewer';
import { update, fileDownload } from '@/api/system/file';
import { downloadFile } from '@/utils';

export default {
  name: 'MyImageViewer',
  components: {
    ImageViewer,
  },
  props: {
    // options参数：
    // download: true,
    // print: true,
    // edit: false,
    // check: false,
    options: {
      type: Object,
      default: () => ({})
    },
    files: {
      type: Array,
      default: () => []
    },
  },
  model: {
    event: 'change',
    prop: 'files',
  },
  data() {
    return {
      show: false,
      initialIndex: 0,
      loading: false,
    };
  },
  computed: {
    srcList() {
      console.log("this.files");
      console.log(this.files);
      return this.files.map(val => {
        if (val.attachFileUrl?.indexOf("http") === 0) {
          return val.attachFileUrl;
        }
        return process.env.VUE_APP_BASE_API + val.attachFileUrl;
      });
    }
  },
  methods: {
    close() {
      this.show = false;
    },
    open(index) {
      this.initialIndex = index;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    // 切换index
    onSwitch(index) {

    },
    // 下载
    download(params) {
      const { index } = params;
      const item = this.files[index];
      this.loading = true;
      fileDownload(item.id).then((res) => {
        const suffix = item.attachFileUrl.substring(item.attachFileUrl.lastIndexOf(".")).toLowerCase();
        downloadFile(res, item.oldName + suffix);
        this.loading = false;
      }).catch(e => {
        this.loading = false;
      });
    },
    // 打印
    print(params) {
      this.$print(this.$refs.viewer.$refs.img[0], {});
    },
    // 保存编辑名称
    edit(params) {
      const { filename, index } = params;
      const item = this.files[index];
      this.loading = true;
      update({
        ...item,
        oldName: filename,
      }).then(res => {
        this.loading = false;
        item.oldName = filename;
        item.name = filename;
        this.$emit('change', [...this.files]);
        this.$message.success('保存成功');
      }).catch(e => {
        this.loading = false;
      });
    },
    // 保存方向
    check(params) {
      const { deg, index } = params;
      if (deg === 0) return;
      const item = this.files[index];
      this.loading = true;
      update({
        ...item,
        angle: deg,
      }).then(res => {
        this.loading = false;
        item.attachFileUrl = res.data.attachFileUrl;
        item.url = process.env.VUE_APP_BASE_API + res.data.attachFileUrl;
        // this.files[index] = res.data;
        this.$emit('change', [...this.files]);
        this.$refs.viewer && this.$refs.viewer.reset();
        this.$message.success('保存成功');
      }).catch(e => {
        this.loading = false;
      });
    },
    deleteImage(params) {
      const { index } = params;
      const item = this.files[index];
      this.loading = true;
      deleteFile(item.id).then(res => {
        this.loading = false;
        const newList = this.files.filter(val => {
          return item.id !== val.id;
        });
        this.$emit('change', newList);
        if (this.initialIndex > 0) {
          // 索引减一
          this.initialIndex -= 1;
        }
        if (newList.length === 0) {
          // 没有附件了关闭
          this.show = false;
        }
        this.$message.success('删除成功');
      }).catch(e => {
        this.loading = false;
      });
    }
  }
}
</script>

<style></style>
