<template>
  <div v-if="permission != 'n'" class="ht-signature">
    <ul class="signature-wrap">
      <li
        v-for="item in signatureList"
        :key="item.userId"
        class="signature-item"
      >
        <img
          :ref="`signature_` + item.signature"
          class="signature-image"
          :src="item.imgSrc || getShowSignature(item)"
        />
      </li>
    </ul>
  </div>
</template>
<script>
  import { mapMutations, mapState } from 'vuex'

  import moment from 'moment'

  import { getCurrentSeal } from '@/api/uc.js'
  import { fileUrl } from '@/api/portal'
  export default {
    name: 'HtSignature',
    props: {
      permission: {
        type: String,
        default: 'w',
        validator: function (value) {
          return ['b', 'w', 'r', 'n'].indexOf(value) !== -1
        },
      },
      value: {
        type: String,
        default: '',
      },
      fieldPath: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        signatureList: [],
        showSignatureMap: {},
      }
    },
    computed: {
      ...mapState('login', ['currentUser']),
      ...mapState('signature', ['signatureConfig', 'signatureStatus']),
      userId() {
        return this.currentUser.userId
      },
      userName() {
        return this.currentUser.username
      },
    },
    watch: {
      signatureConfig: {
        handler(val) {
          if (val.field == this.fieldPath) {
            if (this.signatureStatus === 'start') {
              this.setSignatureStatus('ing') //发出消息，开始签章处理
              if (val.isCover) {
                this.signatureList = []
              } else {
                let index = this.getCurrentIndex(null)
                if (index >= 0) {
                  this.signatureList.splice(index, 1)
                }
              }
              this.getSignature(val.password, val.secretFree)
            }
          } else if (this.signatureStatus === 'start' && !this.fieldPath) {
            this.$notify({
              type: 'warning',
              message: '未获取到签章字段路径，请初始化表单模板后重新保存表单！',
            })
          }
        },
        deep: true,
        immediate: true,
      },
    },
    mounted() {
      if (this.value) {
        this.signatureList = JSON.parse(this.value)
        this.addMobileTopLabelClass()
      }
    },
    methods: {
      ...mapMutations('signature', ['setSignatureConfig', 'setSignatureStatus']),
      handleRemove(item) {
        let index = 0
        let rIdx = 0
        this.signatureList.forEach((sn) => {
          if (sn.userId == item.userId) {
            rIdx = index
          }
          index++
        })
        this.signatureList.splice(rIdx, 1)
      },
      getSignature(password, secretFree) {
        getCurrentSeal(password, secretFree).then((res) => {
          if (res.state) {
            this.reloadSignatures(res.value)
            setTimeout(() => {
              this.setSignatureStatus('success')
            }, 300)
          } else {
            this.setSignatureStatus('fail')
            this.$notify({
              type: 'warning',
              message: res.message,
            })
          }
        })
      },
      getShowSignature(item) {
        if (!item.signature)
          return this.$notify({
            type: 'warning',
            message: '未获取到签章，请检查签章配置！',
          })
        if (!this.showSignatureMap[item.signature]) {
          this.$set(item, 'imgSrc', fileUrl(item.signature))
          this.showSignatureMap[item.signature] = item.imgSrc
        } else {
          setTimeout(() => {
            try {
              if (this.$refs['signature_' + item.signature]) {
                this.$refs['signature_' + item.signature][0].src =
                  this.showSignatureMap[item.signature]
              } else {
                this.getShowSignature(item.signature)
              }
            } catch (error) {
              return this.showSignatureMap[item.signature]
            }
          }, 100)
        }
      },
      reloadSignatures(fileId) {
        if (fileId) {
          this.showSignatureMap[fileId] = null
        }
        let index = this.getCurrentIndex(fileId)
        if (index < 0) {
          this.signatureList.push({
            index: this.signatureList.length + 1,
            userId: this.userId,
            name: this.username,
            signature: fileId,
            createTime: moment(new Date()).format('YYYY-MM-DD:HH:mm:ss'),
          })
          const submitSignatureList = this.signatureList.map((item) => {
            item.imgSrc && delete item.imgSrc
            return {
              ...item,
            }
          })
          this.$emit('input', JSON.stringify(submitSignatureList))
        }
      },
      getCurrentIndex(fileId) {
        let _this = this
        let rindex = -1
        if (this.signatureList.length > 0) {
          let index = 0
          this.signatureList.forEach((f) => {
            if (f.userId == _this.userId) {
              if (fileId) {
                f.signature = fileId
              }
              rindex = index
              return rindex
            }
            index++
          })
        }
        return rindex
      },
      // 移动端有控件需要上下布局时添加上下布局class
      addMobileTopLabelClass(className) {
      if (
        this.$parent.$el &&
        this.$parent.$el.classList.contains('ht-form-item')
      ) {
        setTimeout(() => {
          const customClassName = className
            ? className
            : 'ht-form-item-top-label'
          this.$parent.$el.classList.add(customClassName)
        }, 10)
      }
    },
    },
  }
</script>
<style lang="scss" scoped>
  .ht-signature {
    //margin-left: -120px;
    .signature-wrap {
      //margin-top: 40px;
      margin-bottom: 12px;
      .signature-item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 64px;
        border: 1px solid #eee;
        border-radius: 4px;
        .signature-image {
          width: 106px;
          height: 48px;
        }
      }
    }
  }
</style>