<template>
  <a-card>
    <sd-data-table-ex
      ref="dataTable"
      :actions="actions"
      form-id="oaDataBlackList"
      page-id="blacklist/oaDataBlackList"
      show-selection
      :columns="columns"
      :row-key="'id'"
      :search-fields="['databaseName', 'tableName', 'blackComment']"
      @formBtnClick="formBtnClick"
    >
      <template v-slot:form="{ model }" ref="forms" :class="$style.wrapper">
        <sd-form-item name="id" hidden />
        <!-- 数据库名称 -->
        <sd-form-item name="databaseName" />
        <!-- 表名 -->
        <a-form-model-item :colon="false">
          <div slot="label">
            {{ fieldName }}
            <a-tooltip>
              <template slot="title" class="ant-form-item-control">
                填写多个表名时会屏蔽多张整表，不可指定条件和值
              </template>
              <a-icon type="question-circle" :class="$style.icon" />
            </a-tooltip>
          </div>
          <div class="ant-col ant-form-item-control-wrapper">
            <a-input v-model="model.tableName"></a-input>
          </div>
        </a-form-model-item>
        <!-- 字段名 -->
        <sd-form-item name="fieldName" />
        <!-- 条件 -->
        <a-form-model-item :colon="false">
          <div slot="label">
            {{ tiaojian }}
            <a-tooltip>
              <template slot="title" class="ant-form-item-control">
                条件为区间时，值为两个数字，并用英文逗号隔开
              </template>
              <a-icon type="question-circle" :class="$style.icon" />
            </a-tooltip>
          </div>
          <div class="ant-col ant-form-item-control-wrapper">
            <a-select ref="select" v-model="model.conditionConfig">
              <a-select-option value="eq">包含</a-select-option>
              <a-select-option value="bet">区间</a-select-option>
              <a-select-option value="gt">大于</a-select-option>
              <a-select-option value="lt">小于</a-select-option>
            </a-select>
          </div>
        </a-form-model-item>
        <!-- 值 -->
        <sd-form-item name="conditionValue" />
        <!-- 备注 -->
        <sd-form-item name="blackComment"></sd-form-item>
        <a-form-item :label="sqlLabel" :class="$style.tips">
          {{ getSql(model) }}
        </a-form-item>
      </template>
    </sd-data-table-ex>
  </a-card>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import { Message } from 'ant-design-vue'
import components from './_import-components/sd-data-clear-black-list-import'
const columns1 = [
  {
    title: '模板名称',
    dataIndex: 'redheadName',
    sdClickable: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
]
const columns = [
  {
    dataIndex: 'databaseName',
    title: '数据库',
  },
  {
    title: '数据表',
    dataIndex: 'tableName',
    sdClickable: true,
    width: '25%',
  },
  {
    title: '字段名',
    dataIndex: 'fieldName',
  },
  {
    title: '条件',
    dataIndex: 'conditionConfig',
    sdCandidate: true,
  },
  {
    title: '值',
    dataIndex: 'conditionValue',
    sdCandidate: true,
  },
  {
    title: '备注',
    dataIndex: 'blackComment',
  },
]

export default {
  name: 'SdDataClearBlackList',
  metaInfo: {
    title: '数据清理黑名单',
  },
  components,
  data() {
    return {
      columns,
      columns1,
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete,
        },
      ],

      sqlLabel: '',
      tiaojian: '条\u2003\u2003件',
      fieldName: '表\u2003\u2003名',
    }
  },
  methods: {
    formBtnClick(evt, btn, { form, recordId }) {
      switch (btn.buttonId) {
        case 'save': {
          const fieldName = form.getFieldValue('fieldName')
          const conditionConfig = form.getFieldValue('conditionConfig')
          const conditionValue = form.getFieldValue('conditionValue')
          if (fieldName.length > 0) {
            if (conditionConfig === undefined || conditionValue === undefined) {
              Message.error('填写字段后条件与值必填！')
              evt.preventDefault()
            }
          }
          if (conditionConfig === 'bet' && conditionValue.length > 0) {
            let num = 0
            for (let i = 0; i < conditionValue.length; i++) {
              if (conditionValue[i] === ',') {
                num++
              }
            }
            if (num >= 2) {
              Message.error('值填写有误！')
              evt.preventDefault()
            } else if (conditionValue.indexOf(',') === -1) {
              Message.error('值填写有误！需要逗号隔开！')
              evt.preventDefault()
            } else {
              const val1 = conditionValue.split(',')[0]
              const val2 = conditionValue.split(',')[1]
              if (isNaN(val1) || isNaN(val2)) {
                Message.error('值填写有误！必须为数字！')
                evt.preventDefault()
              }
            }
          }
          break
        }
        default:
          break
      }
    },
    getSql(model) {
      const sqlTableName = this.checkItem(model.tableName)
      const sqlFieldName = this.checkItem(model.fieldName)
      let sql
      let sqlConditionValue = this.checkItem(model.conditionValue)
      if (model.conditionConfig === 'bet') {
        this.sqlLabel = 'SQL'
        if (sqlConditionValue.indexOf(',') !== -1) {
          sqlConditionValue = sqlConditionValue.replace(',', ' AND ')
        }
        sql =
          'SELECT * FROM ' +
          sqlTableName +
          ' WHERE ' +
          sqlFieldName +
          ' BETWEEN ' +
          sqlConditionValue
      }
      if (model.conditionConfig === 'lt') {
        this.sqlLabel = 'SQL'
        sql =
          'SELECT * FROM ' + sqlTableName + ' WHERE ' + sqlFieldName + ' < ' + model.conditionValue
      }
      if (model.conditionConfig === 'gt') {
        this.sqlLabel = 'SQL'
        sql =
          'SELECT * FROM ' + sqlTableName + ' WHERE ' + sqlFieldName + ' > ' + model.conditionValue
      }
      if (model.conditionConfig === 'eq') {
        this.sqlLabel = 'SQL'
        sql =
          'SELECT * FROM ' +
          sqlTableName +
          ' WHERE ' +
          sqlFieldName +
          ' in(' +
          model.conditionValue +
          ')'
      }

      return sql
    },
    checkItem(names) {
      return names === undefined ? '' : names
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tips {
  margin-bottom: 0;
}
:global(.ant-form-item-no-colon::after) {
  display: none;
}
.icon {
  padding-right: $dropdown-vertical-padding;
}
</style>
