<template>
  <div>
    <sd-data-table-ex
      v-if="category.id"
      :key="category.id"
      ref="dataTable"
      form-id="oaBaseBusinessType"
      :page-id="pageId"
      :columns="computeColumns"
      :show-selection="editable"
      :actions="computeActions"
      :filter-expressions="expressions"
      :search-fields="['businessTypeName']"
      :modal-props="modalProps"
    >
      <sd-app-ywlx-form
        slot="form"
        slot-scope="scope"
        v-bind="{
          ...scope,
          category,
          appModuleInfo,
          shareApp: !!appNodeId,
          loadGroupTreeData: getTreePickerData,
        }"
      />
    </sd-data-table-ex>
  </div>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import TableActionTypes from '@/common/services/table-action-types'
import SdAppYwlxMixin from './sd-app-ywlx-mixin.vue'
import components from './_import-components/sd-app-ywlx-list-import'

export default {
  name: 'SdAppYwlxList',
  components,
  mixins: [SdAppYwlxMixin],
  props: {
    category: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      columns: [
        {
          title: '类型名称',
          dataIndex: 'businessTypeName',
          sdClickable: true, // 列内容是否可点击
        },
        {
          title: '所属分组',
          dataIndex: 'businessTypeGroupName',
        },
        {
          title: '绑定流程',
          sorter: false,
          dataIndex: 'businessFlowName',
        },
        {
          title: '创建时间',
          dataIndex: 'creationTime',
          defaultSortOrder: 'descend', // 没有点击任何排序列时，默认的排序列
          sorter: true,
          sdRender: TableColumnTypes.dateTime,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '150px',
          sdRender: TableColumnTypes.ex.switch,
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.ex.create,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete,
        },
      ],
    }
  },
  computed: {
    pageId() {
      return this.editable
        ? 'base/businesstype/oaBaseBusinessType'
        : 'base/businesstype/oaBaseBusinessType?mode=VIEW'
    },
    computeColumns() {
      return this.editable ? this.columns : this.columns.filter((col) => col.dataIndex !== 'status')
    },
    computeActions() {
      if (!this.editable) return []
      const actions = [...this.actions]
      // 当前选中的节点，不允许新建（新建按钮在数组的第一个元素）
      if (!this.create) {
        actions.shift()
      }
      return actions
    },
    create() {
      return !!this.category.props?.appModuleId
    },
    expressions() {
      const expressions = [
        {
          dataType: 'str',
          name: 'appId',
          op: 'eq',
          stringValue: this.appId,
        },
      ]
      // 当前节点允许新建，则传parentId
      if (this.create) {
        expressions.push({
          dataType: 'str',
          name: 'businessTypeGroupId',
          op: 'eq',
          stringValue: this.category.id,
        })
      }
      // 公共应用
      if (this.appNodeId) {
        // 公共应用可编辑（即个性化）
        if (this.editable) {
          expressions.find((e) => e.name === 'appId').stringValue = this.appNodeId
        } else {
          // 不可编辑（即公共）
          expressions.push({
            dataType: 'str',
            name: 'appNodeId',
            op: 'eq',
            stringValue: this.appNodeId,
          })
        }
      }
      return expressions
    },
    modalProps() {
      return this.editable ? undefined : { footer: null }
    },
  },
  methods: {},
}
</script>

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