<template>
  <a-card>
    <sd-data-table-ex
      ref="dataTable"
      :actions="actions"
      form-id="oaDataMaintenanceDbConfig"
      page-id="maintance/oaDataMaintenanceDbConfig"
      show-selection
      :columns="columns"
      :row-key="'id'"
      :search-fields="['tableNames', 'databaseName']"
      @formBtnClick="formBtnClick"
    >
      <template v-slot:form="{ model }">
        <sd-form-item name="id" hidden />
        <sd-form-item name="databaseName"></sd-form-item>
        <sd-form-item name="tableNames">
          <a-textarea v-model="model.tableNames" :autosize="{ maxRows: 20 }" />
        </sd-form-item>
        <sd-form-item name="remarks">
          <a-textarea v-model="model.remarks" />
        </sd-form-item>
      </template>
      <div slot="action" slot-scope="text, record">
        <a-button type="link" @click="clearData([record.id])">清理</a-button>
        <a-button type="link" @click="openLog(record)">清理日志</a-button>
      </div>
      <span slot="status" slot-scope="text">
        {{ ['未执行', '执行中', '已执行'][text] }}
      </span>
    </sd-data-table-ex>
    <a-modal
      :visible="visible"
      destroy-on-close
      :width="1200"
      :footer="null"
      title="清理日志"
      @cancel="visible = false"
    >
      <sd-data-table-ex
        form-id="oaDataMaintenanceLog"
        :columns="logColumns"
        :filter-expressions="filterExpressions"
        :row-key="'id'"
      />
    </a-modal>
  </a-card>
</template>

<script>
import { Modal, Message } from 'ant-design-vue'
import TableColumnTypes from '@/common/services/table-column-types'
import TableActionTypes from '@/common/services/table-action-types'
import WorkbenchService from './workbench-service'
import components from './_import-components/sd-data-clear-tools-import'
const columns = [
  {
    dataIndex: 'databaseName',
    title: '数据库',
    width: '8%',
  },
  {
    title: '数据表',
    dataIndex: 'tableNames',
    sdClickable: true,
    width: '30%',
  },
  {
    title: '创建时间',
    dataIndex: 'creationTime',
    sdRender: TableColumnTypes.dateTime,
    sorter: true,
  },
  {
    title: '最后一次执行时间',
    dataIndex: 'lastModifiedTime',
    sdRender: TableColumnTypes.dateTime,
    sorter: true,
    sdCandidate: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
    sdCandidate: true,
  },
  {
    title: '说明',
    dataIndex: 'remarks',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name: 'SdDataClearTools',
  metaInfo: {
    title: '数据清理工具',
  },
  components,
  data() {
    return {
      visible: false,
      columns,
      logColumns: [
        {
          dataIndex: 'databaseName',
          title: '数据库',
        },
        {
          title: '数据表',
          dataIndex: 'tableName',
          width: '25%',
        },
        {
          title: '清理时间',
          dataIndex: 'creationTime',
          sdRender: TableColumnTypes.dateTime,
          sorter: true,
        },
        {
          title: '执行人员',
          dataIndex: 'creatorName',
          width: '10%',
        },
        {
          title: '数据量',
          dataIndex: 'affectedRows',
          width: '10%',
        },
        {
          title: '消息',
          dataIndex: 'comment',
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.ex.create,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete,
        },
        {
          label: '批量清理',
          id: 'clear',
          type: TableActionTypes.batch,
          permission: null,
          callback: (keys, records) => {
            this.clearData(records.map((item) => item.id))
          },
        },
        {
          label: '黑名单管理',
          id: 'blackList',
          permission: null,
          callback: () => {
            this.$router.replace(`/sd-frame/sd-data-clear-black-list`)
          },
        },
      ],
      confirmTxt: '',
      logId: '',
    }
  },
  computed: {
    filterExpressions() {
      return [
        {
          dataType: 'int',
          name: 'configId',
          op: 'eq',
          intValue: Number(this.logId),
        },
      ]
    },
  },
  methods: {
    formBtnClick(evt, btn, { form, recordId }) {
      switch (btn.buttonId) {
        case 'save': {
          const child = form.getFieldValue('tableNames')
          if (child === 'oa_data_black') {
            Message.error('该表不可被清理！')
            evt.preventDefault()
          }
          break
        }
        default:
          break
      }
    },
    clearData(record) {
      Modal.confirm({
        title: '需要确认',
        width: 500,
        content: () => {
          return [
            <div class={this.$style.warnTxt}>
              将要执行数据删除操作，删除后将无法恢复！确认执行此操作？
            </div>,
            <div>
              此操作可能导致数据丢失。为防止意外，我们会要求您确认您的操作。请输入
              <span class={this.$style.confirmTxt}>确认删除</span>在下方输入框
            </div>,
            <AInput vModel={this.confirmTxt} />,
          ]
        },
        onOk: () => {
          if (this.confirmTxt !== '确认删除') {
            Message.warn('您输入的确认指令不正确，请重新输入!')
            this.confirmTxt = ''
            return Promise.reject(new Error('输入指令错误'))
          }
          WorkbenchService.clearData(record.join(',')).then((res) => {
            if (res) {
              this.$refs.dataTable.refresh()
              Message.success('清理成功')
              this.confirmTxt = ''
            }
          })
        },
      })
    },
    openLog(record) {
      this.logId = record.id
      this.visible = true
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.warn-txt {
  margin: 20px 0;
  color: $btn-danger-border;
}
.confirm-txt {
  padding: 0 5px;
  color: $alert-error-icon-color;
  background: $red-2;
}
</style>
