<template>
    <div>
        <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList">
        </QueryListPage>
        <training-draft ref="draftTrain" :skinStyleList="skinStyleList" :trainingTypeList="trainingTypeList"
            :trainingOperateTypeMap="trainingOperateTypeMap" @refresh="reloadTable"></training-draft>
    </div>
</template>

<script>
    import { listPublishMap, putMapProductOnLine, putMapProductOffLine } from '@/api/jmap/mapdraft';
    import { getPublishMapInfo } from '@/api/jmap/map';
    import { pageQueryTraining } from '@/api/jmap/training';
    import { trainingNotify } from '@/api/simulation';
    import { getCommodityMapProduct, getProductList } from '@/api/management/mapprd';
    import { launchFullscreen } from '@/utils/screen';
    import { getSkinStyleList } from '@/api/management/mapskin';
    import { UrlConfig } from '@/router/index';
    import TrainingDraft from './draft';
    import localStore from 'storejs';

    export default {
        name: 'TrainingGeneration',
        components: {
            TrainingDraft,
        },
        data() {
            return {
                skinStyleList: [],
                trainingTypeList: [],
                prdTypeList: [],
                trainingOperateTypeMap: {},
                pagerConfig: {
                    pageSize: 'pageSize',
                    pageIndex: 'pageNum'
                },
                queryForm: {
                    labelWidth: '80px',
                    initLoadCallback: this.loadInitQueryList,
                    queryObject: {
                        skinStyle: {
                            type: 'select',
                            label: '皮肤类型',
                            change: this.skinStyleChoose,
                            config: {
                                data: []
                            }
                        },
                        prdCode: {
                            type: 'select',
                            label: '产品',
                            change: this.prdChoose,
                            config: {
                                data: []
                            }
                        },
                        type: {
                            type: 'select',
                            label: '实训类型',
                            change: this.typeChoose,
                            config: {
                                data: []
                            }
                        },
                        operateType: {
                            type: 'select',
                            label: '操作类型',
                            config: {
                                data: []
                            }
                        },
                        generateType: {
                            type: 'select',
                            label: '自动/人工',
                            config: {
                                data: [{ value: '02', label: '人工' }, { value: '01', label: '自动' }]
                            }
                        },
                        name: {
                            type: 'text',
                            label: '实训名称'
                        }
                    }
                },
                queryList: {
                    query: pageQueryTraining,
                    selectCheckShow: false,
                    indexShow: true,
                    columns: [
                        {
                            title: '实训名称',
                            prop: 'name'
                        },
                        {
                            title: '皮肤类型',
                            prop: 'skinStyle',
                            type: 'tag',
                            columnValue: (row) => { return this.convertField(row.skinStyle, this.skinStyleList, ['code', 'name']) },
                            tagType: (row) => { return '' }
                        },
                        {
                            title: '产品',
                            prop: 'prdCode',
                            type: 'tag',
                            columnValue: (row) => { return this.convertField(row.prdCode, this.prdTypeList, ['code', 'name']) },
                            tagType: (row) => { return 'success' }
                        },
                        {
                            title: '实训类型',
                            prop: 'type',
                            type: 'tag',
                            columnValue: (row) => { return this.convertField(row.type, this.trainingTypeList, ['code', 'name']) },
                            tagType: (row) => { return 'success' }
                        },
                        {
                            title: '操作类型',
                            prop: 'operateType',
                            type: 'tag',
                            columnValue: (row) => { return this.convertField(row.operateType, this.trainingOperateTypeMap[row.type], ['code', 'name']) },
                            tagType: (row) => { return 'success' }
                        },
                        {
                            title: '最小用时',
                            prop: 'minDuration'
                        },
                        {
                            title: '最大用时',
                            prop: 'maxDuration'
                        },
                        {
                            title: '描述',
                            prop: 'remarks'
                        },
                        {
                            type: 'button',
                            title: '操作',
                            width: '250',
                            buttons: [
                                {
                                    name: '演示',
                                    handleClick: this.demoDisplay,
                                    type: ''
                                }
                            ]
                        }
                    ],
                    actions: [
                        { text: '生成实训', btnCode: 'employee_insert', handler: this.autoMaticTrainging },
                        { text: '修改实训', btnCode: 'employee_insert', handler: this.editTrainingByType, type: 'warning' },
                        { text: '删除实训', btnCode: 'employee_insert', handler: this.delAutoMaticTrainging, type: 'danger', },
                    ]
                },

                currentModel: {}
            }
        },
        async created() {
            await this.loadInitData();
            let json = localStore.get(this.$route.path);
            if (json && json.type) {
                this.typeChoose(json);
            }
            if (json && json.prdCode) {
                this.skinStyleChoose(json);
            }
        },
        methods: {
            async loadInitData() {
                this.skinStyleList = [];
                this.queryForm.queryObject.skinStyle.config.data = [];
                getSkinStyleList().then(response => {
                    this.skinStyleList = response.data;
                    response.data.forEach(elem => {
                        this.queryForm.queryObject.skinStyle.config.data.push({ value: elem.code, label: elem.name });
                    })
                })

                this.prdTypeList = [];
                getProductList({ pageSize: 500, pageNum: 1 }).then(res => {
                    let list = res.data.list;
                    if (list && list.length > 0) {
                        this.prdTypeList = list.filter(elem => { return elem.prdType != '03'; });
                    }
                })

                // 获取实训类型
                this.trainingTypeList = [];
                this.$Dictionary.trainingType().then(list => {
                    this.trainingTypeList = list;
                    list.forEach(elem => {
                        this.queryForm.queryObject.type.config.data.push({ value: elem.code, label: elem.name });
                    });
                })

                this.trainingOperateTypeMap = {}
                let list01 = await this.$Dictionary.stationControl();
                this.trainingOperateTypeMap['01'] = list01;   //控制权实训
                let list02 = await this.$Dictionary.signalOperation();
                this.trainingOperateTypeMap['02'] = list02;   //信号机实训
                let list03 = await this.$Dictionary.switchOperation();
                this.trainingOperateTypeMap['03'] = list03;   //道岔实训
                let list04 = await this.$Dictionary.sectionOperation();
                this.trainingOperateTypeMap['04'] = list04;   //区段实训
                let list05 = await this.$Dictionary.stationStandOperation();
                this.trainingOperateTypeMap['05'] = list05;   //站台实训
                let list06 = await this.$Dictionary.trainPlanOperation();
                this.trainingOperateTypeMap['06'] = list06;   //行车计划实训
                let list07 = await this.$Dictionary.trainOperation();
                this.trainingOperateTypeMap['07'] = list07;   //列车实训
                let list08 = await this.$Dictionary.limitOperation();
                this.trainingOperateTypeMap['08'] = list08;   //限速实训
                this.reloadTable()
            },
            loadInitQueryList(form) {
                if (form && form.skinStyle) {
                    getCommodityMapProduct(form.skinStyle).then((response) => {
                        let productList = response.data;
                        if (productList && productList.length > 0) {
                            productList.forEach(elem => {
                                //过滤综合演练产品
                                if (elem.prdType != '03') {
                                    this.queryForm.queryObject.prdCode.config.data.push({ value: elem.code, label: elem.name });
                                }
                            })
                        }
                    })
                }
            },
            skinStyleChoose(form) {
                this.queryForm.queryObject.prdCode.config.data = [];
                form.type = '';
                form.prdCode = '';
                form.operateType = '';
                this.loadInitQueryList(form);
            },
            prdChoose(form) {
                form.type = '';
                form.operateType = '';
            },
            typeChoose(form) {
                this.queryForm.queryObject.operateType.config.data = [];
                form.operateType = '';
                if (form && form.type) {
                    this.trainingOperateTypeMap[form.type].forEach(elem => {
                        this.queryForm.queryObject.operateType.config.data.push({ value: elem.code, label: elem.name });
                    })
                }
            },
            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];
                        }
                    }
                }
            },
            autoMaticTrainging() {
                this.$refs.draftTrain.show({ event: '01', title: '自动生成实训' });
            },
            editTrainingByType() {
                this.$refs.draftTrain.show({ event: '02', title: '按类别修改实训' });
            },
            delAutoMaticTrainging() {
                this.$refs.draftTrain.show({ event: '03', title: '删除自动生成实训' });
            },
            demoDisplay(index, node) {
                trainingNotify({ trainingId: node.id }).then(resp => {
                    /** 区分演示和正式，需要在演示时设置lessonId为0*/
                    let query = { group: resp.data, trainingId: node.id, lessonId: 0 };
                    this.$router.push({ path: `${UrlConfig.display}/manage`, query: query });

                    launchFullscreen();
                }).catch(error => {
                    this.$messageBox(`创建仿真失败: ${error.message}`);
                })

            },
            reloadTable() {
                this.queryList.reload()
            }
        }
    }
</script>