<template>
    <div>
        <div flex>
            <i class="el-icon-plus iconButton add" @click="add"></i>
            <i class="el-icon-delete iconButton del" @click="del"></i>
        </div>
        <base-table :border="true" :showIndex="false" :tableLoading.sync="tableLoading" :slotrow="true"
            :tableColumn="tableColumn" :tableData="tableData" :tableHeight="tableHeight">
            <!-- 单选 -->
            <template v-slot:option="{ row }">
                <el-radio v-model="radio" @click="radioChange" :label="row.$index">
                    <span></span>
                </el-radio>
            </template>
            <!-- 序号 -->
            <template v-slot:index="{ row }">
                <span>
                    {{ row.$index + 1 }}
                </span>
            </template>
            <!-- 姓名 -->
            <template v-slot:linkName="{ row }">
                <el-input v-model="row.row.linkName" 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="text"></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="text"
                    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 supplierConfig from './supplierConfig'
export default {
    name: 'supplierDetails',
    components: {
        baseTable,
        basePage,
        baseChoice,
        baseDialog,
    },
    data() {
        return {
            tableLoading: false,
            tableHeight: '25vh',
            radio: false,
            optionData: {},
            tableData: [],
        }
    },
    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
            }
        },
    },
    computed: {
        tableColumn() {
            return supplierConfig.supplierAddColumn
        },
    },
}
</script>

<style lang="scss" scoped>
.iconButton {
    padding: 10px 12px;
    color: white;
    margin: 5px;
}

.iconButton.add {
    background-color: #5fb878 !important;
}

.iconButton.del {
    background-color: #f56c6c !important;
}

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