<template>
  <div :class="$style.note">
    <div
      :class="$style.notebtn"
      :title="btnInfo.buttonDesc || btnInfo.buttonName"
      @click="handleNote"
      >{{ btnInfo.buttonName }}</div
    >
    <div :class="$style.notecard">
      <!-- 收到的便签 -->
      <a-card
        v-show="isNote"
        size="small"
        :title="`收到的${btnInfo.buttonName}`"
        :class="$style.getnotecard"
      >
        <div slot="extra" :class="$style.addicon" @click="handleCreatenote">
          <a-icon v-if="noteFlag" type="edit" />
          <a-icon v-else type="file-add" />
        </div>
        <div v-if="noteListData && Object.keys(noteListData).length > 0" :class="$style.notecotent">
          <p :class="$style.noteheader"
            ><span>{{ noteListData.creatorName }} </span>
            <span :class="$style.cardtime">{{
              noteListData.creationTime | sdDateFormat('YYYY-MM-DD HH:mm')
            }}</span></p
          >
          <p :class="$style.notecontentp">{{ noteListData.content }}</p>
        </div>
        <div v-else :class="$style.nothing">无内容</div>
      </a-card>
      <!-- 新建便签 -->
      <a-card v-show="isCreateNote" size="small">
        <template slot="title"> 写{{ btnInfo.buttonName }}</template>
        <a-textarea
          ref="writeNote"
          v-model="noteText"
          :placeholder="`请填写${btnInfo.buttonName}`"
          :rows="6"
          :disabled="isDisabled"
          :max-length="200"
        />
        <template slot="actions" class="ant-card-actions">
          <a-button size="small" @click="cancelCreatenote"> 取消 </a-button>
          <a-button
            type="primary"
            size="small"
            :disabled="noteText.length === 0 && !isDraft"
            @click="okCreatenote"
          >
            保存
          </a-button>
        </template>
      </a-card>
    </div>
  </div>
</template>

<script>
import FlowService from '@/webflow/flow-service'
import { Message } from 'ant-design-vue'
import PageService from '@/common/services/page-service'
import components from './_import-components/sd-note-import'

export default {
  name: 'SdNote',
  metaInfo: {
    title: 'SdNote',
  },
  components,
  props: {
    flowData: {
      type: Object,
      required: true,
    },
    doAction: {
      type: Function,
      default: null,
    },
    btnInfo: {
      type: Object,
      default: () => {
        return {
          buttonName: '便签',
          buttonDesc: '',
        }
      },
    },
  },
  data() {
    return {
      noteListData: {}, // 收到的便签数据
      noteId: '',
      noteText: '',
      isNote: false, // 收到的便签
      isCreateNote: false, // 新建便签
      noteFlag: false, // 编辑图标
      isDisabled: false, // 置灰textarea
      isDraft: false, // 起草
    }
  },
  created() {
    if (this.flowData?.instId === 0) return // instID 只标识了是否保存，未保存的时候是0
    const flag = window.location.href.indexOf('draft')
    if (flag === -1) {
      // 非起草
      this.getNoteList().then((res) => {
        this.noteListData = res[0]
        if (this.noteListData && Object.keys(this.noteListData).length > 0) this.isNote = true
      })
    } else {
      this.getSelfList()
    }
  },
  methods: {
    // 获取便签列表
    getNoteList() {
      return FlowService.getNoteList(
        this.flowData.processFormData.formId,
        this.flowData.processFormData.beanId,
        this.flowData.activeStepId
      )
    },
    // 获取草稿状态下的便签内容
    getSelfList() {
      const params = {
        columns: 'id,content',
        maxResults: 1,
        startPosition: 0,
        expressions: [
          {
            dataType: 'str',
            name: 'creatorAccount',
            op: 'eq',
            stringValue: this.flowData.processActiveLogInfo[0].users[0].account,
          },
          {
            dataType: 'int',
            name: 'instid',
            op: 'eq',
            intValue: this.flowData.instId,
          },
          {
            dataType: 'int',
            name: 'activeStepid',
            op: 'eq',
            intValue: this.flowData.activeStepId,
          },
        ],
        formId: 'oaNoteInfo',
      }
      PageService.getList(params).then((_) => {
        if (_?.data?.data[0]?.content) {
          this.noteText = _.data.data[0].content
          this.isDraft = true
          this.noteFlag = true
        }
      })
    },
    // 点击便签按钮
    handleNote() {
      this.isNote = !this.isNote
      if (this.isNote === false) this.isCreateNote = false
    },
    // 新建便签
    handleCreatenote() {
      this.isCreateNote = true
      this.isDisabled = false
    },
    cancelCreatenote() {
      this.isCreateNote = false
    },
    // 保存便签
    saveNote() {
      const params = {
        eventId: 'save',
        inputs: [
          {
            name: 'formId',
            value: this.flowData.processFormData.formId,
          },
          {
            name: 'businessDataId',
            value: this.flowData.processFormData.beanId,
          },
          {
            name: 'instid',
            value: this.flowData.instId,
          },
          {
            name: 'activeStepid',
            value: this.flowData.activeStepId,
          },
          {
            name: 'content',
            value: this.noteText,
          },
          {
            name: 'id',
            value: this.noteId,
          },
        ],
        pageFlowId: 'string',
        pagePath: 'note/oaNoteInfo',
      }
      FlowService.saveNote(params).then((res) => {
        if (res.status === 200) {
          this.isDisabled = true
          const pageFieldInfos = res.data.pageFormData.pageFieldInfos
          pageFieldInfos.forEach((item) => {
            if (item.name === 'id') {
              this.noteId = item.value
            }
          })
          this.isCreateNote = false
          this.isNote = false
          if (this.noteText.length > 0) this.noteFlag = true
          if (this.noteText.length === 0) this.isDraft = false
        }
      })
    },
    okCreatenote() {
      let p = Promise.resolve()
      if (this.flowData.activeStepId === 0) {
        p = this.doAction({ fakeId: 'save' })
      } else {
        setTimeout(() => {
          Message.success({ content: '保存成功' })
        }, 1000)
      }
      p.then(() => {
        this.saveNote()
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$gray: #999;
.note {
  position: absolute;
  top: 60px;
  left: 4px;
  z-index: 20;
  display: inline-block;
  .notebtn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    padding: 2px 0;
    color: $white;
    text-align: center;
    cursor: pointer;
    background-color: $primary-color;
    border-radius: 6px 0 0 6px;
  }
  .notecard {
    position: absolute;
    left: 30px;
    display: flex;
    flex-direction: column;
    :global(.ant-card) {
      width: 220px;
      max-height: 280px;
      box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
        0 12px 48px 16px rgba(0, 0, 0, 0.03);
    }
    .getnotecard {
      :global(.ant-card-body) {
        max-height: 230px;
        overflow-y: scroll;
      }
      .notecotent {
        width: 100%;
        p {
          margin-bottom: 5px;
          font-size: $spin-dot-size-sm;
          .cardtime {
            font-size: $font-size-sm;
            color: $gray;
          }
        }
        .tr {
          text-align: right;
        }
        .noteheader {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .notecontentp {
          width: 100%;
          word-wrap: break-word;
        }
      }
      .nothing {
        color: $gray;
        text-align: center;
      }
    }
    :global(.ant-card-actions) {
      margin-top: 12px;
    }
    .addicon {
      color: $primary-color;
      cursor: pointer;
    }
  }
}
</style>
