<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="演示效果" name="demo">
      <form data-vv-scope="form1" v-form name="online-form">
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <th class="group-th" colspan="4">基础表单</th>
            </tr>
            <tr v-permit="4">
              <th width="10%">密码：</th>
              <td width="40%">
                <ht-input
                  v-model="data.bo.password"
                  :validate="'required'"
                  type="password"
                  placeholder="请输入密码"
                />
              </td>
              <th width="10%">确认密码：</th>
              <td width="40%">
                <ht-input
                  v-model="data.bo.confirmPwd"
                  :validate="'required|confirmed:'+data.bo.password"
                  type="password"
                  placeholder="请输入确认密码"
                />
              </td>
            </tr>
            <tr v-permit="4">
              <th width="10%">出生日期：</th>
              <td>
                <ht-date
                  v-model="data.bo.csrq"
                  :validate="{'required':true,'isEnd': data.bo.bysj}"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :showDate="true"
                  :day="-3"
                />
              </td>
              <th>毕业时间：</th>
              <td>
                <ht-date
                  v-model="data.bo.bysj"
                  name="bysj"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :validate="{'required':true,'isBefore': new Date().format('yyyy-MM-dd')}"
                />
              </td>
            </tr>
            <tr v-permit="4">
              <th width="10%">isBefore：</th>
              <td>
                <ht-date
                  v-model="data.bo.isBefore"
                  :validate="{'required':true,'isBefore': new Date().format('yyyy-MM-dd')}"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </td>
              <th>isAfter：</th>
              <td>
                <ht-date
                  v-model="data.bo.isAfter"
                  format="yyyy-MM-dd hh:mm:ss"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  :validate="{'required':true,'isAfter': new Date().format('yyyy-MM-dd hh:mm:ss')}"
                />
              </td>
            </tr>
          </tbody>
        </table>
        <pre>{{data.bo}}</pre>
      </form>
    </el-tab-pane>
    <el-tab-pane label="api文档" name="api">
      <MdView url="md/validation.md" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import MdView from "@/views/MdView.vue";

export default {
  components: { MdView },
  data() {
    return {
      activeName: "demo",
      data: {
        bo: {
          password: "",
          confirmPwd: "",
          csrq:null,
          bysj:null,
          isBefore: null,
          isAfter: null
        }
      }
    };
  }
};
</script>