<template>
  <div class="app-container">
    <div class="box" v-loading="loading">
      <el-form :inline="true" ref="formRef" :model="form" :rules="rules" class="demo-form-inline">
        <h3>服务电话</h3>
        <div class="item" style=" width: 1100px;">
          *服务电话
          <div>
            <el-form-item label="" v-for="(item, index) in form.arr" :key="index">
              <div class="flex mb10">
                <el-input class="mr10" type="text" maxlength="11" oninput="value=value.replace(/[^0-9]/g,'')" v-model="form.arr[index].phoneNumber" placeholder=""></el-input>
                <el-button type="primary" @click="add">新增</el-button>
                <el-button type="danger" v-if="index>0" @click="del(index)">删除</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <br />
      </el-form>
      <div class="btnBox">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { operatingPhoneBatchEdit, operatingPhoneList } from '@/api/operating'
export default {
  data () {
    return {
      form: {
        arr: [{}]
      },
      rules: {
        giftExchangeRatio: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
      },
      buttonLoading: false,
      loading: false
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    add () {
      this.form.arr.push({
        phoneNumber: ''
      })
    },
    del (index) {
      this.form.arr.splice(index, 1)
    },
    getDetails () {
      this.loading = true
      operatingPhoneList().then(res => {
        this.form.arr = (res.data && res.data.length > 0) ? res.data : [{ phoneNumber: '' }]
      }).finally(() => {
        this.loading = false
      })
    },
    submitForm () {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          for (let i = 0; i < this.form.arr.length; i++) {
            if (!this.form.arr[i].phoneNumber) {
              this.$message.error('请输入手机号')
              return
            }
            // 验证手机号
            if (!(/^1[3456789]\d{9}$/.test(this.form.arr[i].phoneNumber))) {
              this.$message.error(`第${i + 1}行请输入正确的手机号`)
              return
            }
          }
          operatingPhoneBatchEdit(this.form.arr).then(res => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.getDetails()
          })
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
h3 {
  font-weight: 700;
}
.item {
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 34px;
  > div {
    margin: 0 10px;
  }
}
::v-deep .el-form-item {
  display: block;
}
.hint {
  font-size: 12px;
  color: red;
}
.btnBox {
  margin: 20px 0 0 100px;
}
.el-form-item {
  margin-bottom: 0;
}
.flex {
  display: flex;
}
.mr10 {
  margin-right: 10px;
}
.mb10 {
  margin-bottom: 10px;
}
/* 深度选择器，适用于 Vue */
::v-deep .el-input__inner[type="number"]::-webkit-outer-spin-button,
::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

::v-deep .el-input__inner[type="number"] {
  -moz-appearance: textfield;
}
</style>