import { useNamespace } from '@ibiz-template/vue-util';
import { defineComponent, PropType } from 'vue';
import '@ibiz-template/theme/style/components/common/image-preview/image-preview.scss';
import { RuntimeError, downloadFileFromBlob } from '@ibiz-template/core';

export const ImagePreview = defineComponent({
  name: 'ImagePreview',
  props: {
    file: {
      type: Object as PropType<{ name: string; url: string }>,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('image-preview');

    const onDownload = () => {
      // 发送get请求
      ibiz.net
        .request(props.file.url, {
          method: 'get',
          responseType: 'blob',
          baseURL: '', // 已经有baseURL了，这里无需再写
        })
        .then((response: IData) => {
          if (response.status !== 200) {
            throw new RuntimeError('下载文件失败');
          }
          // 请求成功，后台返回的是一个文件流
          if (!response.data) {
            throw new RuntimeError('文件流数据不存在');
          } else {
            // 获取文件名
            const fileName = props.file.name;
            downloadFileFromBlob(response.data, fileName);
          }
        });
    };

    return {
      ns,
      onDownload,
    };
  },
  render() {
    return (
      <div class={this.ns.b()}>
        <img class={this.ns.e('image')} src={this.file.url} />
        <div class={this.ns.e('toolbar')}>
          <div class={this.ns.e('zoom-bar')}>
            <i-icon class={this.ns.e('zoom-minus')} type='md-remove' />
            <span class={this.ns.e('zoom-percent')}>100%</span>
            <i-icon class={this.ns.e('zoom-plus')} type='md-add' />
          </div>
          <div onClick={this.onDownload} class={this.ns.e('download')}>
            <i-icon type='md-download' />
          </div>
        </div>
      </div>
    );
  },
});