<template>
  <div>
    <div
      class="pic-card"
      :body-style="{ padding: '0px', margin: '10px', cursor: 'pointer' }"
    >
      <div class="image">
        <van-image v-if="showPicture && value" :src="picture" :style="style" />
        <van-empty v-else :image="noImg" description="暂无签名" />
      </div>
      <div slot="header" class="buttoms">
        <!-- <el-tooltip

          class="item"
          effect="dark"
          content="图片格式：png 图片尺寸：250*70px"
          placement="bottom"
        > -->
        <el-upload
          v-if="isIndexPic"
          accept=".png,.PNG"
          class="upload-demo"
          :action="actionUrl"
          :headers="header"
          name="files"
          :show-file-list="false"
          :on-success="success"
          :on-progress="progress"
          :before-upload="beforeAvatarUpload"
          :multiple="false"
          :limit="10"
          :on-exceed="handleExceed"
        >
          <div>
            <i class="icons icon-my-todo-upload"></i>
            <span>上传签名</span>
          </div>
          <!-- <el-button circle icon="el-icon-upload2" title="上传"></el-button> -->
        </el-upload>
        <!-- </el-tooltip> -->
        <el-upload
          v-if="!isIndexPic"
          accept=".png,.PNG"
          class="upload-demo"
          :action="actionUrl"
          name="files"
          :headers="header"
          :show-file-list="false"
          :on-success="success"
          :on-progress="progress"
          :before-upload="beforeAvatarUpload"
          :multiple="false"
          :limit="10"
          :on-exceed="handleExceed"
        >
          <div>
            <i class="icons icon-my-todo-upload"></i>
            <span>上传签名</span>
          </div>
          <!-- <el-button circle icon="el-icon-upload2" title="上传"></el-button> -->
        </el-upload>
        <div @click="remove()">
          <i class="icon icon-trash"></i>
          <span>删除</span>
        </div>
        <!-- <el-button
          icon="el-icon-delete"
          circle
          style="margin-left: 10px"
          title="移除"
          @click="remove()"
        ></el-button> -->
        <!-- </el-row> -->
      </div>
      <!-- <el-collapse-transition> -->

      <!-- </el-collapse-transition> -->
    </div>
  </div>
</template>
<script>
  import req from '@/utils/request'
  import { mapState } from 'vuex'
  import { Loading } from 'element-ui'
  import { Notify, Dialog } from 'vant'
  export default {
    name: 'HtViewer',
    props: ['value', 'imgHeight', 'imgWidth', 'isIndexPic'],
    data() {
      return {
        noImg: require('../assets/images/noImage.png'),
        httpsFile: { fileName: '', url: '' },
        dialogFormVisible: false,
        showPicture: false,
        openPicture: false,
        style: {
          width: '265px',
          height: '180px',
          borderRadius: '3px',
          padding: '1px',
          margin: '1px',
          cursor: 'pointer',
        },
        imgArr: [],
        options: {
          inline: false,
          button: true,
          navbar: true,
          title: false,
          toolbar: true,
          tooltip: true,
          movable: true,
          zoomable: true,
          rotatable: true,
          scalable: true,
          transition: true,
          fullscreen: true,
          keyboard: true,
          url: 'data-source',
        },
        picture: '',
      }
    },
    computed: mapState({
      header: (state) => {
        return { Authorization: `Bearer ${state.login.currentUser.token}` }
      },
      actionUrl: function () {
        return window.context.portal + '/system/file/v1/fileUpload'
      },
    }),
    mounted() {
      if (this.imgHeight > 0 && this.imgWidth > 0) {
        this.style = {
          height: this.imgHeight + 'px',
          width: this.imgWidth + 'px',
        }
      }
      this.$store.dispatch('menu/downloadImg', this.value).then((res) => {
        if (res != '') {
          this.picture = res
          this.showPicture = true
        }
      })
    },
    created() {
      this.$validator = this.$root.$validator
    },
    methods: {
      handleExceed(files, fileList) {
        // this.$message.warning(`上传图片前，先删除原有图片`);
      },
      progress() {
        Loading.service('文件上传中')
      },
      //文件上传成功时
      success(response, file, fileList) {
        let loadingInstance = Loading.service('文件上传中')
        const this_ = this
        this.$store
          .dispatch('menu/downloadImg', response.fileId)
          .then((res) => {
            if (res != '') {
              this.picture = res
            }
          })
        setTimeout(function () {
          this_.$emit('input', response.fileId)
          this_.showPicture = true
          // 以服务的方式调用的 Loading 需要异步关闭
          loadingInstance.close()
        }, 1000)
      },
      beforeAvatarUpload(file) {
        var FileExt = file.name.replace(/.+\./, '')
        if (['png'].indexOf(FileExt.toLowerCase()) === -1) {
          Notify({ type: 'warning', message: '请上传后缀名为png类型的图片！' })
          return false
        }
      },
      remove() {
        if (!this.value) {
          return
        }
        Dialog.confirm({
          title: '提示',
          message: '确定要删除吗?',
          type: 'warning',
        })
          .then(() => {
            this.$emit('input', '')
            //签章附件不能删除，会导致已签章表单无法找到旧的签章附件
            // if (this.value) {
            //   req
            //     .post(
            //       req.getContext().portal +
            //         "/system/file/v1/remove" ,
            //         this.value
            //     )
            //     .then((r) => {
            //       this.$emit("input", "");
            //     });
            // }
          })
          .catch(() => {})
      },
    },
  }
</script>
<style lang="scss" scoped>
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  ul li {
    list-style: none;
  }
  .upload-demo {
    display: inline-block;
  }
  .pic-card ::v-deep .el-card__header {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .pic-card {
    padding: 16px;
  }
  .image {
    // margin: 16px 16px 50px;
    border: 1px solid #e6e6e6;
    border-radius: 8px 8px 8px 8px;
    height: 140px;
    ::v-deep .van-image {
      width: 100% !important;
      height: 100% !important;
      padding: 0;
      margin: 0 !important;
    }
      .van-image,
      .van-empty {
        width: 100%;
        height: 100%;
      }
    ::v-deep {
      .van-empty__image {
        width: 72px;
        height: 52px;
      }
      .van-empty__description {
        padding: 0;
        margin: 0;
      }
    }
  }
  .buttoms {
    margin-top: 13px;
    display: flex;
    align-items: center;
    & > div {
      display: flex;
      justify-content: flex-start;
      align-items: normal;
      height: 22px !important;
      line-height: 22px;
    }
    .icon {
      font-size: 22px;
      color: #409eff;
    }
    .icons {
      margin: 3px;
      font-size: 16px;
      vertical-align: middle;
      color: #409eff;
      margin-right: 3px;
    }
    .icon + span,
    .icons + span {
      color: #409eff;
      font-weight: 400;
      font-size: 14px;
      margin-left: 4px;
      vertical-align: middle;
    }

    .upload-demo {
      margin-right: 24px;
      margin-bottom: 3px;
      ::v-deep .el-upload {
        height: 22px;
        line-height: 22px;
      }
    }
  }
</style>