<template>
  <div style="margin-left:50px">
    <el-form ref="bindAddressRef" :rules="rules" :model="bindAddressForm" label-width="90px">
      <el-alert :closable="false" title="温馨提醒" type="warning" description="收货地址默认为：北京市海淀区海淀街道中国电子大厦B座；收货人：量化派" />
      <el-form-item label="环境名称:" prop="namespace" style="width:400px">
        <el-select v-model="bindAddressForm.namespace" placeholder="请选择环境" style="width:310px">
          <el-option v-for="item in namespaceList" :key="item.name" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本号:" prop="version" style="width:400px">
        <el-input v-model="bindAddressForm.version" placeholder="请输入羊小咩版本号"></el-input>
      </el-form-item>
      <el-form-item label="手机号:" prop="phoneNo" style="width:400px">
        <el-input v-model="bindAddressForm.phoneNo" maxlength="11" placeholder="请输入手机号"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" style="margin-left:180px">
      <el-button type="primary" @click="bindAddress">确 定</el-button>
    </span>
  </div>
</template>
<script>
import { bindingAddress } from '@/api/testdata'
import { getNamespaceList } from '@/api/k8s'
export default {
  data() {
    return {
      namespaceList: [],
      bindAddressForm: {
        namespace: window.sessionStorage.getItem('env')
      },
      rules: {
        namespace: [
          {
            required: true,
            message: '环境名称不能为空！',
            trigger: 'blur'
          }
        ],
        version: [
          {
            required: true,
            message: '版本号不能为空！',
            trigger: 'blur'
          }
        ],
        phoneNo: [
          {
            required: true,
            message: '电话号码不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getNamespaceList()
  },
  methods: {
    getNamespaceList() {
      getNamespaceList({ env: 'all' }).then((resp) => {
        this.namespaceList = resp.data.data
      })
    },
    bindAddress() {
      var formData = new FormData()
      formData.set('namespace', this.bindAddressForm.namespace)
      formData.set('version', this.bindAddressForm.version)
      formData.set('phoneNo', this.bindAddressForm.phoneNo)
      this.$refs.bindAddressRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (this.bindAddressForm.phoneNo.length !== 11) {
            return this.$message.error('手机号长度不对！')
          }
          bindingAddress(formData).then((resp) => {
            if (resp.data.businessCode === '0000') {
              this.$message.success(resp.data.msg)
              this.bindAddressForm.version = ''
              this.bindAddressForm.phoneNo = ''
            } else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
