<template>
  <div class="fullheight">
    <el-form :model="form" v-form v-loading.fullscreen.lock="fullscreenLoading" data-vv-scope="pwdStrategyForm" ref="form">
      <ht-form-item label="初始化密码" label-width="120px">
        <ht-input
          v-model="form.initPwd"
          autocomplete="off"
          validate="required"
          placeholder="请输入初始化密码"
          :maxlength="30" :showWordLimit="true"
        ></ht-input>
      </ht-form-item>
      <ht-form-item label="密码规则" label-width="120px">
        <ht-select
          v-model="form.pwdRule"
          :options="options"
          validate="required"
        >
        </ht-select>
      </ht-form-item>
      <el-form-item label="密码长度" label-width="120px"
        prop="pwdLength"
        :rules="[
          { required: true, message: '数值不能为空' },
          { pattern: /^[0-9]+$/, message: '请输入数字' },
        ]">
        <el-input-number
          class="ht-form-inputs__inline"
          v-model="form.pwdLength"
          type="number"
          :min="0"
          :max="30"
          placeholder="请输入密码长度"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="密码可用时长" label-width="120px"
        prop="duration"
        :rules="[
          { required: true, message: '数值不能为空' },
          { pattern: /^[0-9]+$/, message: '请输入数字' },
        ]">
        <div style="display: flex;">
          <el-input-number
            class="ht-form-inputs__inline"
            v-model="form.duration"
            type="number"
            :min="0"
            placeholder="请输入密码可用时长"
          ></el-input-number>&nbsp;天
        </div>
      </el-form-item>
      <ht-form-item label="启用" label-width="120px">
        <el-switch v-model="form.enable"></el-switch>
      </ht-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button class="confirm" type="primary" @click="confirm()">保存</el-button>
    </span>
  </div>
</template>

<script>
import uc from "@/api/uc.js";
import utils from "@/hotent-ui-util.js";

export default {
  name: "sys-pwd-strategy",
  components: {},
  props: {},
  computed: {

  },
  data() {
    return {
      fullscreenLoading:false,
      form:{},
      options:[
        {key:1,value:"无限制"},
        {key:2,value:"必须包含数字、字母"},
        {key:3,value:"必须包含数字、字母、特殊字符"},
        {key:4,value:"必须包含数字、大小字母、特殊字符"},
      ]
    };
  },
  mounted(){
    uc.getDefaultPwdStrategy().then(
      data => {
        if(data){
          let form = data;
          if(form.enable == 1){
            form.enable = true;
          }else{
            form.enable = false;
          }
          //
          this.form = form;
        }
      }
    );
  },
  methods: {
    confirm(){
      if(this.form.initPwd.length > 30){
        this.$message({type: "warning", message: "内容超出输入限制"});
        return false;
      }
      this.$refs.form.validate((res) => {
        if(!res) {
          this.fullscreenLoading = false;
          this.$message.error("表单校验不通过，请检查表单");
          return
        }
        utils.validateForm(this, "pwdStrategyForm")
        .then(r => {
          this.fullscreenLoading = true;
          let param = {};
          Object.assign(param, this.form);
          param.id = "1";
          if(param.enable){
            param.enable = 1;
          }else {
            param.enable = 0;
          }
          delete param.pkVal;
          uc.saveDefaultPwdStrategy(param).then(
            data => {
              this.fullscreenLoading = false;
              if (data.state) {
                this.$message.success(data.message);
              } else {
                this.$message.error(data.message || "保存失败");
              }
            },
            error => {
              this.fullscreenLoading = false;
              this.$message.error(error || "保存失败");
            }
          );
        })
        .catch(reason => {
          this.fullscreenLoading = false;
          this.$message.error("表单校验不通过，请检查表单");
        })
      })
    },
  },
  created(){

  }
};
</script>

<style lang="scss" scoped>
.fullheight {
  padding: 20px;
}
.confirm{
  margin-left: 120px;
}
::v-deep{
  .ht-form-inputs__inline{
    width: 280px !important;
  }
}
</style>
