<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <update-operate ref="updateLesson" :title="$t('publish.updateLesson')" @create="handleUpdate" />
  </div>
</template>

<script>
import { publishLessonList, delPublishLesson, putLessonOnLine, putLessonOffLine, updatePublishLesson } from '@/api/jmap/lesson';
import localStore from 'storejs';
import UpdateOperate from './draft.vue';
import { listPublishMap } from '@/api/jmap/map';

export default {
    name: 'PublishMap',
    components:{
        UpdateOperate
    },
    data() {
        return {
            cityList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '80px',
                reset: true,
                queryObject: {
                    name: {
                        type: 'text',
                        label: this.$t('global.name')
                    },
                    cityCode: {
                        type: 'select',
                        label: this.$t('publish.city'),
                        selectChange: this.handleCitySelect,
                        config: {
                            data: []
                        }
                    },
                    mapId: {
                        type: 'select',
                        label: this.$t('publish.belongsToMap'),
                        config: {
                            data: []
                        }
                    }
                }

            },
            queryList: {
                query: publishLessonList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('global.name'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('publish.belongsToMap'),
                        prop: 'mapId',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.mapId, this.mapList, ['id', 'name']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('publish.city'),
                        prop: 'cityCode',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.cityCode, this.cityList, ['code', 'name']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('publish.lessonIntroduction'),
                        prop: 'remarks'
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '250',
                        buttons: [
                            {
                                name: this.$t('global.putaway'),
                                handleClick: this.handlePutaway,
                                type: '',
                                showControl: (row) => { return row.status != 1; }
                            },
                            {
                                name: this.$t('global.soldOut'),
                                handleClick: this.handleSoldOut,
                                type: 'warning',
                                showControl: (row) => { return row.status == 1; }
                            },
                            {
                                name: this.$t('global.edit'),
                                handleClick: this.handleEdit,
                                type: 'primary',
                                showControl: () => { return this.isShow != -1; }
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.handleDelete,
                                type: 'danger',
                                showControl: () => { return this.isShow != -1; }
                            }
                        ]
                    }
                ]
            },

            currentModel: {}
        };
    },
    computed: {
        isShow() {
            return this.$store.getters['roles'].indexOf('05');
        }
    },
    created() {
        this.loadInitData();
    },
    methods: {
        loadInitData() {
            this.cityList = [];
            this.mapList = [];
            listPublishMap().then(resp => {
                this.mapList = resp.data;
                this.mapList.forEach(elem => {
                    this.queryForm.queryObject.mapId.config.data.push({value: elem.id, label: elem.name});
                });
            });
            this.$Dictionary.cityType().then(list => {
                this.cityList = list;
                this.cityList.forEach(elem => {
                    this.queryForm.queryObject.cityCode.config.data.push({ value: elem.code, label: elem.name });
                });
            }).catch(() => {
                this.$messageBox(this.$t('error.loadingCityListFailed'));
            });
        },
        // 编辑
        handleEdit(index, row) {
            this.$refs.updateLesson.doShow(row);
        },
        // 确认编辑
        handleUpdate(data) {
            updatePublishLesson(data).then(response => {
                this.reloadTable();
                this.$message.success(this.$t('publish.updateSuccess'));
            }).catch(() => {
                this.$messageBox(this.$t('error.updateFailed'));
            });
        },
        // 删除
        handleDelete(index, row) {
            this.$confirm(this.$t('publish.wellDelType'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                delPublishLesson(row.id).then(response => {
                    this.$message.success(this.$t('publish.deleteSuccess'));
                    this.reloadTable();
                    localStore.remove('mapId');
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.deleteFailed'));
                });
            }).catch(() => { });
        },
        handlePutaway(index, row) {
            this.$confirm(this.$t('publish.wellPutawayTraining'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                putLessonOnLine(row.id).then(response => {
                    this.$message.success(this.$t('publish.operationSuccess'));
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.operationFailure'));
                });
            }).catch(() => { });
        },

        handleSoldOut(index, row) {
            this.$confirm(this.$t('publish.wellSoldOutTraining'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                putLessonOffLine(row.id).then(response => {
                    this.$message.success(this.$t('publish.operationSuccess'));
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.operationFailure'));
                });
            }).catch(() => { });
        },
        reloadTable() {
            this.queryList.reload();
        },
        handleCitySelect(form) {
            this.queryForm.queryObject.mapId.config.data = [];
            form.mapId = '';
            if (!form.cityCode) {
                this.mapList.forEach(elem => {
                    this.queryForm.queryObject.mapId.config.data.push({value: elem.id, label: elem.name});
                });
            } else {
                this.mapList.forEach(elem => {
                    if (elem.cityCode === form.cityCode) {
                        console.log('2222222');
                        this.queryForm.queryObject.mapId.config.data.push({value: elem.id, label: elem.name});
                        console.log(this.queryForm.queryObject.mapId, '====');
                    }
                });
            }
        }
    }
};
</script>
