<template>
  <div>
    <my-form label-width="200px">
      <my-alert type="success">请输入用户信息</my-alert>
      <my-form-item label="用户名" label-width="60px">
        <my-input v-model="info"></my-input>
      </my-form-item>
      <my-form-item label="密码">
        <my-input v-model="info" type="password"></my-input>
      </my-form-item>
      <my-form-item label="接受996">
        <my-switch v-model="isShow"></my-switch>
      </my-form-item>
      <!-- 额外的多套一层 -->
      <my-alert type="warning">
        <my-form-item>
          <my-button @click="loginHandler" type="success">登录</my-button>
          <my-button type="danger" @click="dialogVisible = true"
            >注册</my-button
          >
        </my-form-item>
      </my-alert>
      <my-alert type="error">
        提交及表明同意该协议
        <my-link type="primary" href="https://autumnfish.cn">用户协议</my-link>
      </my-alert>
    </my-form>
    <!-- dialog -->
    <!-- <my-dialog
      :visible="dialogVisible"
      @update:visible="dialogVisible = $event"
      :show-close="true"
      top="100px"
      width="50%"
      title="注了个册"
    > -->
    <my-dialog
      :visible.sync="dialogVisible"
      :show-close="true"
      top="100px"
      width="50%"
      title="注了个册"
    >
      <!-- 头部 -->
      <template #title>
        <!-- <my-alert type="error">注册一个用户呗ღ( ´･ᴗ･` )比心</my-alert> -->
      </template>
      <!-- 主体 -->
      <template #default>
        <my-form label-width="60px">
          <my-form-item label="用户名">
            <my-input v-model="info"></my-input>
          </my-form-item>
          <my-form-item label="密码">
            <my-input v-model="info" type="password"></my-input>
          </my-form-item>
        </my-form>
      </template>
      <!-- 底部 -->
      <template #footer>
        <my-button type="primary">确定</my-button>
        <my-button type="warning">取消</my-button>
      </template>
    </my-dialog>

    <!-- <my-switch v-model="isShow"></my-switch> -->
    <!--  -->
    <!-- <my-switch :value="isShow" @input="isShow = $event"></my-switch> -->

    <!-- <my-link type="danger" href="https://autumnfish.cn">去秋天的鱼哦</my-link>
    <my-alert type="success">恭喜中国夺得金牌</my-alert>
    <my-input
      @focus="focusHandler"
      @blur="blurHandler"
      v-model="info"
      type="text"
      placeholder="写点东西呗!"
    ></my-input>
    <hr />
    <my-input
      @focus="focusHandler"
      @blur="blurHandler"
      :value="info"
      @input="info = $event"
      type="text"
      placeholder="写点东西呗!"
    ></my-input> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      info: '感觉自己萌萌哒!',
      isShow: false,
      dialogVisible: false
    }
  },
  methods: {
    loginHandler () {
      console.log('登录啦!')
      this.$message({ title: '你好哦', duration: 1000 })
    },
    focusHandler () {
      console.log('获得焦点')
    },
    blurHandler () {
      console.log('失去焦点')
    }
  }
}
</script>

<style>
/* .my-form {
  width: 500px;
  margin: 0 auto;
} */
</style>
