<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogShow" width="80%" :before-close="doClose" :modal="false" :close-on-click-modal="false">
    <QueryListPage ref="pageRules" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <el-row type="flex" justify="center" class="button-group">
      <el-button type="primary" :loading="loading" @click="handleConfirm">{{ $t('global.select') }}</el-button>
      <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { runPlanTemplateList } from '@/api/runplan';
import { getPublishMapListOnline } from '@/api/jmap/map';

export default {
    name: 'ChooseTemplatePlan',
    data() {
        return {
            dialogShow: false,
            loading: false,
            mapIdList: [],
            model: {},
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                reset: true,
                labelWidth: '140px',
                queryObject: {
                    name: {
                        type: 'text',
                        label: this.$t('publish.runPlanName')
                    }
                }
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                radioShow: true,
                columns: [
                    {
                        title: this.$t('publish.runPlanName'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('publish.mapName'),
                        prop: 'mapId',
                        type: 'tag',
                        columnValue: (row) => {
                            return this.$convertField(row.mapId, this.mapIdList, ['id', 'name']);
                        },
                        tagType: (row) => { return 'success'; }
                    }
                ]
            },

            currentModel: {}
        };
    },
    computed: {
        title() {
            return this.$t('publish.selectTemplateRunPlan');
        }
    },
    methods: {
        loadInitData() {
            this.mapIdList = [];

            getPublishMapListOnline().then(response => {
                this.mapIdList = response.data;
            });
        },
        doShow(model) {
            this.loading = false;
            this.dialogShow = true;
            this.model = model;
            this.loadInitData();
        },
        doClose() {
            this.dialogShow = false;
        },
        queryFunction(params) {
            params['mapId'] = this.model.mapId || '';
            return runPlanTemplateList(params);
        },
        handleConfirm() {
            this.doClose();
            if (this.$refs && this.$refs.pageRules) {
                const choose = this.$refs.pageRules.currentChoose();
                if (choose) {
                    this.$emit('chooseConfirm', choose);
                } else {
                    this.$messageBox(this.$t('publish.pleaseSelectTemplate'));
                }
            }
        },
        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

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