<template>
  <el-dialog
    v-dialogDrag
    class="beijing-01__schedule manage-plan-list"
    :title="title"
    :visible.sync="dialogShow"
    width="80%"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
  </el-dialog>
</template>

<script>
import { getRunPlanLoadList, deleteRunPlanLoad, listAllTempLateRunPlan } from '@/api/runplan';
import { getPublishMapListOnline } from '@/api/jmap/map';

export default {
    name: 'ManagePlanList',
    data() {
        return {
            dialogShow: false,
            loading: false,
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '140px',
                reset: true
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('publish.mapName'),
                        prop: 'mapId',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.mapId, this.mapList, ['id', 'name']); },
                        tagType: (row) => { return ''; }
                    },
                    {
                        title: this.$t('publish.runPlanName'),
                        prop: 'templatePlanId',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.templatePlanId, this.templatePlanList, ['id', 'name']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: '加载日期',
                        prop: 'loadTime'
                    },
                    {
                        type: 'button',
                        title: '操作',
                        width: '100',
                        buttons: [
                            {
                                name: '删除',
                                handleClick: this.handleDelete,
                                type: 'danger'
                            }
                        ]
                    }
                ],
                actions: [
                    { text: '创建', btnCode: 'employee_insert', handler: this.handleCreateRunPlan }
                ]
            },

            currentModel: {}
        };
    },
    computed: {
        title() {
            return '运行图计划表';
        }
    },
    mounted() {
        this.loadPageData();
    },
    methods: {
        loadPageData() {
            this.mapList = [];
            getPublishMapListOnline().then(resp => {
                this.mapList = resp.data;
            });
            this.templatePlanList = [];
            listAllTempLateRunPlan().then(resp => {
                this.templatePlanList = resp.data;
            });
        },
        queryFunction(params) {
            if (this.$route.query.mapId) {
                params['mapId'] = this.$route.query.mapId;
            }

            if (this.$store.state.user.id) {
                params['userId'] = this.$store.state.user.id;
            }

            return getRunPlanLoadList(params);
        },
        handleDelete(index, row) {
            this.$confirm('此操作将删除次日加载的运行图, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteRunPlanLoad(row.id).then(response => {
                    this.$message.success('删除成功');
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox('删除失败');
                });
            }).catch(() => { });
        },
        handleCreateRunPlan() {
            this.$emit('dispatchDialog', { name: 'createWeekPlan' });
        },
        doShow() {
            this.dialogShow = true;
            this.$nextTick(()=> { this.reloadTable(); });
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        },
        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
</style>
