<template>
    <div v-bind:class="{'ap-grid-column-select': true,
                        'ap-grid-column-change': isChange(rowData.changeArr),
                        'ap-grid-column-error': showRuleMsg,}">

        <el-select v-model="rowData[opts.prop]"
                   @change="changeEvent(rowData)"
                   :multiple="opts.selectMultiple"
                   :placeholder="opts.selectPlaceholder"
                   :clearable="opts.selectClearable"
                   :filterable="opts.selectFilterable">
            <!-- 1、下拉选型分组 -->
            <template v-if="opts.selectIsGroup">
                <el-option-group v-for="(group, index) in opts.selectOptions" :label="group.label" :key="index">
                    <el-option v-for="(item, itemIndex) in group.options" :label="item[opts.selectOptionsKey.label]"
                               :key="itemIndex"
                               :value="item[opts.selectOptionsKey.value]"></el-option>
                </el-option-group>
            </template>
            <!-- 2、下拉选型 -->
            <template v-else>
                <el-option v-for="(item, index) in opts.selectOptions" :label="item[opts.selectOptionsKey.label]"
                           :key="index"
                           :value="item[opts.selectOptionsKey.value]"></el-option>
            </template>
        </el-select>

        <!-- rule校验 -->
        <div v-html="ruleMsg" v-show="showRuleMsg" class="ap-grid-column-error-msg"></div>
    </div>
</template>

<script>
import {handleDefaultParams} from 'ap-util/util/ObjectUtil'
import ApTableColBase from './ApTableColBase'

export default {
    name: "ApTableSelect",
    extends: ApTableColBase,
    data() {
        return {
            opts: {},
        }
    },
    created() {
        // 初始化组件前修改默认参数
        this.opts = handleDefaultParams(this.colOptions, {
            selectMultiple: false, // 默认单选
            selectFilterable: true,
            selectClearable: false,
            placeholder: '请选择',
            selectIsGroup: false,
            selectOptionsKey: {label: "label", value: "value"},
            // 默认selectOptions，为空取后台selectOptionsRemote
            selectOptions: this.colOptions.selectOptions || this.attr[this.colOptions.selectOptionsRemote]
        });
    },
    methods: {}
}
</script>

<style scoped>
.ap-grid-column-select /deep/ .el-input__icon {
    width: 12px;
    font-size: 12px;
}
.ap-grid-column-select /deep/ .el-input__inner {
    padding: 0px 15px 0 0;
    border-radius: 4px
}

.ap-grid-column-error /deep/ .el-input__inner {
    border: 1px solid red;
}
</style>
