<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <sd-ywlx-tree
        :selected-keys="selectedKeys"
        :is-search="true"
        @treeSelect="treeSelect"
        @initTreeData="afterInitTreeData"
      ></sd-ywlx-tree>
      <div :class="$style.rightcard">
        <a-card>
          <sd-data-table-ex
            v-if="showData"
            ref="dataTable1"
            form-id="oaBaseBusinessType"
            page-id="base/businesstype/oaBaseBusinessType"
            :columns="columns1"
            show-selection
            :actions="actionsType === true ? actions : actions.slice(1)"
            :filter-expressions="computedExpressions"
            :search-fields="['businessTypeName']"
            @formBtnClick="formBtnClick"
          >
            <!-- 详情表单 -->
            <template v-slot:form="scope">
              <sd-ywlx-form
                v-bind="scope"
                :red-head="isRedHeadField"
                :category-id="categoryId"
                :category-name="categoryName"
                :belonged-org="belongedOrg"
              />
            </template>
          </sd-data-table-ex>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import TableActionTypes from '@/common/services/table-action-types'
import { sdLocalStorage } from '@/common/services/storage-service'
import components from './_import-components/sd-ywlx-manage-import'
export default {
  name: 'SdYwlxManage',
  metaInfo: {
    title: '业务类型维护',
  },
  components,
  data() {
    return {
      actionsType: false, // 根据条件显示新建按钮，没有选择树不显示新建按钮，显示actionsType===true
      selectedKeys: [],
      treeData: [],
      columns1: [
        {
          title: '类型名称',
          dataIndex: 'businessTypeName',
          sdClickable: true, // 列内容是否可点击
        },
        {
          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,
        },
      ],
      categoryId: 0, // 业务类型ID
      categoryName: '', // 业务类型名称
      category: [], // 选择所属类型
      replaceFieldsflow: {
        // 转换树的默认字段value和title
        title: 'text',
        key: 'id',
      },
      isRedHeadField: true, // 是否显示选择模板
      belongedOrg: undefined,
      showData: false,
    }
  },
  computed: {
    computedExpressions() {
      const expressions = [
        {
          dataType: 'str',
          name: 'categoryId',
          op: 'eq',
          stringValue: this.categoryId,
        },
      ]
      if (this.belongedOrg) {
        expressions.push({
          dataType: 'long',
          name: 'belongedOrgId',
          op: 'eq',
          longValue: Number(this.belongedOrg.id),
        })
      }
      return expressions
    },
  },
  created() {
    // 表单中心权限配置
    if (this.$route.query.from) {
      var node = JSON.parse(sdLocalStorage.getItem('appExtra'))
      this.selectedKeys = [node.node.dataRef.id]
      this.treeSelect(this.selectedKeys, node)
    }
  },
  methods: {
    afterInitTreeData(node, belongedOrg) {
      this.selectedKeys = []
      this.categoryName = node.name
      this.categoryId = Number(node.id)
      this.belongedOrg = belongedOrg
      this.actionsType = false
      this.isRedHeadField = true
      if (!this.showData) {
        this.showData = true
      }
    },
    // 点击树
    treeSelect(selectedKeys, info, belongedOrg) {
      if (!info.node.dataRef.children || info.node.dataRef.children.length < 1) {
        if (
          info.node.dataRef.props.redheadEnable === 0 ||
          info.node.dataRef.props.redheadEnable === '0'
        ) {
          this.isRedHeadField = false
        } else {
          this.isRedHeadField = true
        }
        this.categoryName = info.node.dataRef.text
        this.categoryId = Number(info.node.dataRef.id)
        this.selectedKeys = selectedKeys
        this.belongedOrg = belongedOrg
        this.actionsType = true
      }
    },
    formBtnClick(evt, btn, { form, recordId }) {
      if (btn.buttonId === 'save') {
        // 新建时的保存
        if (!recordId && this.belongedOrg) {
          form.setFieldValue('belongedOrgId', this.belongedOrg.id)
        }
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
      :global(.ant-card) {
        min-height: 100%;
      }
    }
  }
}
</style>
