<template>
  <a-card>
    <sd-data-table
      ref="dataTable"
      data-url="api/framework/v1/indidocx/getIndidocxMessage"
      :columns="columns"
      :row-key="'id'"
      :actions="actions"
      :search-fields="['userAccount']"
    >
      <template v-slot:updateDate="text">
        <span>{{ text | sdDateFormat('YYYY-MM-DD HH:mm:ss') }}</span>
      </template>
    </sd-data-table>

    <!-- 控件版本历史记录 -->
    <a-modal
      v-model="visiable"
      :mask-closable="false"
      width="700px"
      :body-style="{ padding: 0 }"
      title="控件版本历史记录"
      destroy-on-close
    >
      <template slot="footer">
        <a-button @click="() => (visiable = false)">取消</a-button>
      </template>
      <iframe src="resource/IndiDocX8.0更新记录.html" :class="$style.iframe" />
    </a-modal>
  </a-card>
</template>

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

export default {
  name: 'SdControlLog',
  metaInfo: {
    title: '控件日志',
  },
  components,
  data() {
    return {
      columns: [
        {
          title: '账号',
          dataIndex: 'userAccount',
        },
        {
          title: '用户',
          dataIndex: 'userName',
        },
        {
          title: '更新时间',
          dataIndex: 'updateDate',
          defaultSortOrder: 'desc',
          scopedSlots: { customRender: 'updateDate' },
          width: '178px',
        },
        {
          title: '类型',
          dataIndex: 'controlType',
        },
        {
          title: '版本信息',
          dataIndex: 'indidocxVersion',
        },
        {
          title: '客户端IP',
          dataIndex: 'clientIp',
        },
        {
          title: '设备名称',
          dataIndex: 'equipmentName',
          width: '180px',
        },
        {
          title: '浏览器名',
          dataIndex: 'browserName',
        },
      ],
      actions: [
        // 需要确认是否增加提醒
        {
          label: '导出',
          id: 'export',
          permission: null,
          callback: () => this.$refs.dataTable.exportExcel(),
        },
        {
          label: '控件版本历史记录',
          id: 'cVersionHisLog',
          permission: null,
          callback: () => (this.visiable = true),
        },
      ],
      visiable: false,
    }
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.iframe {
  width: 100%;
  height: 500px;
  overflow: hidden;
  border: none;
}
</style>
