<template>
  <admin-modal :visible.sync="visible" :loading="loading" @on-cancel="visible = false" @on-confirm="handleConfirm">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" class="form-descriptions-word">
      <a-descriptions bordered size="small" class="descriptions-width">
        <a-descriptions-item label="必填校验">
          <AdminRequiredSign required />
          <a-form-model-item prop="text" :span="3">
            <a-input v-model="form.text" placeholder="请填写信息" />
          </a-form-model-item>
        </a-descriptions-item>
      </a-descriptions>
    </a-form-model>

    <div class="tip">We are do something here ...</div>
  </admin-modal>
</template>

<script>
import { throttle } from 'lodash'

export default {
  name: 'CreateModal',
  data: () => ({
    visible: false,
    loading: false,
    form: {
      text: ''
    },
    rules: {
      text: [{ required: true, message: '测试必填校验！', trigger: 'blur' }]
    }
  }),
  methods: {
    /**
     * 打开弹窗 (供父组件调用)
     * @author Matrix
     * @since 2022/09/14
     */
    openModal() {
      this.visible = true
    },

    /**
     * 确认提交 (节流)
     * @author Matrix
     * @since 2022/09/08
     */
    handleConfirm: throttle(
      function () {
        console.log('3000ms 之内，只触发一次！！！')
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.loading = true
            setTimeout(() => {
              this.loading = false
            }, 1500)
          }
        })
      },
      3000,
      { trailing: false }
    )
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/descriptios-reset.css';

.tip {
  font-size: 18px;
  font-weight: 500;
  margin-top: 30px;
}

::v-deep .descriptions-width {
  .ant-descriptions-item-label.ant-descriptions-item-colon {
    width: 100px;
  }
}
</style>
