<template>
    <el-row>
        <el-form-item label="默认值类型" label-width="90px">
            <el-radio-group v-model="activeData.__config__.valueType" size="small"
                style="text-align:center" @change="valueTypeChange">
                <el-radio label="1">发起相关</el-radio>
                <el-radio label="2">正常</el-radio>
            </el-radio-group>
        </el-form-item>

        <template v-if="activeData.__config__.valueType == '1'">
            <el-divider>数据选项</el-divider>
            <el-form-item label="发起类型">
                <el-select v-model="activeData.__config__.defaultValue" placeholder="请选择发起类型">
                    <el-option :label="item.fullName" :value="item.enCode"
                        v-for="item,index in startOptions" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="默认值">
                <el-input v-model="activeData.__config__.defaultValue" placeholder="请输入默认值" />
            </el-form-item>
            <el-divider />

        </template>

        <template v-if="activeData.__config__.valueType == '2'">
            <el-divider>数据选项</el-divider>
            <el-form-item label="数据来源" label-width="90px">
                <el-radio-group v-model="activeData.__config__.isApi" size="small"
                    style="text-align:center" @change="dataTypeChange">
                    <el-radio label="1">API</el-radio>
                    <el-radio label="2">数据字典</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="activeData.__config__.isApi == '1'">
                <el-form-item label="API路径" label-width="90px">
                    <el-row class="jnpf-el-row">
                        <el-col :span="18">
                            <el-input v-model="activeData.__config__.fieldApi"
                                placeholder="请输入动态API接口路径">
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-button @click="getApiOption(activeData.__config__.fieldApi)">
                                确认</el-button>
                        </el-col>
                    </el-row>

                </el-form-item>
                <el-form-item label="存储字段">
                    <el-autocomplete class="inline-input" v-model="activeData.props.value"
                        :fetch-suggestions="querySearch" placeholder="请输入存储字段" style="width:100%"
                        @select="handleSelect($event,'value')">
                        <template slot-scope="{ item }">
                            <div class="sale-order-popper-item">
                                <span>{{ item.defaultValue}}</span>
                            </div>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="显示字段">
                    <el-autocomplete class="inline-input" v-model="activeData.props.label"
                        :fetch-suggestions="querySearch" placeholder="请输入显示字段" style="width:100%"
                        @select="handleSelect($event,'label')">
                        <template slot-scope="{ item }">
                            <div class="sale-order-popper-item">
                                <span>{{ item.defaultValue}}</span>
                            </div>
                        </template>
                    </el-autocomplete>
                </el-form-item>

            </template>
            <template v-if="activeData.__config__.isApi == '2'">
                <el-form-item label="数据字典">
                    <el-row class="jnpf-el-row">
                        <el-col :span="18">
                            <JnpfTreeSelect :options="dicOptions"
                                v-model="activeData.__config__.fieldApi" placeholder="请选择数据字典"
                                lastLevel clearable @change="dictionaryTypeChange"
                                @selectChange="selectChange">
                            </JnpfTreeSelect>
                        </el-col>
                        <el-col :span="6">
                            <el-button @click="goDictionary()">
                                添加</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="存储字段">
                    <el-autocomplete class="inline-input" v-model="activeData.props.value"
                        :fetch-suggestions="querySearch" placeholder="请输入存储字段" style="width:100%"
                        @select="handleSelect($event,'value')">
                        <template slot-scope="{ item }">
                            <div class="sale-order-popper-item">
                                <span>{{ item.defaultValue}}</span>
                            </div>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="显示字段">
                    <el-autocomplete class="inline-input" v-model="activeData.props.label"
                        :fetch-suggestions="querySearch" placeholder="请输入显示字段" style="width:100%"
                        @select="handleSelect($event,'label')">
                        <template slot-scope="{ item }">
                            <div class="sale-order-popper-item">
                                <span>{{ item.defaultValue}}</span>
                            </div>
                        </template>
                    </el-autocomplete>
                </el-form-item>

            </template>
            <el-form-item label="默认值">
                <el-select v-model="activeData.__config__.defaultValue" placeholder="选择默认值"
                    clearable :multiple="activeData.multiple" filterable>
                    <el-option v-for="(item,i) in activeData.options" :key="i"
                        :label="item[activeData.props.label]" :value="item[activeData.props.value]">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="是否多选">
                <el-switch v-model="activeData.multiple"></el-switch>
            </el-form-item>
            <el-divider />
        </template>

    </el-row>
</template>


<script>
import comMixin from './mixin';
import dynamicMixin from './dynamicMixin';
import handelFlidMixin from './handelFlidMixin';
import dicIndex from '@/views/systemData/dictionary/index.vue';
import BatchEditing from './BatchEditing'

import { getDictionaryDataSelector } from '@/api/systemData/dictionary'


export default {
    components: {
        dicIndex, BatchEditing
    },
    mixins: [comMixin, dynamicMixin, handelFlidMixin],
    data() {
        return {
            dicVisible: false,
            updateVisible: false,
            resultInfo: '',
            separator: '|',
            startOptions: []
        }
    },
    created() {
        if (this.activeData.__config__.isApi && this.activeData.__config__.fieldApi) {
            if (this.activeData.__config__.isApi == '1') {
                this.getApiOption(this.activeData.__config__.fieldApi).then((res) => {
                    this.activeData.options = res.data
                })
            }


        }

        if (this.activeData.__config__.valueType == '1') {
            this.getStartOptions();
        }
    },
    methods: {
        valueTypeChange(e) {
            if (e == '1') {
                this.activeData.__config__.defaultValue = '';
                this.getStartOptions();
                this.activeData.__config__.isApi = null
                this.activeData.__config__.fieldApi = null
            } else {
                if (this.activeData.multiple) {
                    delete this.activeData.__config__.defaultValue
                    this.activeData.__config__.defaultValue = null;
                } else {
                    this.activeData.__config__.defaultValue = '';
                }
            }
        },
        selectChange() {
            this.$emit('changeSelect')
            this.dictionaryTypeChange(this.dictionaryId)
        },
        defaultValueChange() {
            this.selectChange()
        },
        goDictionary() {
            this.dicVisible = true
            this.$nextTick(() => {
                this.$refs.dicIndex.initData()
            })
        },
        updateSelectItem() {
            this.updateVisible = true
            this.$nextTick(() => {
                this.$refs.batchEditing.init(this.activeData.options)
            })
        },
        handleSure(arr) {
            this.activeData.options = arr || []
        },
        dataTypeChange(val) {
            this.activeData.__config__.defaultValue = ''
            this.activeData.options = []
            this.activeData.props = {
                value: null,
                label: null
            }
            this.activeData.props.value = 'id'
            this.activeData.props.label = 'fullName'
            this.activeData.__config__.fieldApi = ''
            this.activeData.__config__.propsUrl = ''
            this.activeData.__config__.propsName = ''
            this.activeData.__config__.templateJson = []
        },
        getStartOptions() {
            getDictionaryDataSelector('processFormDefaultValue').then(res => {
                this.startOptions = res.data.list
            })
        },

    }
}
</script>
<style lang="scss" scoped>
.jnpf-el-row {
    >>> .el-input__inner {
        border-radius: 4px 0 0 4px !important;
    }

    >>> .el-button {
        border-left: 0;
        background-color: #f5f7fa;
        font-size: 13px;
        color: #909399;
        border-radius: 0 4px 4px 0;
        line-height: 12px;
    }
    >>> .el-button:hover {
        border-color: #dcdfe6;
    }
}
</style>