<template>
    <el-container style="height: 100%;margin-left: 20px" >
        <el-form ref="selectOptionRef" :model="fieldInfo"  :inline="true" style="width: 100%">
            <el-container style="height: 100%;background-color: white">
                <el-header height="auto" >
                    <el-button type="primary" size="mini"   @click="addSelectOption()"><i class="el-icon-circle-plus-outline"></i> 添加</el-button>
                    <el-button type="primary" size="mini"   @click="deleteSelectOption()"><i class="el-icon-remove-outline"></i> 删除</el-button>
                </el-header>

                <el-table   :data="fieldInfo.optionSetting"    style="width: 100%;" ref="selectOptionTableRef">
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column label="文本" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.label" type="input"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="值" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.value" type="input"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-container>
        </el-form>
    </el-container>
</template>

<script>
    export default {
        name: "tableviewSelectOptionTable",
        props:{
            fieldInfo:{type:Object,default:function () {return {}}},
            isView:{required:false,type:Boolean,default:()=>{return false}},
        },
        methods:{
            /**
             * 添加选项
             */
            addSelectOption(){
                if(!this.fieldInfo.optionSetting){
                    this.$set(this.fieldInfo,"optionSetting",[
                        {   label: '选项1',
                            value: '选项1',
                            key: this.COMMON_FUNC.getUuidByParams(32)
                        }
                        ]);
                }else{
                    let nexIndex = this.fieldInfo.optionSetting.length + 1;
                    this.fieldInfo.optionSetting.push({
                            label: '选项'+nexIndex,
                            value: '选项'+nexIndex,
                            key: this.COMMON_FUNC.getUuidByParams(32)
                        }
                    )
                }

            },
            /**
             * 根据index 删除选项
             */
            deleteSelectOption(index){
              let vm = this;
              let selection = vm.$refs["selectOptionTableRef"].selection;
                if((selection|| []).length == 0){
                    vm.$message({
                        duration: 1500,
                        type: 'info',
                        message: '请至少选择一条需要删除的数据！'
                    });
                    return;
                }
                selection.forEach(select =>{
                    vm.fieldInfo.optionSetting =  vm.fieldInfo.optionSetting.filter(({ key }) => key !== select.key);
                });

            }


        }
    }
</script>

<style scoped>

</style>