<template>
  <div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>消费分期</el-breadcrumb-item>
      <el-breadcrumb-item>生成新数据</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card>
      <div>
        手机号：<el-input
          v-model="genDataParams.phoneNo"
          placeholder="请输入手机号"
        ></el-input>
        用户状态：
        <el-select v-model="genDataParams.status" placeholder="请选择用户状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="genData">生成数据</el-button>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="phoneNo" label="手机号" width="200">
          </el-table-column>
          <el-table-column prop="eacctNo" label="卡号" width="200">
          </el-table-column>
          <el-table-column prop="amount" label="额度" width="200"> </el-table-column>
          <el-table-column prop="openedChannel" label="开户渠道" width="200">
          </el-table-column>
          <el-table-column prop="msg" label="状态"> </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { genVccData } from '@/api/genVccData'
export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: '授信成功'
        },
        {
          value: 2,
          label: '授信失败'
        },
        {
          value: 3,
          label: '开户成功'
        },
        {
          value: 4,
          label: '开户失败'
        }
      ],
      genDataParams: {
        namespace: window.sessionStorage.getItem('env'),
        phoneNo: '',
        channel: '214',
        status: ''
      },
      tableData: [],
      loadingOptions: {
        text: '数据生成中...',
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'

      }
    }
  },
  methods: {
    // 造数据的方法
    genData() {
      // 手机号校验
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!reg.test(this.genDataParams.phoneNo)) {
        return this.$message.error('手机号格式不正确！')
      }
      // 用户状态校验
      if (this.genDataParams.status === '') {
        return this.$message.error('用户状态不能为空！')
      }
      // 开户失败校验，尾号必须为9
      if (this.genDataParams.status === 4) {
        if (this.genDataParams.phoneNo.charAt(this.genDataParams.phoneNo.length - 1) !== '9') {
          return this.$message.error('开户失败对应手机尾号必须为9')
        }
      }
      var formData = new FormData()
      formData.set('namespace', this.genDataParams.namespace)
      formData.set('phoneNo', this.genDataParams.phoneNo)
      formData.set('channel', this.genDataParams.channel)
      formData.set('status', this.genDataParams.status)
      const tLoading = this.$loading.service(this.loadingOptions)
      genVccData(formData).then((resp) => {
        if (resp !== null) {
          tLoading.close()
        }
        this.tableData.push(resp.data.data)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 200px;
  margin-right: 20px;
}
.el-button {
  margin-left: 20px;
}
.el-table {
  margin-top: 20px;
}
</style>
