<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-08-31 16:11:50
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-18 10:38:01
-->
<!--
  <check-name-dialog :sync-data="syncData" @closeSet="closeSet"></check-name-dialog>
  import checkNameDialog from '@/components/company/check-name-dialog.vue';
 -->
<template>
  <el-dialog class="check-name-dialog" title="提示" :visible.sync="dialogVisible" width="416px" :before-close="handleClose">
    <div class="m-b-20">
      <div class="font-14 color-606266 m-b-10">首次授权商户需要校验GIC商户超级管理员姓名</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" >
        <el-form-item label="超级管理员" prop="userName">
          <span>{{firstName}}</span><el-input class="w-173 m-l-10" maxlength="50" v-model="ruleForm.userName" placeholder="输入姓名校验"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.stop="cancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click.stop="submitForm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { _debounce } from '@/common/js/public';
import fetch from '@/api/merchant-auth.js';
import showMsg from '@/common/js/showmsg';
const { getCheckName, checkName } = fetch;
export default {
  name: 'CheckNameDialog',
  props: {
    syncData: {
      type: Object,
      default() {
        return {
          syncStatus: '0'
        };
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      loading: false,
      firstName: '',
      ruleForm: {
        userName: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ]
      }
    };
  },
  mounted() {
    const that = this;
    that.getCheckNameData();
  },
  methods: {
    /**
     * @description: 获取名字
     * @author: 无尘
     */
    getCheckNameData() {
      const that = this;
      const params = {
        enterpriseId: that.syncData.enterpriseId
      };
      getCheckName(params)
        .then(res => {
          that.firstName = res.result || '';
        })
        .catch(function(error) {
        });
    },
    /**
     * @description: 关闭弹窗
     * @author: 无尘
     */
    handleClose() {
      const that = this;
      that.ruleForm.userName = '';
      that.$emit('closeSet', 'close');
    },
    cancel() {
      const that = this;
      that.ruleForm.userName = '';
      that.$emit('closeSet', 'close');
    },
    /**
     * @description: 确认验证
     * @param {String} form
     * @author: 无尘
     */
    submitForm: _debounce(function(form) {
      const that = this;
      that.loading = true;
      that.$refs[form].validate(valid => {
        if (valid) {
          that.postCheck();
        } else {
          that.loading = false;
          return false;
        }
      });
    }, 300),
    postCheck() {
      const that = this;
      let params = {
        enterpriseId: that.syncData.enterpriseId,
        userName: that.firstName + that.ruleForm.userName
      };
      checkName(params)
        .then(res => {
          that.loading = false;
          if (res.code == '0000') {
            if (res.result) {
              showMsg.showmsg('校验成功', 'success');
              that.ruleForm.userName = '';
              that.$emit('closeSet', 'success');
            }else {
              showMsg.showmsg('校验失败', 'warning');
            }
          }else {
            showMsg.showmsg(res.message || '接口异常', 'warning');
          }
        })
        .catch(function(error) {
          that.loading = false;
        });
    }
  }
};
</script>
<style lang="less" scoped>
  .m-b-20 {
    margin-bottom: 20px;
  }
  .w-173 {
    width: 173px;
  }
</style>
