<template>
  <div style="width: 100%;height: 100%;padding: 0px;">
    <div style="display: flex;flex-wrap:wrap;align-items:flex-end;border:1px;">
      <div v-for="(item,index) in signatureList" class="signatureDiv" style="border:1px;">
        <img :src="item.url" :style="imgStyle" class="imgClass"/>
        <div class="button-list">
          <a-icon type="eye" :title="LocleUtil.getLocale('m.common.button.preview')" @click="handlePreview(item)" style="cursor: pointer;font-size: 18px;"></a-icon>
          <a-icon v-if="!disabled" type="delete" :title="LocleUtil.getLocale('m.common.button.delete')" @click="deleteFile(item)" style="cursor: pointer;font-size: 18px;margin-left: 8px;"></a-icon>
        </div>

      </div>
      <a-button v-if="!disabled" @click="openSignature">{{LocleUtil.getLocale('m.common.button.signature')}}</a-button>
    </div>
    <SignatureDialog ref="signatureDialog"
                     :fileName="fileName" :bizPath="bizPath"
                     @setSignature="setSignature"></SignatureDialog>
    <a-modal
      :maskClosable="false"
      :keyboard="false"
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImageUrl"/>
    </a-modal>
  </div>
</template>

<script>
  import SignatureDialog from './signatureDialog'
  import YchConstant from "../utils/YchConstant"
  import {deleteAction,getAction,uidGenerator,getFileAccessHttpUrl } from '../utils/manage'
  import LocleUtil from "../utils/LocleUtil";
  export default {
    name: "Signature",
    computed: {
      LocleUtil() {
        return LocleUtil
      }
    },
    components:{
      SignatureDialog
    },
    props:{
      fileName:{
        type:String,
      },
      disabled:{
        type:Boolean,
        default:false
      },
      multiple:{
        type:Boolean,
        default:false
      },
      bizPath:{
        type:String
      },
      value: {
        type: String,
      },
      imgStyle:{
        type:String,
        default:"width:200px;height:120px;"
      },
      record: Object,
      property: String,
      //个人多次签名是否覆盖之前的签名
      cover:{
        type:Boolean,
        default:true
      }
    },
    data() {
      return{
        previewVisible: false,
        previewImageUrl: '',
        signatureList:[],
        url:{
          deleteUrl: YchConstant.PREFIX_SYSTEM + '/common/deleteFile'
        }
      }
    },
    created() {

    },
    watch: {
      value: {
        handler (val) {
          let list = val?JSON.parse(val): []
          this.signatureList = (list instanceof Array)?list:[]
        },
        immediate: true
      }
    },
    methods: {
      // 预览
      handlePreview (file) {
        this.previewImageUrl = file.url
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      openSignature(){
        //优先获取用户已有签名
        this.$refs.signatureDialog.visible = true
      },
      setSignature(img){
        if(this.multiple){
          if(this.signatureList && this.signatureList.length>0){
            //cover为true时 判断当前用户是否存在签名，已经存在的删除原来的签名
            if(img.userId && this.cover){
              this.signatureList = this.signatureList.filter(item=>item.userId != img.userId)
            }
            this.signatureList.push(img)
          }else{
            this.signatureList = [img]
          }
        }else{
          this.signatureList = [img]
        }

        const arrString = this.signatureList.length > 0 ? JSON.stringify(this.signatureList) : ''
        this.$emit('change', arrString)
        this.$emit('input', arrString)
        this.$emit('setFieldValue', this.property, arrString, this.record)
      },
      deleteFile(file){
        const that = this;
        this.$confirm({
          title: LocleUtil.getLocale('m.common.title.delete'),
          okText: LocleUtil.getLocale('m.common.button.ok'),
          cancelText: LocleUtil.getLocale('m.common.button.cancel'),
          content: LocleUtil.getLocale('m.eform.formDesign.label.shi-fou-shan-chu-filename', [""]),
          onOk() {
            deleteAction(that.url.deleteUrl, {url: file.url}).then((res) => {
              if (res.success) {
                let matchKey = file.uid !== undefined ? 'uid' : 'name';
                that.signatureList = that.signatureList.filter(item=>item[matchKey] !== file[matchKey]);
                const arrString = that.signatureList.length > 0 ? JSON.stringify(that.signatureList) : ''
                that.$emit('change', arrString)
                that.$emit('input', arrString)
                that.$emit('setFieldValue', that.property, arrString, that.record)
              } else {
                that.messageUtil.error(LocleUtil.getLocale('m.common.tip.deleteFileFailed'));
              }
            })
          },
          onCancel(){
          }
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .signatureDiv{
    position:relative;
  }

  .signatureDiv .imgClass{
    position:relative;
  }

  .signatureDiv .button-list {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    white-space: nowrap;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  .signatureDiv:hover > .button-list{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    white-space: nowrap;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0.5;
  }

  .signatureDiv:hover > .imgClass{
    display: block;
    position:relative;
    opacity: 0.5;
    background-color: #859094;
  }

</style>
