<template>
  <el-dialog
    v-model="props.visible"
    :title="type==1?'CMS文章':'通知公告'"
    width="800px"
    :close-on-click-modal="false"
    :before-close="dialogClose"
    style="margin-top: 20px"
  >
    <el-card class="pt-3 mb-3 proCard">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
    </el-card>
    <el-card>
      <BasicTable
        :columns="columnsType()"
        :request="loadDataTable"
        ref="tableRef"
        highlight-current-row
        @row-click="rowClick"
      />
    </el-card>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="handleSubmits">确定</el-button>
      </span>
    </template>
  </el-dialog>
</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 { ColProps } from 'element-plus';
  import { message } from '@/utils/auth';
  import { columns } from './article/columns';
  import { columns2 } from './notice/columns';
  import { schemas } from './article/querySchemas';
  import { schemas2 } from './notice/querySchemas';

  const emit = defineEmits(['success', 'update:visible']);
  const selectRow = ref({});
  const tableRef = ref();

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

  /**
   * 定义查询参数
   */
  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({
    labelWidth: 80,
    layout: 'horizontal',
    colProps: { span: 8 } as ColProps,
    submitOnReset: true,
    schemas: props.type == 1 ? schemas : schemas2,
  });

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

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

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

  /**
   * 钩子函数
   */
  onMounted(() => {});
</script>
