<template>
  <div :class="$style.opinion">
    <div
      v-for="(item, index) in yjs"
      :key="index"
      :class="[$style.itemopinion, { [$style.preview]: item.preview }]"
    >
      <div v-if="item.preview" :class="$style.yulan">
        <span>预览</span>
      </div>
      <p v-if="showField.includes('content')" :class="$style.signContent">
        {{ item.signContent.signContent }}
      </p>
      <sd-picture-card
        v-if="item.signContent.attachments && showField.includes('content')"
        :picture-arr="item.signContent.attachments"
      />
      <!--signTime 拿附件添加时的时间戳做Key,防止更新意见时，意见附件重新加载闪烁和重命名附件后不更新预览名称  -->
      <sd-attachment
        v-if="
          item.signContent.attachment &&
            item.signContent.attachment &&
            showField.includes('content')
        "
        :key="item.signContent.signTime"
        :read-only="true"
        list-type="text"
        :init-value="item.signContent.attachments"
        :group-id="item.signContent.attachment"
        :cat-num-to-hide="['-2']"
      >
      </sd-attachment>
      <div :class="$style.sign">
        <!-- 签名图/名字 -->
        <img
          v-if="item.displaySignature && showField.includes('user')"
          :class="$style.signimage"
          :src="
            (`api/framework/v1/user-signature/download/` + item.displaySignature)
              | sdResource({ ajax: false })
          "
        />
        <span v-else-if="showField.includes('user')" class="sd-signname">{{
          item.displayName
        }}</span>
        <span v-if="showField.includes('rank') && item.displayUserLev" class="sd-signrank">
          ({{ item.displayUserLev }})
        </span>
        <span v-if="item.signContent.signer.trustor" class="sd-trustor">
          (代{{ item.signContent.signer.trustor.trustorName }})
        </span>
        <span v-if="item.signContent.signer.secretary" class="sd-signsecretary">
          ({{ item.signContent.signer.secretary.secretaryName }}代录)
        </span>
        <!-- 部门 -->
        <span v-if="showField.includes('group')" class="sd-signdept">{{ item.displayDept }}</span>
        <!-- 时间 -->
        <span v-if="showField.includes('time')" class="sd-signdate">
          {{ item.signContent.signTime | sdDateFormat(signTimeFormat) }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import components from './_import-components/sd-opinion-view-import'

export default {
  name: 'SdOpinionView',
  components,
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    showField: {
      type: Array,
      default: () => ['content', 'user', 'group', 'time'],
    },
    signTimeFormat: {
      type: String,
      default: 'YYYY-MM-DD HH:mm',
    },
  },
  data() {
    return {}
  },
  computed: {
    yjs() {
      return this.value.map((item) => {
        item.displayName = item.signContent.signer.name
        item.displayDept = item.signContent.signer.deptName
        item.displaySignature = item.signContent.signer.signature
        item.displayUserLev = item.signContent.signer.userLevName
        return item
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@use '@/common/components/sd-web-print.scss' as print;
// 打印时的样式
@include print.wrapper {
  .preview {
    display: none;
  }
}
.opinion {
  position: relative;
  &:empty {
    min-height: 120px;
  }

  margin-top: 4px;
  margin-bottom: 4px;
  .sign-content {
    white-space: pre-wrap;
  }
}
.itemopinion:not(:first-child) {
  margin-top: 10px;
}
.sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  span {
    margin-left: 5px;
  }
  .signimage {
    width: 100px;
  }
}
.preview {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  outline: 1px dashed $border-color-base;
}
.yulan {
  position: absolute;
  left: calc(100% - 50px);
  width: 50px;
  height: 50px;
  color: $border-color-base;
  span {
    display: block;
    transform: rotate(45deg) translate(14px, -8px);
  }
}
</style>
