<template>
    <el-dialog :title="title" :visible.sync="dialogShow" width="80%" :before-close="doClose" :modal="false"
        :close-on-click-modal="false" v-dialogDrag>
        <QueryListPage ref="pageRules" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList">
        </QueryListPage>
        <el-row type="flex" justify="center" class="button-group">
            <el-button type="primary" @click="handleConfirm" :loading="loading">选 择</el-button>
            <el-button @click="dialogShow = false">取 消</el-button>
        </el-row>
    </el-dialog>
</template>

<script>
    import { runPlanTemplateList } from '@/api/runplan';
    import { getSkinStyleList } from '@/api/management/mapskin'
    import { UrlConfig } from '@/router/index';

    export default {
        name: 'ChooseTemplatePlan',
        data() {
            return {
                dialogShow: false,
                loading: false,
                skinStyleList: [],
                model: {},
                pagerConfig: {
                    pageSize: 'pageSize',
                    pageIndex: 'pageNum'
                },
                queryForm: {
                    reset: true,
                    labelWidth: '100px',
                    queryObject: {
                        name: {
                            type: 'text',
                            label: '运行图名称'
                        }
                    }
                },
                queryList: {
                    query: this.queryFunction,
                    selectCheckShow: false,
                    radioShow: true,
                    columns: [
                        {
                            title: '运行图名称',
                            prop: 'name'
                        },
                        {
                            title: '皮肤类型',
                            prop: 'skinStyle',
                            type: 'tag',
                            columnValue: (row) => {
                                return this.convertField(row.skinStyle, this.skinStyleList, ['code', 'name'])
                            },
                            tagType: (row) => { return 'success' }
                        }
                    ]
                },

                currentModel: {}
            }
        },
        computed: {
            title() {
                return '选择模板运行图'
            }
        },
        methods: {
            loadInitData() {
                this.skinStyleList = [];
                getSkinStyleList().then(response => {
                    this.skinStyleList = response.data;
                })
            },
            doShow(model) {
                this.loading = false;
                this.dialogShow = true;
                this.model = model;
                this.loadInitData();
            },
            doClose() {
                this.dialogShow = false;
            },
            queryFunction(params) {
                params['skinStyle'] = this.model.skinStyle || '';
                return runPlanTemplateList(params);
            },
            convertField(fieldValue, enumList, converFormat) {
                if (converFormat && converFormat.length >= 2) {
                    let value = converFormat[0];
                    let label = converFormat[1];
                    for (let i = 0; enumList && i < enumList.length; i++) {
                        if ('' + fieldValue === '' + enumList[i][value]) {
                            return enumList[i][label];
                        }
                    }
                }
            },
            handleConfirm() {
                this.doClose();
                if (this.$refs && this.$refs.pageRules) {
                    const choose = this.$refs.pageRules.currentChoose();
                    if (choose) {
                        this.$emit('chooseConfirm', choose);
                    } else {
                        this.$messageBox(`请选择模板运行图`);
                    }
                }
            },
            reloadTable() {
                this.queryList.reload()
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .button-group {
        margin-top: 20px;
    }
</style>