<template>
  <div>
    <a-modal v-model="visible" destroy-on-close width="1000px" title="修订记录">
      <sd-data-table
        v-if="id"
        ref="dataTable"
        data-url="api/framework/v1/log-query/logs/form-edit"
        :columns="columns"
        :filter-expressions="filterExpressions"
        :search-fields="['userName', 'message']"
        @rowClick="rowClick"
      />
      <template slot="footer">
        <a-button @click="visible = false">退出</a-button>
      </template>

      <!-- 详情页 -->
      <a-modal
        v-model="detailModal"
        destroy-on-close
        title="日志详情"
        v-bind="{ width: 800 }"
        :mask-closable="false"
      >
        <sd-form v-if="detailFormFields.length > 0" :init-values="detailFormFields" read-only>
          <sd-form-item v-for="field in detailFormFields" :key="field.name" :name="field.name" />
        </sd-form>
        <a-empty v-else />
        <template slot="footer">
          <a-button @click="detailModal = false">退出</a-button>
        </template>
      </a-modal>
    </a-modal>
  </div>
</template>

<script>
import axios from '@/common/services/axios-instance'
import TableColumnTypes from '@/common/services/table-column-types'
import components from './_import-components/sd-revision-history-import'

export default {
  name: 'SdRevisionHistory',
  metaInfo: {
    title: '修订记录',
  },
  components,
  data() {
    return {
      id: '',
      columns: [
        {
          title: '日期',
          dataIndex: 'createdTime',
          sdRender: TableColumnTypes.dateTime,
          sdClickable: true,
        },
        {
          title: '修改人',
          dataIndex: 'userName',
        },
        {
          title: '修改类型',
          dataIndex: 'taskType',
        },
        {
          title: '修改信息',
          dataIndex: 'message',
        },
        {
          title: 'id',
          dataIndex: 'id',
          sdHidden: true,
          defaultSortOrder: 'descend',
        },
      ],
      visible: false,
      detailFormFields: [],
      detailModal: false,
    }
  },
  computed: {
    filterExpressions() {
      return [
        {
          dataType: 'str',
          name: 'code',
          op: 'eq',
          stringValue: this.id,
        },
      ]
    },
  },
  methods: {
    show(id) {
      this.id = id
      this.visible = true
    },
    rowClick(record) {
      axios({
        method: 'GET',
        url: `api/framework/v1/log-query/logs/form-edit-details/${record.businessSystemId}/${record.id}`,
      }).then((res) => {
        const props = res.data?.props || {}
        const fields = []
        Object.keys(props).forEach((key, index) => {
          // key值格式："新增字段："+字段英文名，如，新增字段：title
          // key值包含：新增字段、变更字段、删除字段、子表deleteFieldIds时显示
          if (/(新增|变更|删除)字段|子表deleteFieldIds/.test(key)) {
            const arrKey = key.split('：')
            // 相同名称的操作显示在一起
            let field = fields.find((f) => f.caption === arrKey[0])
            // props[key]的格式：字段中文名 或 字段中文名+"；xxx"
            // 展示的日志内容：字段中文名(字段英文名)；如，标题(title)
            const value = props[key].split('；')[0] + (arrKey[1] ? `(${arrKey[1]})` : '')
            if (!field) {
              field = {
                caption: arrKey[0],
                dataType: 'string',
                name: 'field_' + index,
                attr: {
                  controlType: 'StringType',
                  dataType: 'string',
                },
                value,
              }
              fields.push(field)
            } else {
              field.value += '，' + value
            }
          }
        })
        this.detailFormFields = fields
        this.detailModal = true
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
