<!--  -->
<template>
  <el-dialog
    :visible.sync="defaultConfigDialogAdd.dialogVisible"
    :width="defaultConfigDialogAdd.width"
    :center="defaultConfigDialogAdd.isCenter"
  >
    <!-- 如果t寫了插槽，外面使用其實是沒必要傳title屬性。-->
    <div slot="title" class="dialog-title">
      <slot name="title">
        <h2 class="default-title">{{defaultConfigDialogAdd.title}}</h2>
      </slot>
    </div>

    <el-form :model="addUserForm" :rules="rules" ref="addUserForm" label-width="100px">
      <el-form-item label="使用者名稱" prop="username">
        <el-input v-model="addUserForm.username"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="truename">
        <el-input v-model="addUserForm.truename"></el-input>
      </el-form-item>
      <el-form-item label="手機號" prop="phone">
        <el-input v-model.number="addUserForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="是否啟用" prop="status">
        <el-radio-group v-model="addUserForm.status">
          <el-radio label="禁用"></el-radio>
          <el-radio label="啟用"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-checkbox-group v-model="addUserForm.role">
          <el-checkbox label="系統管理員"></el-checkbox>
          <el-checkbox label="資訊管理員"></el-checkbox>
          <el-checkbox label="使用者管理員"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel('addUserForm')">取 消</el-button>
      <el-button type="primary" @click="submitForm('addUserForm')">立即建立</el-button>
    </span>
  </el-dialog>
</template>
<script>
import validate from 
 
"@/utils/validate";
const { checkAge } = validate;
export default {
  name: "DialogAdd",
  props: {
    configDialogAdd: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      defaultConfigDialogAdd: {
        dialogVisible: false, //彈框預設不可見
        title: "提示", //預設標題
        width: "30%", //
 
預設寬度
        isCenter: false //是否對頭部和底部採用居中佈局
      },
      addUserForm: {
        username: "",
        truename: "",
        phone: "",
        status: "",
        role: []
      },
      rules: {
        username: [
          { required: true, message: "請輸入活動名稱", trigger: "blur" },
          { min: 
 
2, max: 10, message: "長度在 3 到 5 個字元", trigger: "blur" }
        ],
        truename: [
          { required: true, message: "請輸入活動名稱", trigger: "blur" },
          { min: 2, max: 19, message: "長度在 2 到 10個字元", trigger: "blur" }
        ],
        phone: [{ required: true, validator: checkAge, trigger: "blur" }],
        status: [
          { required: true, message: "請選擇是否啟用", trigger: "change" }
        ],
        role: [
          {
            type: "array",
            required: true,
            message: "請至少選擇一個角色",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    initDefaultConfigDialogAdd() {
      this.defaultConfigDialogAdd = {
        ...this.defaultConfigDialogAdd,
        ...this.configDialogAdd
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return this.$message.error("資料驗證不通過"); //錯誤優先
        // 傳送網路請求

        if (valid) {
          this.$refs[formName].resetFields();
          this.defaultConfigDialogAdd.dialogVisible = false;
          this.$message.success("增加使用者成功");
        }
      });
    },
    handleCancel(formName) {
      // 重置輸入框
      this.$refs[formName].resetFields();
      this.defaultConfigDialogAdd.dialogVisible = false;
    }
  },
  created() {
    // 初始化彈框配置項的資料
    this.initDefaultConfigDialogAdd();
  },
  watch: {
    // 外面的值變化，改變裡面
    "configDialogAdd.dialogVisible": {
      handler(val) {
        this.defaultConfigDialogAdd.dialogVisible = val;
      }
    },
    // 裡面的值發生變化，改變外面
    "defaultConfigDialogAdd.dialogVisible": {
      handler(val) {
        this.configDialogAdd.dialogVisible = val;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-title {
  color: #000;
  font-size: 20px;
  font-weight: 700;
}
</style>