<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="号段" prop="mobilenum">
        <el-input v-model="ruleForm.mobilenum" placeholder="请输入号段"/>
      </el-form-item>
      <el-form-item label="区号" prop="zipcode">
        <el-input v-model="ruleForm.zipcode" placeholder="请输入区号"/>
      </el-form-item>
      <el-form-item label="城市" prop="citydes">
        <el-input v-model="ruleForm.citydes" placeholder="请输入城市"/>
      </el-form-item>
      <el-form-item label="卡类型" prop="carddes">
        <el-input v-model="ruleForm.carddes" placeholder="请输入卡类型"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getNumAssigned, addNumAssigned, editNumAssigned } from '@/api/telCall/numAssigned'
import { validThemRoughly, validAreaCode, validTitle } from '@/utils/validate'

const validThemRoughlyRule = (rule, value, callback) => {
  if (!validThemRoughly(value)) {
    callback(new Error('请输入有效的号段（7位数字）!'))
  } else {
    callback()
  }
}
const validAreaCodeRule = (rule, value, callback) => {
  if (!validAreaCode(value)) {
    callback(new Error('请输入有效的区号（3-4位数字）!'))
  } else {
    callback()
  }
}
const validCityTitleRule = (rule, value, callback) => {
  if (!validTitle(value)) {
    callback(new Error('请输入有效的城市（2-30位，中英数字-（），+空格）!'))
  } else {
    callback()
  }
}
const validCardTitleRule = (rule, value, callback) => {
  if (!validTitle(value)) {
    callback(new Error('请输入有效的卡类型（2-30位，中英数字-（），+空格）!'))
  } else {
    callback()
  }
}

export default {
  name: 'AddOrEdit',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        mobilenum: '', //	是	string	号段
        zipcode: '', //	是	string	区号
        citydes: '', //	是	string	城市
        carddes: '' //	是	string	卡类型
      },
      rules: {
        mobilenum: [{
          required: true,
          trigger: 'blur',
          validator: validThemRoughlyRule
        }],
        zipcode: [{
          required: true,
          trigger: 'blur',
          validator: validAreaCodeRule
        }],
        citydes: [{
          required: true,
          trigger: 'blur',
          validator: validCityTitleRule
        }],
        carddes: [{
          required: true,
          trigger: 'blur',
          validator: validCardTitleRule
        }]
      },
      loading: false
    }
  },
  created() {
    if (this.rowid) {
      this.ruleForm.id = this.rowid
      this.getDetail(this.rowid)
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const datas = {
            id: this.ruleForm.id,
            mobilenum: this.ruleForm.mobilenum, //	是	string	号段
            zipcode: this.ruleForm.zipcode, //	是	string	区号
            citydes: this.ruleForm.citydes, //	是	string	城市
            carddes: this.ruleForm.carddes //	是	string	卡类型
          }

          // 添加
          if (!this.rowid) {
            addNumAssigned(datas).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getList() // 重新加载父级数据
                this.$message.success('恭喜你，号码归属地添加成功!')
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }
          // 编辑
          editNumAssigned(datas).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.getList() // 重新加载父级数据
              this.$message.success('恭喜你，号码归属地编辑成功!')
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    // 获取详情
    getDetail(rid) {
      getNumAssigned(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.mobilenum = res.F_MobileNum
          this.ruleForm.zipcode = res.F_ZipCode
          this.ruleForm.citydes = res.F_CityDes
          this.ruleForm.carddes = res.F_CardDes
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
