<template>
    <!-- 按渠道参与（昕诺飞） -->
    <div>
        <div class="text-c mb-20">
            <template v-for="item in ruleChildValue">
                <span>{{item.name}}</span>&nbsp;&nbsp;<span>{{item.symbol}}</span>&nbsp;&nbsp;
                <el-select multiple :key="item.id" v-model="item.value" @change="onChange">
                    <el-option
                            v-for="item in channelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>
        <div slot="footer" class="dialog-footer text-c">
            <el-button @click="cancel()">取 消</el-button>
            <el-button :disabled="!paramText.length" type="primary" @click="ok()">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import apiHelper from "@/assets/js/apiHelper.js";

    export default {
        name: "PrXNFChannel",
        // props:['row','editIndex'],
        data() {
            return {
                rule: [],
                DimensionRuleConfigId: "",//基础维度id
                editIndex: -1,
                row: {},
                channelList: [
                    {value: 1, label: 'BR渠道'},
                    {value: 2, label: 'Trade渠道'},
                ],
                ruleChildValue: [],
                paramText: ""
            };
        },
        computed: {
            ChildValue() {
                return this.ruleChildValue.map(item => {
                    return {
                        ...item,
                        value: item.value.join(',')
                    };
                });
            },
        },
        methods: {
            onChange(v) {
                this.paramText = v.map(item => {
                    return this.channelList.filter(c => c.value === item).map(n => n.label).join(',')
                }).join(',');
            },
            editModel(index, row) {
                this.editIndex = index;
                this.row = row;
                if (index != -1) {
                    this.ruleChildValue = row.ChildValue.map(item => {
                        return {
                            ...item,
                            value: item.value.split(',').map(v => Number(v))
                        };
                    });
                    this.paramText = row.ParamText;
                } else {
                    this.getOperatorByParticipationRule();
                }
            },
            ok() {
                const obj = {
                    Id: this.editIndex == -1 ? "" : this.row.Id,//新增的时候是空的
                    DimensionRuleId: this.editIndex == -1 ? this.row.Id : this.row.DimensionRuleId,
                    ViewModel: this.row.ViewModel,
                    DimensionRuleName: this.row.DimensionRuleName,
                    ParamText: this.paramText,
                    ChildValue: this.ChildValue,
                    OperateType: this.row.OperateType,
                };
                if (this.editIndex !== -1) {
                    this.$emit('editDataRule', obj);
                } else {
                    this.$emit('addDataRule', obj);
                }
            },
            cancel() {
                this.$emit('showRulesDialog');
            },
            // 根据参与子规则获取运算符
            getOperatorByParticipationRule() {
                let that = this;
                apiHelper.getOperatorByParticipationRule(this.row.DimensionRuleNo, function (res) {
                    if (res.flag) {
                        that.rule = res.data;
                        that.ruleChildValue = res.data.map(item => {
                            return {
                                id: item.Id,
                                name: item.BaseDimensionName,
                                symbol: item.View,
                                value: null
                            }
                        });
                    }
                });
            },
        }
    };

</script>
<style scoped>
    .text-r {
        text-align: right;
    }

    .text-c {
        text-align: center;
    }

    .pos-r {
        position: relative;
    }

    .dis-ib {
        display: inline-block;
    }

    .mb-10 {
        margin-bottom: 10px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .w-200 {
        width: 200px;
    }

    .card-box {
        border: 1px solid #DCDFE6;
        padding: 20px;
        border-radius: 4px;
    }

    .delete-btn {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .t90 {
        font-size: 24px;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
    }

    .form-box {
        margin-bottom: 20px;
    }

    .form-box .mylabel {
        width: 100px;
        text-align: right;
        vertical-align: middle;
        float: left;
        /* font-size:14px; */
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }

    .form-box .mycontent {
        margin-left: 100px;
        position: relative;
        font-size: 0px;
    }

    .lh-285 {
        line-height: 200px;
    }
</style>