<template>
    <el-container>
        <el-header style="height: auto;" size="medium">
            <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="add()">新增
            </el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="remove()">删除
            </el-button>
        </el-header>
        <el-main style="height: 100%;" ref="tableMain">
            <el-table :data="dataRows" ref="tableRef" stripe border
                      style="width: 100%;min-height: 300px;max-height: 600px">
                <el-table-column type="selection" width="40" align="center"></el-table-column>
                <el-table-column label="参数键" prop="paramKey" align="center" min-width="50">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.paramKey"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="值类型" prop="paramType" align="center" min-width="60">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.paramType" @change="changeParamType(scope.row)">
                            <el-option v-for="item in paramTypeOption" :key="item.value"
                                       :value="item.value" :label="item.label">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="参数值" prop="paramVal" align="center" min-width="60">
                    <template slot-scope="scope">
                        <el-cascader v-if="scope.row.paramType == 'sysData'" style="width: 100%"
                                     v-model="scope.row.paramVal" :options="selectOptions"
                                     :props="{ checkStrictly: true }"
                                     expand-trigger="hover" filterable>
                        </el-cascader>
                        <el-select v-if="scope.row.paramType == 'default'" v-model="scope.row.paramVal">
                            <el-option v-for="item in defaultOption" :key="item.value"
                                       :value="item.value" :label="item.label">
                            </el-option>
                        </el-select>
                        <el-select v-if="scope.row.paramType == 'rowData'" style="width: 100%"
                                   v-model="scope.row.paramVal"  filterable>
                            <el-option-group v-for="(group,index) in useFieldObjArr"
                                             :key="index"
                                             :label="group.label">
                                <el-option
                                        :key="item.id||item.fieldId"
                                        :label="item.showName"
                                        :value="item.id||item.fieldId"
                                        v-for="item in  group.options">
                                </el-option>
                            </el-option-group>
                        </el-select>
                        <el-input v-if="scope.row.paramType == 'diy'" v-model="scope.row.paramVal"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "param-common", // 默认参数绑定控件
        props:{
            dataTreeArr:{type:Array},
            paramData:{required:true},
            useFieldObjArr:{required:true},
            chooseEvent:{type:String},
        },
        data(){
            return {
                paramTypeOption:[{
                    label:"表单数据",
                    value:"rowData"
                },{
                    label:"数据字典",
                    value:"sysData"
                },{
                    label:"缺省值",
                    value:"default"
                },{
                    label:"自定义",
                    value:"diy"
                },],
                defaultOption:[{
                    label:"用户名",
                    value:"loginuser.userName"
                },{
                    label:"用户ID",
                    value:"loginuser.id"
                }],
                dataRows:[],
                selectOptions:[],
                missingValues:[],
                addValues:[]
            }
        },
        created(){
            this.initData();
        },
        methods:{
            initData(){
                this.dataRows = JSON.parse(JSON.stringify(this.paramData));
                this.selectOptions = JSON.parse(JSON.stringify(this.dataTreeArr));
                this.selectOptions.forEach(item => {
                    item.disabled = true;
                });
            },
            add(){
                let order = this.getNextOrder();
                this.dataRows.push({
                    paramKey:"",
                    paramType:"diy",
                    paramVal:"",
                    order:order
                })
            },
            getNextOrder(){
                let order = 0;
                this.dataRows.forEach(item => {
                    if(Number(item.order) > order){
                        order = Number(item.order);
                    }
                })
                order ++;
                return order;
            },
            remove(){
                let selection = this.$refs.tableRef.selection;
                if((selection || []).length === 0){
                    this.$message.error("未选中需要删除的行！");
                    return;
                }
                let arr = [];
                selection.forEach(item => {
                    arr.push(item.order);
                });
                this.dataRows = this.dataRows.filter(item => {
                    return arr.indexOf(item.order) === -1;
                });
            },
            getParam(){
                return JSON.parse(JSON.stringify(this.dataRows));
            },

            /**
             * 切换值类型
             * @param row
             */
            changeParamType(row){
                if(row.paramType == 'rowData' || row.paramType == 'default' || row.paramType == 'diy'){
                    this.$set(row,'paramVal',''); //值清空
                }else if(row.paramType == 'sysData'){
                    this.$set(row,'paramVal',[]); //值清空
                }
            },
          /**
           * 添加参数绑定值
           */
           addParamValue(missingValues){
             //先获取数据里面的maxOrder
             let order = this.dataRows.length+1;
              missingValues.forEach(item=>{
                  let dataRowItem={
                    "paramKey":item,
                    "paramType":"",
                    "paramVal":"",
                    "order": order
                }
                this.dataRows.push(dataRowItem);
                this.addValues.push(dataRowItem.paramKey);
                order = order+1;
            })
          }

        },
        watch:{
            chooseEvent(){
              // 切换后的清除操作
              this.dataRows = this.dataRows.filter(item => !this.addValues.includes(item.paramKey));
              this.addValues=[];
              let param = {
                openTableView:['tableViewId',"formOperate"],
                openListView:['formId',"listViewId"]
              }
              if (this.chooseEvent == 'openTableView'){
                // 先获取dataRows中所有paramKey的值集合
                let paramKeysInDataRows = this.dataRows.map(item => item.paramKey);
                // 使用filter找出param.openTableView中不在dataRows.paramKey中的值
                 this.missingValues = param.openTableView.filter(key => !paramKeysInDataRows.includes(key));
                 this.addParamValue(this.missingValues);
              }else if(this.chooseEvent == 'openListView'){
                 // 打开新的列表视图
                let paramKeysInDataRows = this.dataRows.map(item => item.paramKey);
                // 使用filter找出param.openTableView中不在dataRows.paramKey中的值
                this.missingValues  = param.openListView.filter(key => !paramKeysInDataRows.includes(key));
                this.addParamValue(this.missingValues);
              }
          },
        }
    }
</script>

<style scoped>

</style>
