<template>
    <div class="rule-form">
        <a-row class="rule-form-item">
            <a-col :span="2" class="rule-form__center rule-form__header"
                >选择</a-col
            >
            <a-col :span="4" class="rule-form__center rule-form__header"
                >规则代码</a-col
            >
            <a-col :span="4" class="rule-form__center rule-form__header"
                >名称</a-col
            >
            <a-col :span="14" class="rule-form__center rule-form__header"
                >条件</a-col
            >
        </a-row>
        <!-- <div v-for="(condition, index) in conditions" :key="index"> -->
        <!-- <div class="rule-form-item rule-form__center rule-form__header" v-if="config.name">{{ config.name }}</div> -->
        <div>
            <a-row
                v-for="field in conditions"
                :key="field.code"
                class="rule-form-item"
                type="flex"
                align="middle"
            >
                <a-col :span="2" class="rule-form__center">
                    <a-checkbox
                        :checked="field.select"
                        @change="toggleCondition(field)"
                        :disabled="disabled"
                    ></a-checkbox>
                </a-col>
                <a-col :span="2" class="rule-form__center">
                    {{ field.code }}
                </a-col>
                <a-col :span="4" class="rule-form__center">
                    {{ field.name }}
                </a-col>
                <a-col :span="16">
                    <template v-if="field.factorType == 'Dictionary'">
                        <!-- {{field.options}} -->
                        <!-- <a-checkbox-group
                            :options="field.options"
                            v-model="fields[field.code]"
                            :disabled="disabled || !field.select"
                        ></a-checkbox-group> -->
                        <dictionary-select
                            :value="fields[field.code]"
                            :operatorId="field.operatorId"
                            :type="field.factorType"
                            :disabled="disabled || !field.select"
                            :optionsList="field.options"
                            @textChange="textChange(field, $event)"
                            @selectChange="selectChange(field, $event)"
                        ></dictionary-select>
                    </template>
                    <template
                        v-else-if="
                            field.factorType == 'String' ||
                                field.factorType == 'Number'
                        "
                    >
                        <text-field
                            :value="fields[field.code]"
                            :operatorId="field.operatorId"
                            :type="field.factorType"
                            :disabled="disabled || !field.select"
                            @textChange="textChange(field, $event)"
                        ></text-field>
                    </template>
                    <!-- <template v-else-if="field.factorType == 'Number'"> -->
                    <!-- <range-field
                            v-model="fields[field.code]"
                            :disabled="disabled || !field.select"
                        ></range-field> -->
                    <!-- </template> -->
                    <template v-else-if="field.factorType == 'AreaCode'">
                        <area-select
                            ref="areaSelect"
                            v-model="fields[field.code]"
                            :disabled="disabled || !field.select"
                        ></area-select>
                    </template>
                    <template v-else-if="field.factorType == 'CustomAreaCode'">
                        <custom-select
                            ref="customSelect"
                            v-model="fields[field.code]"
                            :disabled="disabled || !field.select"
                        ></custom-select>
                    </template>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator';

import factorUtil from '@/utils/mapper/factors';

import AreaSelect from './components/AreaSelect.vue';
import CustomSelect from './components/CustomSelect.vue';
import TextField from './components/Text.vue';
import RangeField from './components/RangeField.vue';
import DictionarySelect from './components/DictionarySelect.vue';

@Component({
    components: {
        TextField,
        RangeField,
        AreaSelect,
        CustomSelect,
        DictionarySelect,
    },
})
export default class extends Vue {
    @Prop(Array) private readonly conditions!: any[];
    @Prop({ default: false }) private readonly disabled!: boolean;
    private fields: any = {};

    // private created() {
    //     this.onConditionChange(this.conditions, []);
    // }

    private mounted() {
        console.log('customSelect ruleForm mounted');
    }

    openShow() {
        this.$nextTick(() => {
            console.log('ruleForm openShow');
            const operatorObj = this.$store.state.common.operatorObj;
            this.conditions.forEach(condition => {
                if (
                    !condition.operatorId &&
                    operatorObj[condition.factorType]
                ) {
                    const operators =
                        operatorObj[condition.factorType].operatorList;

                    if (operators.length === 1) {
                        condition.operatorId = operators[0].id;
                    } else {
                        condition.operatorId = '';
                    }
                }

                const factorInfo = factorUtil.getFactorInfo(
                    condition.operatorId
                );
                const component = (factorInfo as any).component;
                let value: any = condition.value;

                if (
                    ['Dictionary', 'CustomAreaCode', 'AreaCode'].includes(
                        condition.factorType
                    )
                ) {
                    value =
                        (condition.value && condition.value.split(',')) || [];
                }
                if ('CustomAreaCode' === condition.factorType) {
                    this.showCustomSelectChild();
                }
                // if ('AreaCode' === condition.factorType) {
                //     this.showAreaSelectChild();
                // }

                this.$set(this.fields, condition.code, value);
            });
        });
    }

    private showCustomSelectChild() {
        const custSelect = this.$refs.customSelect[0] as CustomSelect;
        console.log('customSelect showChild', custSelect);
        custSelect.showOpen();
    }

    private toggleCondition(field: any) {
        field.select = !field.select;
    }

    private textChange(field: { code: string; operatorId: string }, data: any) {
        this.fields[field.code] = data.value;
        field.operatorId = data.operatorId;
    }
    private selectChange(field: any, data: any) {
        console.log(field, 'field');
        console.log(data, 'data');
        this.fields[field.code] = data.value;
    }
}
</script>

以上是全部代码
下面是核心
private showCustomSelectChild() {
const custSelect = this.$refs.customSelect[0] as CustomSelect;
console.log('customSelect showChild', custSelect);
custSelect.showOpen();
}