<template>
  <BasicModal
    @register="registerModal"
    width="1500px"
    :title="title"
    v-bind="$attrs"
    @ok="handleSubmit"
  >
    <div>
      <BasicForm @register="registerForm" />
      <div>
        <p>辅助决策知识库</p>
        <a-select style="width: 100%" placeholder="请选择,可多选" mode="multiple">
          <a-select-option
            v-for="knowledgeBaseItem in knowledgeBaseOptions"
            :value="knowledgeBaseItem"
            :key="knowledgeBaseItem"
          >
            {{ knowledgeBaseItem }}
          </a-select-option>
        </a-select>
      </div>
      <div>
        <p>辅助决策专家</p>
        <a-select style="width: 100%" placeholder="请选择,可多选" mode="multiple">
          <a-select-option
            v-for="expertItem in expertOptions"
            :value="expertItem"
            :key="expertItem"
          >
            {{ expertItem }}
          </a-select-option>
        </a-select>
        <BasicTable style="flex: auto" @register="registerTable">
          <template template #action="{ record }">
            <TableAction
              :actions="[
                {
                  label: '删除',
                  // icon: 'ant-design:appstore-add-outlined',
                  onClick: handleDel.bind(null, record),
                },
              ]"
            />
          </template>
        </BasicTable>
      </div>
      <div>
        <p>备注</p>
        <a-textarea placeholder="请输入备注信息" :auto-size="{ minRows: 3, maxRows: 5 }" />
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { computed, ref } from 'vue';
  import { eventCorrelationForm, expertColumn } from './eventCorrelationForm.data';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';

  const props = defineProps({
    isEdict: {
      type: Boolean,
      default: false,
    },
  });
  const knowledgeBaseOptions = ref<Object>(null as any); //辅助决策知识库选项
  const expertOptions = ref<Object>(null as any); //辅助决策专家选项
  const title = computed(() => (props.isEdict ? '编辑' : '新增') + '事件关联配置');

  const [registerModal, { closeModal }] = useModalInner();
  const [registerForm] = useForm({
    labelWidth: 130,
    schemas: eventCorrelationForm,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 8,
    },
  });
  const [registerTable] = useTable({
    title: '',
    columns: expertColumn,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
  });
  function handleSubmit() {
    closeModal();
  }
  /**
   * 删除专家选项
   */
  function handleDel() {}
</script>
<style lang="less" scoped></style>
