<!--
 * @Descripttion: 添加服务市场账号
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-10-16 14:22:10
 * @LastEditors: 无尘
 * @LastEditTime: 2020-10-21 11:01:12
-->
<!--
  使用帮助
  <add-market-dialog  @closeMarket="closeMarket"></add-market-dialog>
  import AddMarketDialog from '@/components/app/add-market-dialog.vue';
 -->
<template>
  <el-dialog title="绑定服务市场账号" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <div class="">
      <el-form ref="ruleForm" :model="marketForm" :rules="rules" label-width="80px">
        <el-form-item label="手机号" prop="phoneNumber">
          <country-mobile :nation-code.sync="marketForm.nationCode" :input-width="400" :limit-class="'limit-color'" v-model="marketForm.phoneNumber" :holder="'请输入手机号'" @checkPhoneNum="checkPhoneNum"></country-mobile>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="marketForm.password" placeholder="请输入密码" style="width:400px" maxlength="16"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loadBtn" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import countryMobile from '@/components/common/country-mobile.vue';
import { _debounce } from '@/common/js/public';
import fetch from '@/api/app-controls';
const { addMarketAccount } = fetch;
import showMsg from '@/common/js/showmsg';
import PhoneNumber from 'awesome-phonenumber';
export default {
  name: 'AddMarketDialog',
  components: {
    countryMobile
  },
  data() {
    let validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
        let pn = new PhoneNumber('+' + this.marketForm.nationCode + value);
        if (!pn.isValid() || !pn.isMobile()) {
          callback(new Error('手机号格式不正确'));
        } else {
          callback();
        }
      }
    };
    return {
      dialogVisible: true,
      loadBtn: false,
      marketForm: {
        nationCode: '86',
        phoneNumber: '',
        password: ''
      },
      rules: {
        phoneNumber: [
          { required: true, validator: validatePhone, trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    /**
     * @description: 校验手机号
     * @author: 无尘
     */
    checkPhoneNum() {
      const that = this;
      that.$refs['ruleForm'].validate(valid => {
        if (valid) {
          return false;
        }
      });
    },
    /**
     * @description: 保存
     * @param {String} formName
     * @author: 无尘
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave();
        }
      });
    }, 300),
    postSave() {
      const that = this;
      that.loadBtn = true;
      let { phoneNumber, nationCode, password } = that.marketForm;
      const data = {
        phoneNumber,
        nationCode,
        password
      };
      addMarketAccount(data)
        .then(res => {
          that.loadBtn = false;
          if (res.code == '0000') {
            showMsg.showmsg('绑定成功', 'success');
            that.$refs['ruleForm'].resetFields();
            that.$emit('closeMarket', true);
          }else {
            showMsg.showmsg(res.message || '未知错误', 'warning');
          }
        })
        .catch(error => {
          that.loadBtn = false;
        });
    },
    /**
     * @description: 关闭弹窗
     * @author: 无尘
     */
    handleClose() {
      const that = this;
      that.$emit('closeMarket');
    }
  },
  watch: {

  },
};
</script>
<style lang="less" scoped>
.m-b-20 {
  margin-bottom: 20px;
}

</style>
