<!--
 * @Author: Devin
 * @Date: 2023-02-01 15:50:21
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-20 16:02:31
 * @Description: table-demo
-->
<template>
  <common-page-panel
    :search-params="pageConfig.searchParams"
    :form-values="pageConfig.formValues"
    :table-header="pageConfig.tableHeader"
    :function-buttons="pageConfig.btns"
    :table-data="pageConfig.tableData"
    :page="pageConfig.page"
  ></common-page-panel>

  <!-- 弹窗 -->
  <common-dialog
    v-if="showDialog"
    title="新增项"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <common-form :forms="forms"></common-form>
  </common-dialog>

  <!-- 抽屉 -->
  <common-drawer v-if="showDrawer" title="批量导入">
    <common-form :forms="forms"></common-form>
  </common-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const pageConfig = ref<any>({
  searchParams: [
    {
      label: '模板名称',
      name: 'specIdOrName',
      type: 'input',
      value: '',
      col: 6,
      attrs: {
        clearable: true
      }
    }
  ],
  btns: [
    // eslint-disable-next-line no-use-before-define
    { label: '批量删除', name: 'batchDelete', onClick: batchDelete },
    // eslint-disable-next-line no-use-before-define
    { label: '批量导入', name: 'batchImport', onClick: batchImport },
    // eslint-disable-next-line no-use-before-define
    { label: '新增', name: 'batchImport', onClick: createItem }
  ],
  formValues: {
    specIdOrName: ''
  },
  tableHeader: [
    { label: '姓名', name: 'name', width: '100' },
    { label: '年龄', name: 'age', 'min-width': '100' }
  ],
  tableData: [],
  page: {
    pageSize: 10,
    current: 1,
    total: 0
  }
});

const showDialog = ref<any>(false);

function batchDelete() {
  console.log('delete');
}

// 新增
function createItem() {
  showDialog.value = true;
}

function closeDialog() {
  showDialog.value = false;
}

function confirmDialog() {
  console.log('确定');
}

// 弹窗项
const forms = ref<any>([
  {
    label: '姓名',
    name: 'name',
    type: 'input',
    span: 12,
    value: '',
    attrs: {
      clearable: true,
      placeholder: '请输入姓名'
    }
  },
  {
    label: '年龄',
    name: 'age',
    type: 'input',
    span: 12,
    value: '',
    attrs: {
      clearable: true,
      placeholder: '请输入年龄',
      rules: []
    }
  }
]);

// 导入
const showDrawer = ref<any>(false);
function batchImport() {
  showDrawer.value = true;
}
</script>

<style scoped lang="scss"></style>