<template>
  <a-card>
    <sd-data-table-ex
      ref="dataTable1"
      form-id="oaPersonalSysQuickMenu"
      page-id="personal/quickmenu/oaPersonalSysQuickMenu"
      :columns="columns"
      show-selection
      :actions="actions"
      :search-fields="['name']"
    >
      <span slot="name" slot-scope="text, record" :title="record.menuText || text">
        {{ text }}
      </span>
      <template slot="icon" slot-scope="text, record">
        <sd-icon
          v-if="text"
          :type="JSON.parse(record.icon).name"
          :theme="JSON.parse(record.icon).theme"
        />
      </template>
    </sd-data-table-ex>
    <sd-quick-config
      v-if="visible"
      ref="quickmodal"
      :visible="visible"
      :is-sys="true"
      :form-id="formid"
      :quicklinks="quicklinks"
      @handleCancel="handleCancel"
      @navDataClick="saveNav"
    ></sd-quick-config>
  </a-card>
</template>

<script>
import TableActionTypes from '../common/services/table-action-types'
import components from './_import-components/sd-quicknav-manage-import'
export default {
  name: 'SdQuicknavManage',
  metaInfo: {
    title: '默认快捷导航管理',
  },
  components,
  data() {
    return {
      visible: false,
      formid: 'oaPersonalSysQuickMenu',
      columns: [
        {
          title: '快捷导航名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '显示文字',
          dataIndex: 'menuText',
          sdHidden: true,
        },
        {
          title: '图标',
          dataIndex: 'icon',
          scopedSlots: { customRender: 'icon' },
        },
      ],
      actions: [
        {
          label: '配置',
          id: 'new',
          permission: 'create',
          type: TableActionTypes.primary, // 新建按钮，不需要回调，自动处理
          callback: (keys) => {
            this.visible = true
          },
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
      ],
      quicklinks: [],
      selectorData: [],
    }
  },
  methods: {
    onDetailModalShow() {},
    onRecordSaved() {},
    // 快捷导航数据处理
    saveNav(data) {
      this.$refs.dataTable1.refresh(true)
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>

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