<template>
    <div>
        <Input type="text"
            readonly
            :clearable="!readonly"
            v-model="selected"
            :style="{ width: controlWidth == null ? null : (controlWidth + 'px') }"
            @on-focus="dialogSelectOpen()"
            @on-clear="dialogSelectRemove()">
        <Button slot="prepend"
            custom-icon="fa fa-search"
            @click="dialogSelectOpen()"></Button>
        </Input>
        <modal-table ref="dialogTable"
            :view-code="source"
            v-if="dialogActive">
            <template slot-scope="{ row }"
                slot="command">
                <Button size="small"
                    title="选择"
                    type="primary"
                    custom-icon="fa fa-check"
                    @click="dialogCheck(row)"></Button>
            </template>
        </modal-table>
    </div>
</template>
<script>
    import mixinPage from '../../mixins/page';
    import { mapActions } from 'vuex';
    import modelApi from '../../api/model';
    import customModelApi from '../../api/customModel';
    import dataSourceApi from '../../api/dataSource';

    export default {
        mixins: [mixinPage],
        data() {
            return {
                changed: false,
                selected: null,
                selectedData: null,
                dialogActive: false
            };
        },
        props: {
            // 值
            value: {
                type: String
            },
            // 数据源
            source: {
                type: String
            },
            // 数据源数据列名
            sourceDataCode: {
                type: String
            },
            // 数据源显示列名
            sourceDisplayCode: {
                type: String
            },
            // 参数
            param: {
                type: Object
            },
            // 只读
            readonly: {
                type: Boolean,
                default: false
            },
            // 控件宽度
            controlWidth: {
                type: Number
            }
        },
        computed: {},
        watch: {
            value() {
                if (!this.changed) {
                    this.showSelected();
                }

                this.changed = false;
            }
        },
        mounted() {
            this.showSelected();
        },
        methods: {
            ...mapActions('admin/dataView', { loadDataView: 'load' }),
            // 显示选择项
            showSelected() {
                if (this.value == null) {
                    this.selected = null;
                    this.selectedData = null;
                    return;
                } else {
                    let filter = {
                        page: 1,
                        per: 1
                    };
                    filter[this.sourceDataCode] = this.value;

                    this.loadDataView(this.source).then(async view => {
                        if (view.dataView.isCustom) {
                            let res = await customModelApi.query(view.dataView.model, filter);
                            if (res.data.length > 0) {
                                this.selected = this.parseData(res.data[0], this.sourceDisplayCode);
                                this.selectedData = res.data[0];

                                this.$forceUpdate();
                            }
                        }
                        if (view.dataView.isDataSource) {
                            let res = await dataSourceApi.query(view.dataView.dataSource, filter);
                            if (res.table.length > 0) {
                                this.selected = this.parseData(res.table[0], this.sourceDisplayCode);
                                this.selectedData = res.table[0];

                                this.$forceUpdate();
                            }
                        } else {
                            let res = await modelApi.query(view.dataView.model, filter);
                            if (res.data.length > 0) {
                                this.selected = this.parseData(res.data[0], this.sourceDisplayCode);
                                this.selectedData = res.data[0];

                                this.$forceUpdate();
                            }
                        }
                    });
                }
            },
            // 弹出选择框
            dialogSelectOpen() {
                if (!this.readonly) {
                    this.dialogActive = true;

                    setTimeout(async () => {
                        this.$refs.dialogTable.open(this.param);
                    });
                }
            },
            // 弹出选择框选中
            dialogCheck(row) {
                this.changed = true;

                this.$emit('input', this.parseData(row, this.sourceDataCode));
                this.selected = this.parseData(row, this.sourceDisplayCode);
                this.selectedData = row;

                this.$forceUpdate();

                this.$emit('on-change', row);

                this.$refs.dialogTable.close();
            },
            // 弹出选择框移除内容
            dialogSelectRemove() {
                this.changed = true;
                this.$emit('input', null);
                this.selected = null;
                this.selectedData = null;

                this.$emit('on-change');
            }
        }
    };
</script>
