<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="密码锁住的位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weizhi">
              <a-input v-model="model.weizhi" placeholder="请输入密码锁住的位置" :disabled="editdisabled" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="旧密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="yuanmima">
              <a-input-password v-model="model.yuanmima" placeholder="请输入旧密码" />
              <!-- <a-input v-model="model.mima" placeholder="请输入旧密码"  type="password" show-password></a-input> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="新密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mima">
              <a-input-password v-model="model.mima" placeholder="请输入新密码" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmPassword">
              <a-input-password v-model="model.confirmPassword" placeholder="请输入确认密码" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入备注"  ></a-input>
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'ItdmMimaForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      //禁止编辑
      editdisabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      const equalToPassword = (rule, value, callback) => {
        if (this.model.mima !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      return {
        model:{
          id: undefined,
          weizhi: undefined,
          mima: undefined,
          yuanmima: undefined,
          confirmPassword:undefined
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          //  weizhi: [
          //     { required: true, message: '请输入密码锁住的位置!'},
          //  ],
            yuanmima: [
              { required: true, message: "旧密码不能为空"}
            ],
            mima: [
              { required: true, message: "新密码不能为空",},
              // { pattern: /^.{6,16}$/, message: "请输入 8 到 16 位字符",},
              { required: true, validator: this.checkPassword, trigger: "change" }
            ],
            confirmPassword: [
              { required: true, message: "确认密码不能为空", trigger: "blur" },
              { required: true, validator: equalToPassword, trigger: "blur" }
            ]
        },
        url: {
          add: "/itdmMima/itdmMima/add",
          edit: "/itdmMima/itdmMima/edit",
          queryById: "/itdmMima/itdmMima/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
        // return this.editdisabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        var list = Object.assign({}, record);
        console.log(list)
        this.model.id = list.id
        this.model.weizhi = list.weizhi
        // this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            console.log(this.model)
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      // 密码强度校验
      checkPassword(rule, value, callback) {
        this.level = []
        if (!value) {
          return callback('密码不能为空')
        }
        if (value.length < 6) {
          return callback('密码不少于6位，且密码需同时包括数字、字母、符号')
        }
        if (value.length > 16) {
          return callback('密码不大于16位，且密码需同时包括数字、字母、符号')
        }
        // 校验是数字
        const regex1 = /^\d+$/
        // 校验字母
        const regex2 = /^[A-Za-z]+$/
        // 校验符号
        const regex3 =
          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
        if (regex1.test(value)) {
          this.level.push('low')
        } else if (regex2.test(value)) {
          this.level.push('low')
        } else if (regex3.test(value)) {
          this.level.push('low')
        } else if (/^[A-Za-z\d]+$/.test(value)) {
          this.level.push('low')
          this.level.push('middle')
        } else if (
          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
            value
          )
        ) {
          this.level.push('low')
          this.level.push('middle')
        } else if (
          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
            value
          )
        ) {
          this.level.push('low')
          this.level.push('middle')
        } else if (
          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
            value
          )
        ) {
          this.level.push('low')
          this.level.push('middle')
          this.level.push('high')
        }
        return callback()
      },
    }
  }
</script>

<style lang="less" scoped>
.show_pwd {
  cursor: pointer;
  user-select: none;
  padding-right: 5px;
}
.intensity {
  .psdText {
    font-size: 14px;
    margin-right: 10px;
  }
  .line {
    display: inline-block;
    width: 48px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 3px;
    margin-right: 8px;
    &.low {
      background: #f4664a;
    }
    &.middle {
      background: #ffb700;
    }
    &.high {
      background: #2cbb79;
    }
  }
  .level {
    margin: 0 16px 0 8px;
  }
  .warningtext {
    color: #5a5a5a;
    font-size: 12px;
    margin-top: 5px;
  }
}
</style>