<template>
    <div>
        <div flex>
            <el-button type="primary" @click="add" class="iconButton"> <i class="el-icon-plus "></i></el-button>
            <el-button type="danger" @click="del" class="iconButton"> <i class="el-icon-delete"></i></el-button>
        </div>
        <base-table :border="true" :showIndex="false" :tableLoading.sync="tableLoading" :slotrow="true"
            :tableColumn="tableColumn" :tableData="tableData" :tableHeight="tableHeight" @radioChange="radioChange">
            <!-- 单选 -->
            <template v-slot:option="{ row }">
                <el-radio v-model="radio" :label="row.$index">
                    <span></span>
                </el-radio>
            </template>
            <!-- 序号 -->
            <template v-slot:index="{ row }">
                <span>
                    {{ row.$index + 1 }}
                </span>
            </template>
            <!-- 姓名 -->
            <template v-slot:linkMan="{ row }">
                <el-input v-model="row.row.linkMan" clearable type="text"></el-input>
            </template>
            <!-- 手机号 -->
            <template v-slot:mobile="{ row }">
                <el-input v-model.number="row.row.mobile" clearable type="text" oninput="value=value.replace(/[^0-9]/g,'')"
                    maxlength="11"></el-input>
            </template>
            <!-- 电话 -->
            <template v-slot:telphone="{ row }">
                <el-input v-model="row.row.telphone" clearable type="text" oninput="value=value.replace(/[^0-9]/g,'')"
                    maxlength="11"></el-input>
            </template>
            <!-- Email -->
            <template v-slot:Email="{ row }">
                <el-input v-model="row.row.email" clearable type="email"
                    oninput="value=value.replace( /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,'')"></el-input>
            </template>
            <!-- 职务 -->
            <template v-slot:duty="{ row }">
                <el-input v-model="row.row.duty" clearable type="text"></el-input>
            </template>
            <!-- 是否默认联系人 -->
            <template v-slot:isdefault="{ row }">
                <el-radio v-model="row.row.isdefault" :label="parseInt('1')">是</el-radio>
                <el-radio v-model="row.row.isdefault" :label="parseInt('2')">否</el-radio>
            </template>
            <!-- 行号 -->
            <template v-slot:rowIndex="{ row }">
                <el-input v-model="row.row.rowIndex" clearable type="number"
                    oninput="value=value.replace(/[^\d]|^[0]/g, '')"></el-input>
            </template>
        </base-table>
    </div>
</template>
<script>
import baseTable from '@/components/base/baseTable'
import basePage from '@/components/base/basePage'
import baseChoice from '@/components/base/baseChoice/index.vue'
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import configData from './configData'
export default {
    name: 'userDetails',
    components: {
        baseTable,
        basePage,
        baseChoice,
        baseDialog,
    },
    data() {
        return {
            tableLoading: false,
            tableHeight: '25vh',
            radio: false,
            optionData: {},
            tableData: [],
            rules: configData.plusTableColumnRules,
            s_telephone1: "",//手机号错误提示信息初始为空



        }
    },
    methods: {
        radioChange(val) {
            this.optionData = val
            this.radio = val.index
        },
        // 新增一行
        add() {
            let arr = {
                linkName: '',
                mobile: '',
                telphone: '',
                Email: '',
                duty: '',
                isdefault: ''
            }
            this.tableData.push(arr)
        },
        del() {
            if (this.radio === false) {
                this.$vmNews('请选择一条数据')
                return
            } else {
                this.tableData.splice(this.radio, 1)
                this.radio = false
            }
        },
        //手机号1校验
        checkPhone() {
            //定义phone，通过唯一id拿到input框输入的值
            const phone = row.row.telphone;
            if (!(/^1[34578]\d{9}$/.test(phone))) {  //手机号正则校验
                if (phone === '') { //若手机号为空
                    this.s_telephone1 = "请输入手机号码";
                    return false;
                } else { //手机号非空的报错信息
                    this.s_telephone1 = "手机号码格式错误";
                    return false;
                }
            } else { //手机号正确则无错误信息
                this.s_telephone1 = "";
                return true;
            }
        },

    },
    computed: {
        tableColumn() {
            return configData.plusTableColumn
        }
    }
}
</script>

<style lang="scss" scoped>
.iconButton {
    padding: 8px 15px !important;
}

.el-form-item--medium .el-form-item__label {
    display: flex !important;
    flex-direction: row-reverse !important;
}
</style>