<!--
 * @Author: Devin
 * @Date: 2023-02-01 15:50:21
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-20 14:11:57
 * @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="新增项"
    :width="dialogSize"
    :fullscreen="fullscreen"
    @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>

  <common-dialog
    v-if="showCustomDialog"
    title="自定义弹窗"
    :dialog-data="dialogData"
    @close-dialog="handelCancel"
  ></common-dialog>
</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: bigDialog },
    // eslint-disable-next-line no-use-before-define
    { label: '中尺寸弹窗', name: 'batchImport', onClick: middleDialog },
    // eslint-disable-next-line no-use-before-define
    { label: '小尺寸弹窗', name: 'batchImport', onClick: smallDialog },
    // eslint-disable-next-line no-use-before-define
    { label: '自定义弹窗', name: 'batchImport', onClick: customDialog },
    // eslint-disable-next-line no-use-before-define
    { label: '满屏弹窗', name: 'batchImport', onClick: fullDialog },
    {
      label: '自定义弹窗按钮',
      name: 'batchImport',
      // eslint-disable-next-line no-use-before-define
      onClick: handelCustomButtons
    }
  ],
  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);
const dialogSize = ref<any>('middle');
const fullscreen = ref<any>(false);
// 显示弹窗
function handelShowDialog(size: any) {
  showDialog.value = true;
  dialogSize.value = size;
  if (size === 'full') {
    fullscreen.value = true;
  } else {
    fullscreen.value = false;
  }
}
function bigDialog() {
  handelShowDialog('big');
}

// 新增
function middleDialog() {
  handelShowDialog('middle');
}
// 新增
function smallDialog() {
  handelShowDialog('small');
}
// 新增
function customDialog() {
  handelShowDialog(1100);
}
// 新增
function fullDialog() {
  handelShowDialog('full');
}

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);

const showCustomDialog = ref(false);
function handelCustomButtons() {
  showCustomDialog.value = true;
}

function handelCancel() {
  showCustomDialog.value = false;
}

function handelClose() {
  showCustomDialog.value = false;
}

function handelConfirm() {
  showCustomDialog.value = false;
}
const dialogData = ref({
  btns: [
    { label: '取消', name: 'cancel', onClick: handelCancel },
    { label: '关闭', type: 'danger', name: 'close', onClick: handelClose },
    { label: '确认', type: 'promary', name: 'confirm', onClick: handelConfirm }
  ]
});
</script>

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