<template>
  <a-card>
    <sd-data-table
      ref="tableList"
      show-selection
      data-url="api/framework/v1/level-manager/list"
      :filter-expressions="customFilterExpressions"
      :columns="columns"
      :actions="actions"
      :row-key="'id'"
      :process-req="processReq"
      @rowClick="rowClick"
    >
    </sd-data-table>
    <a-modal
      :title="isCreate ? '新建' : '编辑'"
      :visible="visibleDialog"
      :width="650"
      destroy-on-close
      :mask-closable="false"
      @ok="handleSubmit"
      @cancel="visibleDialog = false"
    >
      <sd-form ref="formData" :init-values="formData">
        <template v-slot="{ model }">
          <sd-form-item name="code">
            <a-input v-model="model.code" :disabled="!isCreate" />
          </sd-form-item>
          <sd-form-item name="name"> </sd-form-item>
          <sd-form-item name="index"> </sd-form-item>
        </template>
      </sd-form>
    </a-modal>
  </a-card>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import { Modal, message } from 'ant-design-vue'
import ControlService from './control-service'
import components from './_import-components/sd-user-level-import'

export default {
  name: 'SdUserLevel',
  metaInfo: {
    title: '职务维护',
  },
  components,
  data() {
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        sdClickable: true,
      },
      {
        title: '代码',
        dataIndex: 'code',
      },
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '序号',
        dataIndex: 'index',
        defaultSortOrder: 'asc',
      },
    ]
    return {
      customFilterExpressions: [
        {
          dataType: 'str',
          name: 'type',
          op: 'eq',
          stringValue: 'U',
        },
      ],
      columns,
      actions: [
        {
          label: '新建',
          id: 'create',
          permission: null,
          type: 'primary',
          callback: () => {
            this.isCreate = true
            this.visibleDialog = true
            this.formData[0].value = ''
            this.formData[1].value = ''
            this.formData[2].value = ''
            this.selectId = ''
          },
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.batch,
          permission: null,
          callback: (keys, records) => {
            Modal.confirm({
              content: '是否确认删除当前选中的数据',
              okText: '是',
              cancelText: '否',
              okType: 'danger',
              onOk: () => {
                ControlService.batchDeleteLevel({ ids: keys.join(',') }).then((res) => {
                  message.success('删除成功')
                  this.$refs.tableList.clearSelection(true)
                  this.$refs.tableList.refresh()
                })
              },
            })
          },
        },
      ],
      isCreate: true,
      visibleDialog: false,
      selectId: '',
      formData: [
        // 导入表单
        {
          name: 'code',
          caption: '代码',
          dataType: 'string',
          value: '',
          required: true,
        },
        {
          name: 'name',
          caption: '名称',
          dataType: 'string',
          value: '',
          required: true,
        },
        {
          name: 'index',
          caption: '排序号',
          dataType: 'string',
          value: '',
        },
      ],
    }
  },
  methods: {
    rowClick(record) {
      this.isCreate = false
      this.visibleDialog = true
      this.selectId = record.id
      this.formData[0].value = record.code
      this.formData[1].value = record.name
      this.formData[2].value = record.index
    },
    handleSubmit() {
      const data = {
        id: this.selectId,
        type: 'U',
      }
      const values = this.$refs.formData.getFieldsValue()
      for (const key in values) {
        if (values[key]) {
          data[key] = values[key]
        }
      }
      if (this.isCreate) {
        ControlService.createLevel(data).then((res) => {
          if (res.data.id) {
            message.success('新建成功')
            this.resetFormData()
            this.isCreate = true
            this.visibleDialog = false
            this.$refs.tableList.refresh()
          }
        })
      } else {
        ControlService.editLevel(data).then((res) => {
          if (res.data.id) {
            message.success('修改成功')
            this.resetFormData()
            this.isCreate = true
            this.visibleDialog = false
            this.$refs.tableList.refresh()
          }
        })
      }
    },
    // 重置表单
    resetFormData() {
      for (const x in this.$refs.formData.getFieldsValue()) {
        this.$refs.formData.setFieldValue(x, undefined)
      }
    },
    processReq(req) {
      req.data.orderBy = 'index asc,id desc'
      return req
    },
  },
}
</script>

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