<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="showModal"
      :close-on-click-modal="false"
      width="700px"
      :title="modalTitle"
    >
      <div>
        <Form :label-width="80" inline>
          <Form-item label="手机号码：" style="width: 75%;">
            <el-input v-model="mobile" name="mobile" placeholder="请输入手机号" :readonly="!isEdit" clearable/>
          </Form-item>
          <Form-item label="验证码：" style="width: 75%;">
            <el-input v-model="code" name="code" placeholder="请输入验证码" clearable/>
          </Form-item>
          <Form-item class="search-btn">
            <div v-show="selected" class="blue-btn" @click="_getCode">
              获取验证码
            </div>
            <div v-show="!selected" class="blue-btn btn-disabled">
              {{ second }}s后重新获取
            </div>
          </Form-item>
        </Form>
      </div>
      <div slot="footer" class="btn-width">
        <el-button style="margin-left: 8px" @click="_cancel">
          取消
        </el-button>
        <el-button type="primary" @click="_ok">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sysSms } from '../../../api'
export default {
  data() {
    return {
      showModal: false,
      modalTitle: '',
      selected: true,
      second: '59',
      mobile: '',
      code: '',
      isEdit: false
    }
  },
  methods: {
    _open(data) {
      this.showModal = true
      this.code = ''
      if (data.isEdit) {
        this.mobile = ''
        this.isEdit = true
        this.modalTitle = '修改手机号'
      } else {
        this.mobile = data.mobile
        this.isEdit = false
        this.modalTitle = '验证手机号'
      }
    },
    _val() {
      const reg = /^((\+?86)|(\(\+86\)))?1\d{10}$/
      if (this.mobile === '') {
        this.$message.warning('请填写手机号')
        return false
      } else if (!reg.test(this.mobile)) {
        this.$message.warning('手机号格式不正确')
        return false
      } else {
        return true
      }
    },
    _ok() {
      if (this.isEdit) {
        if (this._val()) {
          this._editSave()
        }
      } else {
        this._bindSave()
      }
    },
    _editSave: async function() {
      const result = await sysSms.changeBindMobile(this.code)
      this._resultChange(result, '修改成功')
    },
    _bindSave: async function() {
      const result = await sysSms.bindMobile(this.code)
      this._resultChange(result, '绑定成功')
    },
    _resultChange(result, msg) {
      if (result) {
        this.$message.success(msg)
        this.showModal = false
        this.$emit('on-result-change')
      }
    },
    _getCode() {
      if (this._val()) {
        this.selected = false
        this.second = 59
        this._count()
        const data = {
          mobile: this.mobile
        }
        if (this.isEdit) {
          Object.assign(data, { module: 'bindChangeMobile' })
        } else {
          Object.assign(data, { module: 'bindMobile' })
        }
        this._sendCode(data)
      }
    },
    _sendCode: async function(data) {
      const result = await sysSms.getCode(data)
      if (result) {
        this.$message.success({
          content: '验证码已发送',
          duration: 5
        })
      }
    },
    _count() {
      const second = this.second
      if (second === 0) {
        this.selected = true
        this.second = 59
        return
      }
      setTimeout(() => {
        this.second = second - 1
        this._count()
      }, 1000)
    },
    _cancel() {
      this.showModal = false
    }
  }
}
</script>

<style scoped>
</style>
