<bpa-form
  :model="exampleForm"
  ref="refExampleForm"
  :rules="exampleRules"
>
  <bpa-form-item
    label="姓名"
    prop="name"
    required
    labelFor="thisIDIsMustTheSame"
    @validate="onValidate"
  >
    <bpa-input
      v-model="exampleForm.name"
      id="thisIDIsMustTheSame"
    />
  </bpa-form-item>
</bpa-form>

data() {
  return {
    exampleRules: {
      name: [
        { required: true, message: 'name is required' },
        { min: 3, max: 5, message: 'at least 3 to 5 words', trigger: 'change' }
      ]
    }
  }
}

// required
const rules = {
  input:[{ required: true, message: '此欄位必填', trigger: 'blur' }]
}

// multiple
const rules = {
  check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }]
}

// multiple
const rules = {
  check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }]
}

// max and min
const rules = {
  check:[{ min:0, max: 3, type:'array', message: 'please check(max 3)', trigger: 'change' }]
}

// password
const form = {
   password:'',
   confirm:''
 }
 const validatePsw = (rule: Array<any>, value: string, callback: (par?: any)=>{}) => {
   if (value !== form.password) {
     let msg = 'Not Match!'
     callback(new Error(msg));
   } else {
     callback();
   }
 }
 const rules = {
   confirm:[
     { required: true, validator: validatePsw, trigger:'blur'}
   ],
 }

// regular express
const rules = {
   password:[
     { 
       pattern: /(?=.{12,})((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_])|(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_])).*/,  
       trigger: 'blur' 
     }
   ],
 }ja

<fieldset class="bpa-fieldset">
  <legend>Experience</legend>
  <div class="bpa-fieldset-container">
    <bpa-form-item
      label="Company"
      prop="company"
      labelFor="testModelId2"
     >
      <bpa-input
         v-model="exampleForm.company"
         id="testModelId2"
      />
    </bpa-form-item>
  </div>
</fieldset>

<bpa-card>
  Cotnent
</bpa-card>

<bpa-card nopadding>
  Cotnent
</bpa-card>

<bpa-card 
  header="card header text"
  footer="card footer text"
>
  Cotnent
</bpa-card>

<bpa-card>
  <template v-slot:header>
    <mark>Card Header</mark>
  </template>
  Content
  <template v-slot:footer>
    <bpa-button>Card Footer Button</bpa-button>
  </template>
</bpa-card>

<bpa-card shadow>
  Cotnent
</bpa-card>

<bpa-checkbox value="1" v-model="demoModel">Checkbox</bpa-checkbox>

<bpa-checkbox value="1" v-model="demoModel" disabled>Checkbox</bpa-checkbox>

<bpa-checkbox value="1" v-model="demoModel" name="demo">Checkbox</bpa-checkbox>
<bpa-checkbox value="2" v-model="demoModel" name="demo">Checkbox</bpa-checkbox>

demoModel: ["1", "2"]

<bpa-pagination
  :total="totalPages"
  :current-page.sync="currentPage"
  :pager-count="pagerCount"
  :pageSize="pageSize"
  :pageSizeOptions="pageSizeOptions"
  :layout=['total_item', 'total_page', 'page_size', 'first', 'last', 'jump']
  @change:page="onChangePage"
  @change:pageSize="onChangeSize"
/>

<template>
  <div>
    <section>
      <h2>訊息提示</h2>
      <article>
        <section>
          <h3>基本</h3>
          <bpa-button @click="openMsg1">提示</bpa-button>
        </section>
        <section>
          <h3>前綴</h3>
          <bpa-button @click="openMsg2">純文字</bpa-button>
          <bpa-button @click="openMsg3">客製化前綴（具有危險性）</bpa-button>
        </section>
        <section>
          <h3>展示時間</h3>
          <bpa-button @click="openMsg4">顯示5秒鐘</bpa-button>
          <bpa-button @click="openMsg9">永不關閉（主動關閉）</bpa-button>
        </section>
        <section>
          <h3>主題色</h3>
          <bpa-button @click="openMsg5">Normal</bpa-button>
          <bpa-button @click="openMsg6">Success</bpa-button>
          <bpa-button @click="openMsg7">Warning</bpa-button>
          <bpa-button @click="openMsg8">Danger</bpa-button>
        </section>
        <section>
          <h3>另一種寫法</h3>
          <bpa-button @click="openMsg10">另一種寫法</bpa-button>
        </section>
        <section>
          <h3>關閉觸發</h3>
          <bpa-button @click="openMsg11">關閉訊息觸發</bpa-button>
        </section>
      </article>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Bpa from "@/components";
const { Msg } = Bpa
export default Vue.extend({
  methods: {
    openMsg1() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg2() {
      (this as any).$msg({
        prefix: '⚠',
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg3() {
      (this as any).$msg({
        prefix: '<img src="favicon.ico" alt=""/>',
        dangerHTML: true,
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg4() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 5000
      })
    },
    openMsg5() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg6() {
      (this as any).$msg.success({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg7() {
      (this as any).$msg.warning({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg8() {
      (this as any).$msg.danger({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
      })
    },
    openMsg9() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 0
      })
    },
    openMsg10() {
      Msg({
        prefix: '<img src="favicon.ico" alt=""/>',
        dangerHTML: true,
        msg: '很短',
        duration: 0,
        theme: 'primary',
      })
    },
    openMsg11() {
      (this as any).$msg({
        msg: 'These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.',
        duration: 0,
        onClose: function(){
          alert('關閉了')
        }
      })
    },
  },
})
</script>

<bpa-switch labelText="text" v-model="isOpen"/>

<bpa-switch labelText="text" v-model="isOpen">
  <template v-slot:close-text><img src="favicon.ico" alt=""/>Off</template>
  <template v-slot:open-text>On👍🏽</template>
</bpa-switch>