<template>
  <a-modal
    v-model:visible="props.visible"
    title="选择文章"
    width="1000px"
    @cancel="dialogClose"
    style="top: 20px"
  >
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
    <BasicTable
      :columns="columnsType()"
      :request="loadDataTable"
      ref="tableRef"
      :customRow="rowClick"
      :showTableSetting="false"
      :row-class-name="setRowClassName"
    />

    <template #footer>
      <span class="dialog-footer">
        <a-button @click="dialogClose">取消</a-button>
        <a-button type="primary" @click="handleSubmits">确定</a-button>
      </span>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
  import { getArticleList } from '@/api/content/article';
  import { getNoticeList } from '@/api/data/notice';
  import { onMounted, reactive, ref } from 'vue';
  import { useForm } from '@/components/Form/index';
  import { message } from 'ant-design-vue';
  import { columns } from './article/columns';
  import { schemas } from './article/querySchemas';
  import { columns2 } from './notice/columns';
  import { schemas2 } from './notice/querySchemas';

  const emit = defineEmits(['success', 'update:visible']);

  /**
   * 定义接收的参数
   */
  const props = defineProps({
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
    type: {
      type: Number,
      required: true,
      default: 1,
    },
  });
  const selectRow = ref({});
  const tableRef = ref();

  /**
   * 定义查询参数
   */
  const formParams = reactive({
    title: '',
    status: '',
  });

  /**
   * 定义列类型
   */
  const columnsType = () => {
    if (props.type == 1) {
      // 文章
      return columns;
    } else if (props.type == 2) {
      // 通知公告
      return columns2;
    }
  };

  /**
   * 执行提交表单
   */
  const handleSubmits = async () => {
    if (!selectRow.value.id) {
      return message.error('请选择文字文章');
    }
    emit('update:visible', false);
    emit('success', selectRow.value);
  };

  /**
   * 关闭窗体
   */
  const dialogClose = () => {
    emit('update:visible', false);
  };

  /**
   * 加载数据列表
   * @param res 参数
   */
  const loadDataTable = async (res: any) => {
    let result = [];
    if (props.type == 1) {
      result = await getArticleList({ ...formParams, ...res });
    } else {
      result = await getNoticeList({ ...formParams, ...res });
    }

    return result;
  };

  /**
   * 刷新数据列表
   * @param noRefresh 参数
   */
  function reloadTable(noRefresh = '') {
    tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
  }

  /**
   * 注册
   */
  const [register, {}] = useForm({
    rowProps: { gutter: [16, 0] },
    colProps: {
      xs: 24,
      sm: 24,
      md: 12,
      lg: 8,
      xl: 6,
    },
    labelCol: { span: 8, offset: 0 },
    schemas: props.type == 1 ? schemas : schemas2,
  });

  /**
   * 执行提交表单
   * @param values 参数
   */
  function handleSubmit(values) {
    for (const key in formParams) {
      formParams[key] = '';
    }
    for (const key in values) {
      formParams[key] = values[key];
    }
    reloadTable();
  }

  /**
   * 执行重置
   */
  function handleReset() {
    for (const key in formParams) {
      formParams[key] = '';
    }
    reloadTable();
  }

  /**
   * 设置选项行类名
   * @param record 参数
   */
  const setRowClassName = (record) => {
    return record.id === selectRow.value.id ? 'clickRowStyle' : '';
  };

  /**
   * 数据行点击事件
   * @param record 参数
   */
  const rowClick = (record) => {
    return {
      onClick: () => {
        selectRow.value = record;
      },
    };
  };

  /**
   * 钩子函数
   */
  onMounted(() => {});
</script>
<style lang="less">
  .ant-table-tbody {
    .ant-table-row.clickRowStyle,
    .ant-table-cell-row.clickRowStyle {
      td {
        background-color: #e7eeff !important;
      }
      &:hover {
        td {
          background-color: #e7eeff !important;
        }
      }
    }
  }
</style>
