<template>
  <div>
    <a-modal v-model="visible" title="操作权限列表" :width="1000" @ok="handleOk">
      <sd-data-table
        ref="table"
        data-url="api/framework/v1/sec-perm-manage/permList"
        :columns="columns"
        :actions="actions"
        show-selection
        :filter-expressions="expressions"
        row-key="id"
        :process-res="processRes"
        @rowClick="rowClick"
      >
      </sd-data-table>
    </a-modal>
    <a-modal v-model="detailVisible" title="操作权限" :width="900" destroy-on-close @ok="submit">
      <sd-form ref="form" :init-values="values">
        <template v-slot="{ model }">
          <sd-form-item name="id" hidden />
          <sd-form-item name="permName" />
          <sd-form-item name="permCode">
            <a-input v-model="model.permCode" disabled />
          </sd-form-item>
        </template>
      </sd-form>
    </a-modal>
  </div>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import axios from '@/common/services/axios-instance'
import TableActionTypes from '@/common/services/table-action-types'
import { Modal } from 'ant-design-vue'
import components from './_import-components/sd-action-perm-import'
const columns = [
  {
    dataIndex: 'permName',
    title: '操作权限名称',
    sdClickable: true,
  },
  {
    dataIndex: 'creationTime',
    sdRender: TableColumnTypes.dateTime,
    title: '创建时间',
  },
]
export default {
  name: 'SdActionPerm',
  metaInfo: {
    title: 'SdActionPerm',
  },
  components,
  data() {
    return {
      visible: false,
      detailVisible: false,
      columns,
      actions: [
        {
          label: '新建',
          id: 'new',
          permission: null,
          type: TableActionTypes.primary,
          callback: () => {
            this.detailVisible = true
          },
        },
        {
          label: '删除',
          id: 'delete',
          permission: null,
          type: TableActionTypes.batch,
          callback: (keys, records) => {
            Modal.confirm({
              title: '确认删除所选中的操作权限吗？',
              onOk: () => {
                axios.delete(`api/framework/v1/sec-perm-manage/permDelete/${keys}`).then(() => {
                  this.$refs.table.refresh()
                })
              },
            })
          },
        },
      ],
      values: [
        {
          name: 'id',
          caption: 'ID',
          dataType: 'id',
        },
        {
          name: 'permName',
          caption: '操作权限名称',
          dataType: 'string',
          required: true,
        },
        {
          name: 'permCode',
          caption: '操作权限编码',
          dataType: 'string',
        },
      ],
      info: {},
    }
  },
  computed: {
    expressions() {
      return [
        {
          name: 'formId',
          op: 'eq',
          dataType: 'str',
          stringValue: this.info.formId,
        },
      ]
    },
  },
  methods: {
    handleOk() {
      this.visible = false
    },
    show(info) {
      this.info = info
      this.visible = true
    },
    processRes(res) {
      return { datas: res.data, total: res.data?.length }
    },
    submit() {
      const params = this.$refs.form.getFieldsValue()
      axios
        .post('api/framework/v1/sec-perm-manage/permSetting', { ...params, ...this.info })
        .then((res) => {
          this.detailVisible = false
          this.$refs.table.refresh()
        })
    },
    rowClick(record) {
      axios.get(`api/framework/v1/sec-perm-manage/permGet/${record.id}`).then((res) => {
        this.detailVisible = true
        this.setFormData(res.data.data)
      })
    },
    setFormData(data) {
      this.$nextTick(() => {
        this.$refs.form.setFieldsValue(data)
      })
    },
  },
}
</script>

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