import { createApp } from "vue";
import App from "./App.vue";
import PenkUi from "penk-ui";

import "./assets/main.css";
import "penk-ui/dist/style.css"

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
let app = createApp(App);

app.use(ElementPlus);

app.use(PenkUi);
app.mount("#app");

<script setup>
import { ref, reactive } from "vue";

const visible = ref(false);
let formData = reactive({});

let formConfig = {
  formItemConfig: [
    {
      label: "App类型",
      prop: "appType",
      type: "select",
      placeholder: "请选择任务状态",
      data: [],
      rules: [{ required: true, message: "请选择任务状态", trigger: "change" }],
    },
    {
      label: "任务类型",
      prop: "taskType",
      type: "select",
      placeholder: "请选择任务状态",
      data: [],
      rules: [{ required: true, message: "请选择任务状态", trigger: "change" }],
    },
    {
      label: "任务名",
      prop: "name",
      type: "input",
      placeholder: "请输入任务名",
      rules: [{ required: true, message: "请输入任务名", trigger: "change" }],
    },
    {
      label: "任务佣金",
      prop: "commission",
      type: "input",
    },
    {
      label: "任务状态",
      prop: "status",
      type: "select",
      data: [
        // 1 待审核，2 审核通过，3 审核不通过，4 结束
        { label: "待审核", value: 1 },
        { label: "审核通过", value: 2 },
        { label: "审核不通过", value: 3 },
        { label: "任务关闭", value: 4 },
      ],
      rules: [{ required: true, message: "请选择任务状态", trigger: "change" }],
    },
    // {
    //   label: "任务指令",
    //   prop: "taskOrder",
    //   type: "input",
    //   inputType: "textarea",
    //   rules: [{ required: true, message: "请输入任务指令", trigger: "blur" }],
    // },
    {
      label: "审核原因",
      prop: "reason",
      type: "input",
      inputType: "textarea",
    },
  ],
  // 自定义校验
  rules: {
    commission: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error("请输入佣金"));
          }

          let regExp = /^(?:[1-9][0-9]?|100)$/;
          if (!regExp.exec(value)) {
            callback(new Error("请输入1-100"));
          }
          callback();
        },
        trigger: "blur",
      },
    ],
  },
};

function open(){
  visible.value=true;
}
</script>

<template>
  <el-button @click="open">test</el-button>
  <PenkButton></PenkButton>
  <!-- 表单弹框 -->
  <PenkForm
    title="title"
    :formConfig="formConfig"
    :formData="formData"
    v-model:visible="visible"
    append-to-body
  >
  </PenkForm>
</template>

<style scoped></style>