<template>
  <a-skeleton v-if="loading" :paragraph="{ rows: 5 }" />
  <div v-else :class="$style.modifyWrapper">
    <a-empty v-if="dataSource.length < 1" />
    <a-timeline :class="$style.modify">
      <a-timeline-item v-for="(data, index) in dataSource" :key="index" :class="$style.done">
        <div>
          <sd-user-item :users="[{ code: data.userAccount, name: data.userName }]"></sd-user-item>
        </div>
        <div
          ><p>{{ data.createdTime | sdDateFormat('YYYY-MM-DD HH:mm:ss') }} </p></div
        >
        <div v-for="(item, i) in data.props" :key="i">
          <p
            v-if="
              item.dataType === 'string' || item.dataType === 'title' || item.dataType === 'opinion'
            "
          >
            【{{ item.caption }}】
            <sd-text-diff
              :text1="item.oldValueCaption ? item.oldValueCaption : ''"
              :text2="item.newValueCaption ? item.newValueCaption : ''"
            />
          </p>
          <p v-else-if="item.dataType === 'attachment'">
            【{{ item.caption }}】
            <template v-if="item.action === '上传'">
              <span>上传{{ item.newValue }}</span>
              "{{ item.newValueCaption === null ? '' : item.newValueCaption }}"
            </template>
            <template v-else-if="item.action === '删除'">
              <span>删除{{ item.oldValue }}</span>
              "{{ item.oldValueCaption }}"
            </template>
            <template v-else-if="item.action === '修改'">
              {{ item.oldValueCaption }}
              <span>修改{{ item.newValue }}</span>
              "{{ item.newValueCaption }}"
            </template>
            <template v-else>
              <span>{{ item.action }}</span>
            </template>
          </p>
          <p v-else-if="item.dataType === 'tinymce'"> 【{{ item.caption }}】发生了修改 </p>
          <p v-else>
            【{{ item.caption }}】
            <template
              v-if="
                item.oldValueCaption !== null &&
                  item.oldValueCaption !== '' &&
                  item.newValueCaption !== null &&
                  item.newValueCaption !== ''
              "
            >
              "{{ getDisplayValue(item, 'oldValueCaption') }}"
            </template>
            <span v-if="item.oldValueCaption === null || item.oldValueCaption === ''">新增</span>
            <span
              v-if="
                item.oldValueCaption !== null &&
                  item.oldValueCaption !== '' &&
                  item.newValueCaption !== null &&
                  item.newValueCaption !== ''
              "
              >改为</span
            >
            <span v-if="item.newValueCaption === null || item.newValueCaption === ''">删除</span>
            <template v-if="item.newValueCaption === null || item.newValueCaption === ''">
              "{{ getDisplayValue(item, 'oldValueCaption') }}"
            </template>
            <template v-if="item.newValueCaption !== null && item.newValueCaption !== ''">
              "{{ getDisplayValue(item, 'newValueCaption') }}"
            </template>
          </p>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>
import components from './_import-components/sd-modify-log-import'

export default {
  name: 'SdModifyLog',
  components,
  inject: {
    webflow: { default: () => {} },
    webform: { default: () => {} },
  },
  data() {
    return {
      loading: true,
    }
  },
  computed: {
    dataSource() {
      return (this.webflow?.FlowData || this.webform?.FormData)?.operationLogInfo || []
    },
  },
  mounted() {
    ;(this.webflow?.getLog || this.webform?.getLog)?.('operation').then(() => {
      this.loading = false
    })
  },
  methods: {
    getDataType(item) {
      let type = ''
      switch (item.dataType) {
        case 'string':
        case 'title':
        case 'opinion':
          type = 'text'
          break
        case 'date':
          type = 'date'
          break
        case 'dateTime':
          type = 'dateTime'
          break
        case 'attachment':
          type = 'attachment'
          break
        default:
          break
      }
      return type
    },
    getDisplayValue(item, key) {
      const type = this.getDataType(item)
      const value = item[key] === null ? '' : item[key]
      if (type === 'date' || type === 'dateTime') {
        return this.$options.filters.sdDateFormat(Number(value), this.dateFormatStr(item))
      } else {
        return value
      }
    },
    dateFormatStr(item) {
      let format = ''
      if (item.attrs) {
        if (item.attrs.showDate === 'true') {
          format = 'YYYY-MM-DD'
        }
        if (item.attrs.showTime === 'true') {
          format += format ? ' HH:mm' : 'HH:mm'
        }
      }
      return format || 'YYYY-MM-DD HH:mm:ss'
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.attachment {
  display: inline-block;
}
.modify-wrapper {
  .modify {
    position: relative;
    padding: $padding-lg;
    padding-left: 120px;

    :global(.ant-timeline-item-content) {
      > div:first-child {
        position: absolute;
        left: -120px;
        width: 100px;
        text-align: right;
        p {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .done {
      :global(.ant-timeline-item-head) {
        color: $success-color;
        background-color: $success-color;
        border-color: $success-color;
      }
      :global(.ant-timeline-item-head::after) {
        position: absolute;
        left: 3px;
        display: block;
        width: 1px;
        height: 7px;
        content: '';
        background: white;
        transform: rotate(45deg);
      }
      :global(.ant-timeline-item-head::before) {
        position: absolute;
        top: 2px;
        display: block;
        width: 1px;
        height: 4px;
        content: '';
        background: white;
        transform: rotate(-45deg);
      }
    }
  }
}
</style>
