<template>
  <div>
    <a-card>
      <sd-data-table-ex
        ref="propertyset"
        form-id="oaFlowAttr"
        page-id="base/flowattr/oaFlowAttr"
        :columns="columns1"
        show-selection
        :actions="actions"
        :search-fields="['attrName']"
      >
        <!-- 详情表单 -->
        <template v-slot:form="{ model, fields }">
          <!-- 一般字段直接写name即可 -->
          <sd-form-item name="flowCategory" />
          <sd-form-item name="button" />
          <sd-form-item name="authRoleField">
            <sd-role-picker v-model="model.authRoleField" option-value="id" />
          </sd-form-item>
          <sd-form-item name="formMode">
            <a-select v-model="model.formMode" mode="multiple">
              <a-select-option
                v-for="(item, index) in fields.formMode.attr.selectListItem"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </sd-form-item>
          <sd-form-item v-if="fields.attrCode.readonly" name="attrCode" />
          <a-form-model-item
            v-else
            :label="'标\u2003\u2003识'"
            :rules="[
              {
                required: true,
                trigger: ['change', 'blur'],
              },
              {
                validator: validator,
                trigger: ['change', 'blur'],
              },
            ]"
            prop="attrCode"
          >
            <a-input v-model="model.attrCode" />
          </a-form-model-item>
          <sd-form-item name="attrName" />
          <sd-form-item name="attrInputType" />
          <sd-form-item name="attrValueRange" />
          <sd-form-item name="defaultAttrValue" />
          <sd-form-item name="attrUseType" />
          <sd-form-item name="attrUseScope" />
          <sd-form-item name="flowName">
            <sd-flow-picker v-model="model.flowName"></sd-flow-picker>
          </sd-form-item>
          <sd-form-item name="mobileVisible" />
          <sd-form-item v-if="model.button === '1'" name="buttonDesc" />
          <sd-form-item name="attrDesc" />
        </template>
      </sd-data-table-ex>
    </a-card>
  </div>
</template>

<script>
import debounce from 'lodash.debounce'
import axios from '@/common/services/axios-instance'
import TableActionTypes from '../common/services/table-action-types'
import components from './_import-components/sd-process-propertyset-import'
export default {
  name: 'SdProcessPropertyset',
  metaInfo: {
    title: '业务属性配置',
  },
  components,
  data() {
    return {
      columns1: [
        // {
        //   title: '序号',
        //   customRender: (text, record, index) => `${index + 1}`,
        // },
        {
          title: '业务分类',
          dataIndex: 'flowCategory',
        },
        {
          title: '名称',
          dataIndex: 'attrName',
          defaultSortOrder: 'descend',
          sdClickable: true,
        },
        {
          title: '标识',
          dataIndex: 'attrCode',
          sdClickable: false,
        },
        {
          title: '取值范围',
          dataIndex: 'attrValueRange',
          sdClickable: false,
        },
        {
          title: '类别',
          dataIndex: 'attrUseType',
          sdClickable: false,
        },
        {
          title: '使用范围',
          dataIndex: 'attrUseScope',
          sdClickable: false,
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.ex.create, // 主按钮，高亮色显示
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
      ],
      treeData: [],
      flowFieldName: '',
      replaceFields: {
        // 转换树的默认字段value和title
        title: 'text',
        value: 'id',
      },
      authRoleOptions: [],
    }
  },
  methods: {
    validator(rule, value, callback) {
      debounce(() => {
        axios
          .get(
            `api/framework/v1/flowattr/check-code?code=${value}&id=${this.$refs.propertyset
              .getDetailModal()
              .getFieldValue('id') || ''}`
          )
          .then((res) => {
            if (res?.data?.status === 'success') {
              callback()
            } else {
              callback('已存在标识，不可以重复')
            }
          })
      }, 500)()
    },
  },
}
</script>

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