<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="show"
    width="600px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height+'px'}">
      <el-tree
        ref="tree"
        class="filter-tree"
        :data="trainingList"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        :style="{height: height+'px'}"
        @node-click="clickEvent"
      >
        <span slot-scope="{ node, data }">
          <span v-if="data.state=='01'">{{ '['+data.mapName+']'+($t('global.trainingNotStart').replace('{name}', data.creator.nickName)) }}</span>
          <span v-else>{{ '['+data.mapName+']'+($t('global.trainingHasStart').replace('{name}', data.creator.nickName)) }}</span>
        </span>
      </el-tree>
    </el-scrollbar>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button type="primary" @click="handleJoin">{{ $t('global.joinRoom') }}</el-button>
      <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getjointTrainList, getjointTraining, putJointTrainingSimulationEntrance } from '@/api/chat';
import { getPublishMapInfo } from '@/api/jmap/map';
import { launchFullscreen } from '@/utils/screen';

export default {
    name: 'DeomonList',
    data() {
        return {
            dialogShow: false,
            loading: false,
            height: 120,
            trainingList: [],
            defaultProps: {
                label: 'roomName'
            },
            group: '',
            state: '',
            mapId: ''
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        title() {
            return this.$t('global.synthesisTrainingTitle');
        },
        isWatch() {
            return true;
        },
        isjoin() {
            return true;
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        clickEvent(obj, node, data) {
            this.state = obj.state;
            this.group = obj.group;
            this.mapId = obj.mapId;
        },
        async getList() {
            try {
                const res = await getjointTrainList();
                this.trainingList = res.data;
            } catch (error) {
                console.error(error);
            }
        },
        doShow() {
            this.getList();
            this.loading = false;
            this.dialogShow = true;
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        },
        async handleJoin() {
            if (this.group) {
                await getjointTraining(this.group);
                if (this.state == '02') {
                    launchFullscreen();
                    await putJointTrainingSimulationEntrance(this.group);
                    const rest = await getPublishMapInfo(this.mapId);
                    const query = { lineCode: rest.data.lineCode, mapId: this.mapId, group: this.group, subSystem: this.$route.query.subSystem };
                    this.$router.push({ path: `/jointTraining`, query: query });
                } else if (this.state == '01') {
                    const query = { group: this.group };
                    this.$router.push({ path: `/trainroom`, query: query });
                }
            } else {
                this.$message.info(this.$t('global.pleaseChooseRoom'));
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ {
        .el-dialog__body {
            padding: 0px 30px !important;
        }

        .el-tree {
            overflow: hidden !important;
        }

        .el-tree-node.is-current>.el-tree-node__content {
            background-color: #e4e3e3 !important;
        }
    }
</style>
