<template>
  <div>
    <ShowCode :formatCode="formatCode"
              :subTitle="$t('demo.pwdForm.text_2')"
              :title="$t('demo.pwdForm.text_1')">
      <div>
        <HtPwdForm @success="successHandler"
                   @cancel="$message.warning('Cancel')"></HtPwdForm>
      </div>
    </ShowCode>
    <ShowCode :formatCode="topCode"
              :subTitle="$t('demo.pwdForm.text_2')"
              :title="$t('demo.pwdForm.text_3')">
      <div>
        <HtPwdForm @success="successHandler"
                   :labelPosition="'top'"
                   btnAlign="center"
                   @cancel="$message.warning('Cancel')"></HtPwdForm>
      </div>
    </ShowCode>
    <div class="demo-block">
      <h2 class="demo-header-text">Attributes</h2>
      <MdViews url="md/ht-pwd-form/attributes.md">

      </MdViews>
    </div>
    <div class="demo-block">
      <h2 class="demo-header-text">Events</h2>
      <MdViews url="md/ht-pwd-form/events.md">

      </MdViews>
    </div>
    <div class="demo-block">
      <h2 class="demo-header-text">Slots</h2>
      <MdViews url="md/ht-pwd-form/slots.md">

      </MdViews>
    </div>
  </div>
</template>

<script>
import { code, topCode } from './code'
export default {
  name: 'DemoPwdForm',
  data () {
    return {
      formatCode: code,
      topCode
    }
  },
  components: {
    MdViews: () => import('@/views/MdView'),
    ShowCode: () => import('@/components/common/show-code')
  },
  methods: {
    async successHandler (obj) {
      this.$message.success(JSON.stringify(obj))
    }
  }
}
</script>

<style>
</style>
