<template>
  <div>
    <!-- 弹窗 -->
    <a-modal
      v-model="isShow"
      @cancle="isShow=false"
      :footer="null"
      :centered="true"
      title="修改手机号码">
      <a-form id="components-form-demo-validate-other" ref="form" :form="form" @submit="handleSubmit">
        <a-form-item label="手机号码" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
          <a-input
            id="editUserPhoneModal-contactPhone"
            :maxLength="11"
            v-decorator="[
              'formData.contactPhone',
              { initialValue: formData.contactPhone, rules: [{ required: true, message: '请输入负责人手机号!' }, { pattern: /^\d{11}$/, message: '请输入正确的手机号' }] }
            ]"
            placeholder="请输入手机号码"
            allowClear />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
          <a-button type="primary" html-type="submit" id="editUserPhoneModal-submit" style="margin-right: 15px">保存</a-button>
          <a-button @click="isShow=false" style="margin-left: 15px" id="editUserPhoneModal-close">取消</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
// import {
//   supplierDetails,
//   saveSupplier
// } from '@/api/shopSetting.js'
export default {
  name: 'EditUserPhoneModal',
  props: {
    openUserPhoneMoadl: {
      type: Boolean,
      default: false
    },
    userPhone: {
      type: String,
      default: ''
    },
    itemData: {
	  type: Object,
	  default: function () {
	    return {}
	  }
    }
  },
  data () {
    return {
      isShow: this.openUserPhoneMoadl,
      form: this.$form.createForm(this, { name: 'editUserPhoneModal' }),
      formData: {
        contactPhone: '' // 手机号码
      }
    }
  },
  methods: {
    // 查看详情
    // getPageInfo () {
    //   supplierDetails({
    //     id: this.itemId
    //   }).then(res => {
    //     if (res.status == 200) {
    //       // this.form.setFieldsValue({ 'formData': res.data })
    //       this.form.setFieldsValue({ 'formData.name': res.data.name })
    //       this.form.setFieldsValue({ 'formData.contactName': res.data.contactName })
    //       this.form.setFieldsValue({ 'formData.simpleName': res.data.simpleName })
    //       this.form.setFieldsValue({ 'formData.contactPhone': res.data.contactPhone })
    //       this.form.setFieldsValue({ 'formData.remarks': res.data.remarks })
    //     }
    //   })
    // },
    // 点击保存;
    handleSubmit (e) {
      this.$router.push({ path: `/userInfo/userManageList/list` })
      // e.preventDefault()
      // const _this = this
      // this.form.validateFields((err, values) => {
      //   if (!err) {
      //     const formData = Object.assign({}, this.itemData, this.formData, values.formData)
      //     formData.id = _this.itemId
      //     saveSupplier(formData).then(res => {
      //       console.log(res, 'rrrrrrrrr')
      //       if (res.status == 200) {
      //         _this.$message.success(res.message)
      //         _this.$emit('refresh')
      //         setTimeout(function () {
      //           _this.isShow = false
      //         }, 300)
      //       }
      //     })
      //   }
      // })
    }
  },
  watch: {
    openUserPhoneMoadl (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (val) {
      if (!val) {
        this.$emit('close')
      } else {
   	  this.form.resetFields()
      }
    }
    // itemId (newValue, oldValue) {
    //   console.log(newValue, '----------id')
    //   if (newValue && this.isShow) {
    //     this.titleText = '编辑'
    //     this.getPageInfo(newValue)
    //   } else {
   	//   this.titleText = '新增'
    //   }
    // }
  }
}
</script>

<style>
</style>
